developed initial version of new login page

frontend/src/components/login/LoginStep.tsx

@@ -47,7 +47,10 @@ export default function LoginStep ({
             }
                         
             setIsLoading(true); 
-            const isLoginSuccessful = await attemptLogin(email, password);
+            const isLoginSuccessful = await attemptLogin({
+                email,
+                password,
+            });
             if (isLoginSuccessful && isLoginSuccessful.success) {
                 // case: login was successful
 

frontend/src/components/login/PasswordInputStep.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+
+import Button from '@app/components/basic/buttons/Button';
+import Error from '@app/components/basic/Error';
+import InputField from '@app/components/basic/InputField';
+import attemptLogin from '@app/components/utilities/attemptLogin';
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+
+import SecurityClient from '../utilities/SecurityClient';
+
+export default function PasswordInputStep({
+  userId,
+  email,
+  password,
+  setPassword,
+  setProviderAuthToken,
+  setStep
+}: {
+  email: string;
+  userId: string;
+  password: string;
+  setPassword: (password: string) => void;
+  setProviderAuthToken: (value: string) => void;
+  setStep: (step: number) => void;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [loginError, setLoginError] = useState(false);
+
+  const { t } = useTranslation();
+
+  const handleLogin = async () => {
+    try {
+      if (!userId || !password) {
+        return;
+      }
+
+      setIsLoading(true);
+      const isLoginSuccessful = await attemptLogin({
+        userId,
+        email,
+        password
+      });
+
+      if (isLoginSuccessful && isLoginSuccessful.success) {
+        // case: login was successful
+
+        if (isLoginSuccessful.mfaEnabled) {
+          // case: login requires MFA step
+          setStep(2);
+          setIsLoading(false);
+          return;
+        }
+
+        // case: login does not require MFA step
+        router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
+      }
+    } catch (err) {
+      setLoginError(true);
+    }
+
+    setIsLoading(false);
+  };
+
+  return (
+    <form onSubmit={(e) => e.preventDefault()}>
+      <div className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker py-4 px-6 pt-8 drop-shadow-xl">
+        <p className="mx-auto mb-6 flex w-max justify-center text-3xl font-semibold text-bunker-100">
+          {t('login:login')}
+        </p>
+        <div className="relative mt-6 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-2 md:max-h-28 md:p-2">
+          <InputField
+            label={t('common:password')}
+            onChangeHandler={setPassword}
+            type="password"
+            value={password}
+            placeholder=""
+            isRequired
+            autoComplete="current-password"
+            id="current-password"
+          />
+          <div className="absolute top-2 right-3 cursor-pointer text-sm text-primary-700 duration-200 hover:text-primary">
+            <Link href="/verify-email">
+              <button
+                type="button"
+                className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
+              >
+                {t('login:forgot-password')}
+              </button>
+            </Link>
+          </div>
+        </div>
+        {!isLoading && loginError && <Error text={t('login:error-login') ?? ''} />}
+        <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
+          <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
+            <Button
+              type="submit"
+              text={t('login:login') ?? ''}
+              onButtonPressed={async () => handleLogin()}
+              loading={isLoading}
+              size="lg"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 flex flex-row items-center justify-center md:pb-4">
+        <p className="flex w-max justify-center text-sm text-gray-400">{t('login:need-account')}</p>
+        <Link href="/signup">
+          <button
+            type="button"
+            className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
+          >
+            {t('login:create-account')}
+          </button>
+        </Link>
+      </div>
+
+      <div className="flex flex-row items-center justify-center">
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            SecurityClient.setProviderAuthToken('');
+            setProviderAuthToken('');
+          }}
+          type="button"
+          className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
+        >
+          Log in with other options.
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export const getStaticProps = getTranslatedStaticProps(['auth', 'login']);

frontend/src/components/utilities/attemptLogin.ts

@@ -26,20 +26,33 @@ interface IsLoginSuccessful {
  * @param {string} password - password of user to log in
  */
 const attemptLogin = async (
-  email: string,
-  password: string
+  {
+    email,
+    password,
+    userId,
+  }: {
+    email: string;
+    userId?: string;
+    password: string;
+  }
 ): Promise<IsLoginSuccessful> => {
+
+  const username = userId ?? email;
   const telemetry = new Telemetry().getInstance();
   return new Promise((resolve, reject) => {
     client.init(
       {
-        username: email,
+        username,
         password
       },
       async () => {
         try {
           const clientPublicKey = client.getPublicKey();
-          const { serverPublicKey, salt } = await login1(email, clientPublicKey);
+          const { serverPublicKey, salt } = await login1({
+            email,
+            clientPublicKey,
+            userId,
+          });
 
           client.setSalt(salt);
           client.setServerPublicKey(serverPublicKey);
@@ -57,8 +70,11 @@ const attemptLogin = async (
             iv, 
             tag 
           } = await login2(
-            email,
-            clientProof
+            {
+              email,
+              userId,
+              clientProof,
+            }
           );
           
           if (mfaEnabled) {
@@ -137,4 +153,4 @@ const attemptLogin = async (
   });
 };
 
-export default attemptLogin;
+export default attemptLogin;