Merge pull request #25 from hotosm/feat/login-design-fixes

login design and flow fixes
hotosm · Jul 5, 2024 · dbf1e82 · dbf1e82
2 parents 24a45aa + 834eb7e
commit dbf1e82
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 16 deletions.
diff --git a/src/frontend/public/favicon.ico b/src/frontend/public/favicon.ico
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
@@ -47,7 +47,7 @@ export default function App() {
   };
 
   // add routes where you dont want navigation bar
-  const routesWithoutNavbar = ['/login', '/'];
+  const routesWithoutNavbar = ['/', '/login', '/forgot-password'];
 
   return (
     <>

diff --git a/src/frontend/src/assets/images/DTM-logo-white.svg b/src/frontend/src/assets/images/DTM-logo-white.svg
diff --git a/src/frontend/src/components/LandingPage/Home/index.tsx b/src/frontend/src/components/LandingPage/Home/index.tsx
@@ -3,7 +3,7 @@ import { FlexColumn } from '@Components/common/Layouts';
 import Image from '@Components/RadixComponents/Image';
 import { Button } from '@Components/RadixComponents/Button';
 import { motion } from 'framer-motion';
-import droneTaskingManagerLogo from '@Assets/images/LandingPage/DTM-logo-red.svg';
+import droneTaskingManagerLogo from '@Assets/images/DTM-logo-white.svg';
 import droneBackgroundImage from '@Assets/images/LandingPage/DroneTM-bg.png';
 import arrowSouth from '@Assets/images/LandingPage/arrow_south.svg';
 import { setCommonState } from '@Store/actions/common';

diff --git a/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx b/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx
@@ -1,9 +1,10 @@
 import { useTypedDispatch } from '@Store/hooks';
+import useAuth from '@Hooks/useAuth';
 import { useNavigate } from 'react-router-dom';
 import { FlexColumn, FlexRow } from '@Components/common/Layouts';
 import { Button } from '@Components/RadixComponents/Button';
 import Image from '@Components/RadixComponents/Image';
-import droneTMLogo from '@Assets/images/LandingPage/dtm-logo-red.svg';
+import droneTMLogo from '@Assets/images/LandingPage/DTM-logo-red.svg';
 import projectCreator from '@Assets/images/LandingPage/project-creator.svg';
 import droneOperator from '@Assets/images/LandingPage/drone-operator.svg';
 import Icon from '@Components/common/Icon';
@@ -14,6 +15,7 @@ import { slideVariants } from '@Constants/animations';
 export default function SignInOverlay() {
   const dispatch = useTypedDispatch();
   const navigate = useNavigate();
+  const { isAuthenticated } = useAuth();
 
   return (
     <motion.section
@@ -45,7 +47,11 @@ export default function SignInOverlay() {
             rightIcon="east"
             onClick={() => {
               dispatch(setCommonState({ signInAs: 'Project Creator' }));
-              navigate('/login');
+              if (isAuthenticated()) {
+                navigate('/projects');
+              } else {
+                navigate('/login');
+              }
             }}
           >
             I&apos;m a Project Creator
@@ -62,7 +68,11 @@ export default function SignInOverlay() {
             rightIcon="east"
             onClick={() => {
               dispatch(setCommonState({ signInAs: 'Drone Operator' }));
-              navigate('/login');
+              if (isAuthenticated()) {
+                navigate('/projects');
+              } else {
+                navigate('/login');
+              }
             }}
           >
             I&apos;m a Drone Operator

diff --git a/src/frontend/src/components/common/Navbar/index.tsx b/src/frontend/src/components/common/Navbar/index.tsx
@@ -1,6 +1,6 @@
 import Image from '@Components/RadixComponents/Image';
 import { NavLink } from 'react-router-dom';
-import dtmLogo from '@Assets/images/dtm-logo.svg';
+import dtmLogo from '@Assets/images/LandingPage/DTM-logo-red.svg';
 import { navLinks } from '@Constants/index';
 import UserProfile from '../UserProfile';
 import { FlexRow } from '../Layouts';
@@ -10,7 +10,11 @@ export default function Navbar() {
   return (
     <nav className="naxatw-border-b naxatw-border-grey-300 naxatw-pb-2 naxatw-pt-4">
       <FlexRow className="naxatw-items-center naxatw-justify-between naxatw-px-16">
-        <Image src={dtmLogo} alt="DTM-logo" />
+        <Image
+          src={dtmLogo}
+          alt="DTM-logo"
+          className="naxatw-h-8 naxatw-w-40"
+        />
         <FlexRow className="naxatw-gap-4">
           {navLinks.map(({ id, link, linkName }) => (
             <NavLink

diff --git a/...ntend/src/modules/user-auth-module/src/components/Authentication/ForgotPassword/index.tsx b/...ntend/src/modules/user-auth-module/src/components/Authentication/ForgotPassword/index.tsx
@@ -76,11 +76,14 @@ export default function ForgotPassword() {
         </FormControl>
 
         <FlexRow className="naxatw-items-center naxatw-justify-between">
-          <Button type="submit">Reset Password</Button>
+          <Button type="submit" className="naxatw-bg-red">
+            Reset Password
+          </Button>
 
           <Button
             variant="ghost"
-            className="naxatw-text-primary-500"
+            leftIcon="west"
+            className="naxatw-text-red"
             onClick={() => {
               navigate('/login');
             }}

diff --git a/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx b/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx
@@ -72,24 +72,35 @@ export default function Login() {
         className="naxatw-h-screen naxatw-w-full naxatw-flex-col naxatw-items-center naxatw-justify-center"
       >
         <Image src={Person} />
-        <h3>Sign In - {signInAs}</h3>
+        <h3>{signInAs}</h3>
 
         {/* google login button */}
         <div
           className="naxatw-flex naxatw-w-[60%] naxatw-cursor-pointer naxatw-items-center naxatw-justify-center naxatw-gap-2 naxatw-rounded-lg naxatw-border naxatw-border-grey-800 naxatw-px-5 naxatw-py-3 hover:naxatw-shadow-md"
           onClick={() => setOnSignUpBtnClick(true)}
         >
           <Image src={googleIcon} />
-          <span className="naxatw-text-body-btn">Sign in with Google</span>
+          <span className="naxatw-text-body-btn">Continue with Google</span>
         </div>
         {/* google login button */}
 
+        <FlexRow
+          className="naxatw-w-full naxatw-items-center naxatw-justify-center"
+          gap={3}
+        >
+          <hr className="naxatw-w-[26%]" />
+          <span>or</span>
+          <hr className="naxatw-w-[26%]" />
+        </FlexRow>
+
         <form
           onSubmit={handleSubmit(onSubmit)}
-          className="naxatw-flex naxatw-w-[60%] naxatw-flex-col naxatw-gap-5 naxatw-pt-7"
+          className="naxatw-flex naxatw-w-[60%] naxatw-flex-col naxatw-gap-5"
         >
           <FormControl>
-            <Label htmlFor="username">Username</Label>
+            <Label htmlFor="username" required>
+              Email
+            </Label>
             <Input
               id="username"
               type="text"
@@ -100,7 +111,9 @@ export default function Login() {
           </FormControl>
 
           <FormControl className="naxatw-relative">
-            <Label htmlFor="password">Password</Label>
+            <Label htmlFor="password" required>
+              Password
+            </Label>
             <Input
               id="password"
               placeholder="*******"
@@ -110,7 +123,7 @@ export default function Login() {
             />
             <Icon
               name={showPassword ? 'visibility' : 'visibility_off'}
-              className="naxatw-absolute naxatw-right-2 naxatw-top-1/2 naxatw-cursor-pointer naxatw-text-sm naxatw-text-grey-600"
+              className="naxatw-absolute naxatw-right-2 naxatw-top-[55%] naxatw-cursor-pointer naxatw-text-sm naxatw-text-grey-600"
               onClick={() => handleShow()}
             />
           </FormControl>
@@ -131,7 +144,6 @@ export default function Login() {
               Forgot Your Password?
             </Button>
           </FlexRow>
-
           <Button
             className="!naxatw-bg-red naxatw-py-5"
             type="submit"
@@ -140,6 +152,14 @@ export default function Login() {
           >
             Log In
           </Button>
+          <Button
+            leftIcon="west"
+            variant="ghost"
+            className="naxatw-py-5 !naxatw-text-red"
+            onClick={() => navigate('/')}
+          >
+            Back
+          </Button>
         </form>
       </Flex>
     </>