feat: refactor authentication forms to use <form> elements for better submission handling

webapp/src/components/AuthViews.tsx

@@ -64,22 +64,29 @@ export default function AuthViews(props: AuthViewsProps) {
     return (
       <div className="auth-page">
         <StandalonePageFrame title={t('txt_unlock_vault')}>
-          <p className="muted standalone-muted">{props.emailForLock}</p>
-          <PasswordField
-            label={t('txt_master_password')}
-            value={props.unlockPassword}
-            autoFocus
-            onInput={props.onChangeUnlock}
-          />
-          <button type="button" className="btn btn-primary full" onClick={props.onSubmitUnlock}>
-            <Unlock size={16} className="btn-icon" />
-            {t('txt_unlock')}
-          </button>
-          <div className="or">{t('txt_or')}</div>
-          <button type="button" className="btn btn-secondary full" onClick={props.onLogout}>
-            <LogOut size={16} className="btn-icon" />
-            {t('txt_log_out')}
-          </button>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              props.onSubmitUnlock();
+            }}
+          >
+            <p className="muted standalone-muted">{props.emailForLock}</p>
+            <PasswordField
+              label={t('txt_master_password')}
+              value={props.unlockPassword}
+              autoFocus
+              onInput={props.onChangeUnlock}
+            />
+            <button type="submit" className="btn btn-primary full">
+              <Unlock size={16} className="btn-icon" />
+              {t('txt_unlock')}
+            </button>
+            <div className="or">{t('txt_or')}</div>
+            <button type="button" className="btn btn-secondary full" onClick={props.onLogout}>
+              <LogOut size={16} className="btn-icon" />
+              {t('txt_log_out')}
+            </button>
+          </form>
         </StandalonePageFrame>
       </div>
     );
@@ -89,56 +96,63 @@ export default function AuthViews(props: AuthViewsProps) {
     return (
       <div className="auth-page">
         <StandalonePageFrame title={t('txt_create_account')}>
-          <label className="field">
-            <span>{t('txt_name')}</span>
-            <input
-              className="input"
-              value={props.registerValues.name}
-              onInput={(e) =>
-                props.onChangeRegister({ ...props.registerValues, name: (e.currentTarget as HTMLInputElement).value })
-              }
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              props.onSubmitRegister();
+            }}
+          >
+            <label className="field">
+              <span>{t('txt_name')}</span>
+              <input
+                className="input"
+                value={props.registerValues.name}
+                onInput={(e) =>
+                  props.onChangeRegister({ ...props.registerValues, name: (e.currentTarget as HTMLInputElement).value })
+                }
+              />
+            </label>
+            <label className="field">
+              <span>{t('txt_email')}</span>
+              <input
+                className="input"
+                type="email"
+                value={props.registerValues.email}
+                onInput={(e) =>
+                  props.onChangeRegister({ ...props.registerValues, email: (e.currentTarget as HTMLInputElement).value })
+                }
+              />
+            </label>
+            <PasswordField
+              label={t('txt_master_password')}
+              value={props.registerValues.password}
+              onInput={(v) => props.onChangeRegister({ ...props.registerValues, password: v })}
             />
-          </label>
-          <label className="field">
-            <span>{t('txt_email')}</span>
-            <input
-              className="input"
-              type="email"
-              value={props.registerValues.email}
-              onInput={(e) =>
-                props.onChangeRegister({ ...props.registerValues, email: (e.currentTarget as HTMLInputElement).value })
-              }
+            <PasswordField
+              label={t('txt_confirm_master_password')}
+              value={props.registerValues.password2}
+              onInput={(v) => props.onChangeRegister({ ...props.registerValues, password2: v })}
             />
-          </label>
-          <PasswordField
-            label={t('txt_master_password')}
-            value={props.registerValues.password}
-            onInput={(v) => props.onChangeRegister({ ...props.registerValues, password: v })}
-          />
-          <PasswordField
-            label={t('txt_confirm_master_password')}
-            value={props.registerValues.password2}
-            onInput={(v) => props.onChangeRegister({ ...props.registerValues, password2: v })}
-          />
-          <label className="field">
-            <span>{t('txt_invite_code_optional')}</span>
-            <input
-              className="input"
-              value={props.registerValues.inviteCode}
-              onInput={(e) =>
-                props.onChangeRegister({ ...props.registerValues, inviteCode: (e.currentTarget as HTMLInputElement).value })
-              }
-            />
-          </label>
-          <button type="button" className="btn btn-primary full" onClick={props.onSubmitRegister}>
-            <UserPlus size={16} className="btn-icon" />
-            {t('txt_create_account')}
-          </button>
-          <div className="or">{t('txt_or')}</div>
-          <button type="button" className="btn btn-secondary full" onClick={props.onGotoLogin}>
-            <ArrowLeft size={16} className="btn-icon" />
-            {t('txt_back_to_login')}
-          </button>
+            <label className="field">
+              <span>{t('txt_invite_code_optional')}</span>
+              <input
+                className="input"
+                value={props.registerValues.inviteCode}
+                onInput={(e) =>
+                  props.onChangeRegister({ ...props.registerValues, inviteCode: (e.currentTarget as HTMLInputElement).value })
+                }
+              />
+            </label>
+            <button type="submit" className="btn btn-primary full">
+              <UserPlus size={16} className="btn-icon" />
+              {t('txt_create_account')}
+            </button>
+            <div className="or">{t('txt_or')}</div>
+            <button type="button" className="btn btn-secondary full" onClick={props.onGotoLogin}>
+              <ArrowLeft size={16} className="btn-icon" />
+              {t('txt_back_to_login')}
+            </button>
+          </form>
         </StandalonePageFrame>
       </div>
     );
@@ -147,30 +161,37 @@ export default function AuthViews(props: AuthViewsProps) {
   return (
     <div className="auth-page">
       <StandalonePageFrame title={t('txt_log_in')}>
-        <label className="field">
-          <span>{t('txt_email')}</span>
-          <input
-            className="input"
-            type="email"
-            value={props.loginValues.email}
-            onInput={(e) => props.onChangeLogin({ ...props.loginValues, email: (e.currentTarget as HTMLInputElement).value })}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            props.onSubmitLogin();
+          }}
+        >
+          <label className="field">
+            <span>{t('txt_email')}</span>
+            <input
+              className="input"
+              type="email"
+              value={props.loginValues.email}
+              onInput={(e) => props.onChangeLogin({ ...props.loginValues, email: (e.currentTarget as HTMLInputElement).value })}
+            />
+          </label>
+          <PasswordField
+            label={t('txt_master_password')}
+            value={props.loginValues.password}
+            onInput={(v) => props.onChangeLogin({ ...props.loginValues, password: v })}
+            autoFocus
           />
-        </label>
-        <PasswordField
-          label={t('txt_master_password')}
-          value={props.loginValues.password}
-          onInput={(v) => props.onChangeLogin({ ...props.loginValues, password: v })}
-          autoFocus
-        />
-        <button type="button" className="btn btn-primary full" onClick={props.onSubmitLogin}>
-          <LogIn size={16} className="btn-icon" />
-          {t('txt_log_in')}
-        </button>
-        <div className="or">{t('txt_or')}</div>
-        <button type="button" className="btn btn-secondary full" onClick={props.onGotoRegister}>
-          <UserPlus size={16} className="btn-icon" />
-          {t('txt_create_account')}
-        </button>
+          <button type="submit" className="btn btn-primary full">
+            <LogIn size={16} className="btn-icon" />
+            {t('txt_log_in')}
+          </button>
+          <div className="or">{t('txt_or')}</div>
+          <button type="button" className="btn btn-secondary full" onClick={props.onGotoRegister}>
+            <UserPlus size={16} className="btn-icon" />
+            {t('txt_create_account')}
+          </button>
+        </form>
       </StandalonePageFrame>
     </div>
   );