Merge pull request #164 from AbigailDawson/alexg/KN-44-login-refactor

LOGIN #3 and #4 (KN-44 KN-70) Login Refactor

.gitignore

@@ -10,7 +10,7 @@
 
 # production
 /client/build
-/client/dist
+# /client/dist
 /server/build
 /server/dist
 

client/src/LandingPages/LandingPage/LandingPage.jsx

@@ -11,9 +11,12 @@ import { MdEmail } from 'react-icons/md';
 import { FaXTwitter } from 'react-icons/fa6';
 import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../contexts/Auth/AuthProvider';
+import LoginModal from '../components/LandingPageLoginModal/LoginModal';
 
 export default function LandingPage() {
   const [showModal, setShowModal] = useState(false);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+
   const screenHeight = window.screen.height;
   const screenWidth = window.screen.width;
   const { user } = useAuthContext();
@@ -62,9 +65,18 @@ export default function LandingPage() {
                   className="btn btn-lg px-4 github-button">
                   GitHub
                 </a>
-                <Link to="/login" className="btn btn-lg px-4 login-button">
-                  Login
-                </Link>
+
+                {/* temporary button element for login modal. Based on wireframes, this might move elsewhere */}
+                <div>
+                  <button
+                    className="btn btn-lg px-4 login-button"
+                    onClick={() => setShowLoginModal(true)}>
+                    Login
+                  </button>
+
+                  {/* Conditionally render the LoginModal */}
+                  {showLoginModal && <LoginModal setShowModal={() => setShowLoginModal(false)} />}
+                </div>
                 <Link to="/signup" className="btn btn-lg px-4 signup-button">
                   Sign up
                 </Link>

client/src/LandingPages/LoginPage/LoginPage.jsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import './LoginPage.css';
+import './LoginPage.scss';
 import { Link } from 'react-router-dom';
 import LandingPageNav from '../components/LandingPageHeader/LandingPageNav';
 import * as authService from '../../services/authService';
 import { useNavigate } from 'react-router-dom';
 import { useAuthContext } from '../../contexts/Auth/AuthProvider';
+import FormInput from '../components/Forms/FormInput/FormInput';
 
 export default function LoginPage() {
   const [inputValue, setInputValue] = useState({
@@ -15,6 +16,24 @@ export default function LoginPage() {
   const navigate = useNavigate();
   const { setUser } = useAuthContext();
 
+  // Add more form fields as needed here:
+  const formFields = [
+    {
+      name: 'email',
+      label: 'Email Address',
+      type: 'email',
+      id: 'login-email',
+      htmlFor: 'login-email'
+    },
+    {
+      name: 'password',
+      label: 'Password',
+      type: 'password',
+      id: 'login-password',
+      htmlFor: 'login-password'
+    }
+  ];
+
   const handleChange = (e) => {
     const { name, value } = e.target;
     setInputValue({
@@ -25,6 +44,8 @@ export default function LoginPage() {
 
   async function handleLogin(e) {
     e.preventDefault();
+    setErrorMessage('');
+
     try {
       const user = await authService.logIn(inputValue);
       setUser(user);
@@ -44,28 +65,55 @@ export default function LoginPage() {
   return (
     <main>
       <LandingPageNav />
-      <div className="login-page-login-form-container">
-        <form className="login-page-login-form" onSubmit={handleLogin}>
-          <label>Email/Username:</label>
-          <input type="text" name="email" value={inputValue.email} onChange={handleChange} />
-          <label>Password:</label>
-          <input
-            type="password"
-            name="password"
-            value={inputValue.password}
-            onChange={handleChange}
-          />
-          <button type="submit" className="login-page-login-button">
-            Login
-          </button>
-          {errorMessage && <p className="login-error-message">{errorMessage}</p>}
-        </form>
-        <div>
-          <button>Sign in with Google</button>
+      <div className="login-page__form-container">
+        <div className="login-page__container">
+          <h1 className="login-page__header">Log in to view your dashboard</h1>
+          <form className="login-page__form" onSubmit={handleLogin}>
+            {formFields.map((input, idx) => (
+              <FormInput
+                key={idx}
+                {...input}
+                value={inputValue[input.name]}
+                onChange={handleChange}
+              />
+            ))}
+
+            {/* Needs functionality */}
+            <p className="login-page__forgot">Forgot Password?</p>
+            <div className="login-page__error-container">
+              {errorMessage && (
+                <div>
+                  <img
+                    className="login-page__error-symbol"
+                    src="/images/error_note.svg"
+                    alt="error symbol"
+                  />{' '}
+                  <p className="login-page__error-message">{errorMessage}</p>{' '}
+                </div>
+              )}
+            </div>
+            <button type="submit" className="login-page__button--primary login-page__button">
+              Log In
+            </button>
+          </form>
+
+          <div className="login-page__separator">
+            <span className="login-page__separator__text">OR</span>
+          </div>
+          <div className="">
+            <button className="login-page__button--google login-page__button">
+              <img
+                src="/images/google_icon.svg"
+                alt="google sign in"
+                className="login-page__google-icon"
+              />
+              Log in with Google
+            </button>
+          </div>
+          <Link to="/signup" className="login-page__signup-link">
+            Don't have an account? Sign-Up
+          </Link>
         </div>
-        <Link to="/signup" className="login-page-signup-link">
-          Don't have an account? Sign-Up
-        </Link>
       </div>
     </main>
   );

client/src/LandingPages/LoginPage/LoginPage.scss

@@ -0,0 +1,157 @@
+.login-page {
+  $deep-red: #962828;
+  min-height: 100vh;
+
+  &__forgot,
+  &__signup-link {
+    color: black;
+    font-size: 14px;
+    margin-bottom: 0rem;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  &__form-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+  &__container {
+    max-width: 400px;
+    width: 100%;
+    padding-bottom: 100px;
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    gap: 20px;
+    margin-top: 35px;
+  }
+
+  &__button {
+    margin-bottom: 20px;
+    width: 100%;
+    border-radius: 6px;
+    padding: 6px;
+
+    &--primary {
+      background-color: #086A6C;
+      color: white;
+      border: 1px solid #086A6C;
+
+      &:hover {
+        background-color: var(--dark-action);
+      }
+    }
+
+    &--google {
+      display: flex;
+      margin-top: 15px;
+      justify-content: center;
+      align-items: center;
+      color: #086A6C;
+      background-color: #E5F2F6;
+      font-weight: 600;
+      border: 1px solid #E5F2F6;
+
+      &:hover {
+        border: 1px solid var(--action);
+      }
+
+      .login-page__google-icon {
+        padding: 0 8px;
+      }
+    }
+  }
+
+  &__error-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 20px;
+    margin-top: -15px;
+
+    .login-page__error-symbol {
+      height: 17px;
+    }
+
+    .login-page__error-message {
+      color: $deep-red;
+      font-size: 14px;
+      text-align: center;
+      display: inline-block;
+
+      &--hidden {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+
+  &__header {
+    color: black;
+    font-size: 24px;
+  }
+
+  &__separator {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: black;
+
+    &::before,
+    &::after {
+      content: "";
+      flex: 1;
+      border-bottom: 1px solid rgb(136, 136, 136);
+    }
+
+    &__text {
+      font-size: 14px;
+      text-transform: uppercase;
+      padding: 0 10px;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .login-page {
+    &__input, &__button {
+      font-size: 14px;
+    }
+
+    &__header {
+      font-size: 21px;
+    }
+
+    &__form {
+      margin-top: 5px;
+    }
+
+    &__forgot, &__signup-link {
+      font-size: 13px;
+    }
+
+    &__error-container {
+      height: 15px;
+    }
+  }
+}
+
+@media (max-width: 320px) {
+  .login-page__error-container {
+    height: 40px;
+  }
+}