frontend/src/pages/login.tsx

@@ -191,9 +191,42 @@ export default function Login() {
           <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
             <CardBox id='loginRoles' className='w-full md:w-3/5 lg:w-2/3'>
               <Link href={'/home'}>
-                <h2 className='text-4xl font-semibold my-4 text-center'>Welcome!</h2>
+                <h2 className='text-4xl font-semibold my-4'> test3</h2>
               </Link>
 
+              <div className='flex flex-row text-gray-500 justify-between'>
+                <div>
+                  <p className='mb-2'>
+                    Use{' '}
+                    <code
+                      className={`cursor-pointer ${textColor} `}
+                      onClick={(e) => setLogin(e.target)}
+                    >
+                      admin@flatlogic.com
+                    </code>{' '}
+                    to login as Admin
+                  </p>
+                  <p>
+                    Use{' '}
+                    <code
+                      className={`cursor-pointer ${textColor} `}
+                      onClick={(e) => setLogin(e.target)}
+                    >
+                      client@hello.com
+                    </code>{' '}
+                    to login as User
+                  </p>
+                </div>
+                <div>
+                  <BaseIcon
+                    className={`${iconsColor}`}
+                    w='w-16'
+                    h='h-16'
+                    size={48}
+                    path={mdiInformation}
+                  />
+                </div>
+              </div>
             </CardBox>
 
             <CardBox className='w-full md:w-3/5 lg:w-2/3'>
@@ -203,7 +236,26 @@ export default function Login() {
                 onSubmit={(values) => handleSubmit(values)}
               >
                 <Form>
+                  <FormField label='Login' help='Please enter your login'>
+                    <Field name='email' />
+                  </FormField>
 
+                  <FormField label='Password' help='Please enter your password'>
+                    <Field name='password' type='password' />
+                  </FormField>
+
+                  <div className={'flex justify-between'}>
+                    <FormCheckRadio type='checkbox' label='Remember'>
+                      <Field type='checkbox' name='remember' />
+                    </FormCheckRadio>
+
+                    <Link
+                      className={`${textColor} text-blue-600`}
+                      href={'/forgot'}
+                    >
+                      Forgot password?
+                    </Link>
+                  </div>
 
                   <BaseDivider />
 
@@ -217,6 +269,12 @@ export default function Login() {
                     />
                   </BaseButtons>
                   <br />
+                  <p className={'text-center'}>
+                    Don’t have account yet?{' '}
+                    <Link className={`${textColor}`} href={'/register'}>
+                      New Account
+                    </Link>
+                  </p>
                 </Form>
               </Formik>
             </CardBox>