diff --git a/frontend/src/Forms/SamfForm.tsx b/frontend/src/Forms/SamfForm.tsx index a12589078..dbc8a93c2 100644 --- a/frontend/src/Forms/SamfForm.tsx +++ b/frontend/src/Forms/SamfForm.tsx @@ -99,6 +99,7 @@ type SamfFormProps = { onSubmit?(data: Partial): void; children: ReactNode; devMode?: boolean; // Dev/debug mode. + isDisabled?: boolean; // If true, disables submit button }; export function SamfForm({ @@ -113,6 +114,7 @@ export function SamfForm({ onSubmit, children, devMode = false, + isDisabled = false, }: SamfFormProps) { // Initial state and reducer (a custom state manager) const initialFormState: SamfFormState> = { @@ -198,7 +200,7 @@ export function SamfForm({ ); // 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 index 816a9d484..1a9948879 100644 --- 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 index ba9bd9ec4..576b77e13 100644 --- 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,13 +27,13 @@ export function LoginPage() { }, [user, from, navigate]); function handleLogin(formData: Record) { + 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); @@ -40,30 +41,22 @@ export function LoginPage() { }) .catch((error) => { setLoginFailed(true); - toast.error(t(KEY.common_something_went_wrong)); console.error(error); + }) + .finally(() => { + setSubmitting(false); }); } return (
- {loginFailed && ( - { - setLoginFailed(false); - }} - > - )}
- +

{t(KEY.loginpage_internal_login)}

+ {loginFailed &&

{t(KEY.loginpage_login_failed)}

}
{t(KEY.loginpage_register)} diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts index 7c29dc67c..5664d32ec 100644 --- 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 index bdc1c0839..37ae53eee 100644 --- a/frontend/src/i18n/translations.ts +++ b/frontend/src/i18n/translations.ts @@ -114,6 +114,7 @@ export const nb: Record = { // 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 = { [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]: