Changed login failed response (#719)

Samfundet · Oct 12, 2023 · 8e6a144 · 8e6a144
1 parent 8a23bf0
commit 8e6a144
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/frontend/src/Forms/SamfForm.tsx b/frontend/src/Forms/SamfForm.tsx
@@ -99,6 +99,7 @@ type SamfFormProps<T> = {
   onSubmit?(data: Partial<T>): void;
   children: ReactNode;
   devMode?: boolean; // Dev/debug mode.
+  isDisabled?: boolean; // If true, disables submit button
 };
 
 export function SamfForm<T>({
@@ -113,6 +114,7 @@ export function SamfForm<T>({
   onSubmit,
   children,
   devMode = false,
+  isDisabled = false,
 }: SamfFormProps<T>) {
   // Initial state and reducer (a custom state manager)
   const initialFormState: SamfFormState<Partial<T>> = {
@@ -198,7 +200,7 @@ export function SamfForm<T>({
   );
 
   // Disable submit button when validating on change
-  const disableSubmit = validateOn === 'change' && !allValid;
+  const disableSubmit = isDisabled || (validateOn === 'change' && !allValid);
 
   const formClass = noStyle ? className : classNames(styles.samf_form, animateError && styles.animate_error, className);
 

diff --git a/frontend/src/Pages/LoginPage/LoginPage.module.scss b/frontend/src/Pages/LoginPage/LoginPage.module.scss
@@ -49,3 +49,11 @@
     text-decoration: underline;
   }
 }
+
+.login_failed_comment {
+  color: $red;
+  text-align: center;
+  margin-top: 0.6em;
+  font-size: 0.9em;
+  font-weight: 700;
+}
diff --git a/frontend/src/Pages/LoginPage/LoginPage.tsx b/frontend/src/Pages/LoginPage/LoginPage.tsx
@@ -16,6 +16,7 @@ import styles from './LoginPage.module.scss';
 export function LoginPage() {
   const { t } = useTranslation();
   const [loginFailed, setLoginFailed] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
   const location = useLocation();
   const { from } = location.state || {};
   const { user, setUser } = useAuthContext();
@@ -26,44 +27,36 @@ export function LoginPage() {
   }, [user, from, navigate]);
 
   function handleLogin(formData: Record<string, string>) {
+    setSubmitting(true);
     login(formData['name'], formData['password'])
       .then((status) => {
         if (status === STATUS.HTTP_202_ACCEPTED) {
           getUser().then((user) => {
             setUser(user);
           });
-
           navigate(typeof from === 'undefined' ? ROUTES.frontend.home : from.pathname);
         } else {
           setLoginFailed(true);
         }
       })
       .catch((error) => {
         setLoginFailed(true);
-        toast.error(t(KEY.common_something_went_wrong));
         console.error(error);
+      })
+      .finally(() => {
+        setSubmitting(false);
       });
   }
 
   return (
     <Page>
       <div className={styles.login_container}>
-        {loginFailed && (
-          <Alert
-            message="Login failed"
-            type="error"
-            align="center"
-            closable={true}
-            onClose={() => {
-              setLoginFailed(false);
-            }}
-          ></Alert>
-        )}
         <div className={styles.content_container}>
-          <SamfForm onSubmit={handleLogin} submitText={t(KEY.common_login) ?? ''}>
+          <SamfForm onSubmit={handleLogin} isDisabled={submitting} submitText={t(KEY.common_login) ?? ''}>
             <h1 className={styles.header_text}>{t(KEY.loginpage_internal_login)}</h1>
             <SamfFormField field="name" type="text" label={t(KEY.loginpage_email_placeholder) ?? ''} />
             <SamfFormField field="password" type="password" label={t(KEY.common_password) ?? ''} />
+            {loginFailed && <p className={styles.login_failed_comment}>{t(KEY.loginpage_login_failed)}</p>}
           </SamfForm>
           <Link to={ROUTES.frontend.signup} className={styles.link}>
             {t(KEY.loginpage_register)}

diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts
@@ -128,6 +128,7 @@ export const KEY = {
   loginpage_internal_login: 'loginpage_internal_login',
   loginpage_email_placeholder: 'loginpage_email_placeholder',
   loginpage_forgotten_password: 'loginpage_forgotten_password',
+  loginpage_login_failed: 'loginpage_login_failed',
 
   // GroupsPage:
   groupspage_gangs_text: 'groupspage_gangs_text',

diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts
@@ -114,6 +114,7 @@ export const nb: Record<KeyValues, string> = {
 
   // LoginPage:
   [KEY.loginpage_register]: 'Lag bruker',
+  [KEY.loginpage_login_failed]: 'Innlogging feilet',
   [KEY.loginpage_internal_login]: 'Logg inn som intern',
   [KEY.loginpage_email_placeholder]: 'E-post eller medlemsnummer',
   [KEY.loginpage_forgotten_password]: 'Glemt passordet ditt?',
@@ -340,6 +341,7 @@ export const en: Record<KeyValues, string> = {
   [KEY.loginpage_internal_login]: 'Log in as internal',
   [KEY.loginpage_email_placeholder]: 'Email or membership ID',
   [KEY.loginpage_forgotten_password]: 'Forgot password?',
+  [KEY.loginpage_login_failed]: 'Login failed',
 
   // GroupsPage:
   [KEY.groupspage_gangs_text]: