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

webapp/src/components/AuthViews.tsx

@@ -64,6 +64,12 @@ export default function AuthViews(props: AuthViewsProps) {
     return (
       <div className="auth-page">
         <StandalonePageFrame title={t('txt_unlock_vault')}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              props.onSubmitUnlock();
+            }}
+          >
             <p className="muted standalone-muted">{props.emailForLock}</p>
             <PasswordField
               label={t('txt_master_password')}
@@ -71,7 +77,7 @@ export default function AuthViews(props: AuthViewsProps) {
               autoFocus
               onInput={props.onChangeUnlock}
             />
-          <button type="button" className="btn btn-primary full" onClick={props.onSubmitUnlock}>
+            <button type="submit" className="btn btn-primary full">
               <Unlock size={16} className="btn-icon" />
               {t('txt_unlock')}
             </button>
@@ -80,6 +86,7 @@ export default function AuthViews(props: AuthViewsProps) {
               <LogOut size={16} className="btn-icon" />
               {t('txt_log_out')}
             </button>
+          </form>
         </StandalonePageFrame>
       </div>
     );
@@ -89,6 +96,12 @@ export default function AuthViews(props: AuthViewsProps) {
     return (
       <div className="auth-page">
         <StandalonePageFrame title={t('txt_create_account')}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              props.onSubmitRegister();
+            }}
+          >
             <label className="field">
               <span>{t('txt_name')}</span>
               <input
@@ -130,7 +143,7 @@ export default function AuthViews(props: AuthViewsProps) {
                 }
               />
             </label>
-          <button type="button" className="btn btn-primary full" onClick={props.onSubmitRegister}>
+            <button type="submit" className="btn btn-primary full">
               <UserPlus size={16} className="btn-icon" />
               {t('txt_create_account')}
             </button>
@@ -139,6 +152,7 @@ export default function AuthViews(props: AuthViewsProps) {
               <ArrowLeft size={16} className="btn-icon" />
               {t('txt_back_to_login')}
             </button>
+          </form>
         </StandalonePageFrame>
       </div>
     );
@@ -147,6 +161,12 @@ export default function AuthViews(props: AuthViewsProps) {
   return (
     <div className="auth-page">
       <StandalonePageFrame title={t('txt_log_in')}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            props.onSubmitLogin();
+          }}
+        >
           <label className="field">
             <span>{t('txt_email')}</span>
             <input
@@ -162,7 +182,7 @@ export default function AuthViews(props: AuthViewsProps) {
             onInput={(v) => props.onChangeLogin({ ...props.loginValues, password: v })}
             autoFocus
           />
-        <button type="button" className="btn btn-primary full" onClick={props.onSubmitLogin}>
+          <button type="submit" className="btn btn-primary full">
             <LogIn size={16} className="btn-icon" />
             {t('txt_log_in')}
           </button>
@@ -171,6 +191,7 @@ export default function AuthViews(props: AuthViewsProps) {
             <UserPlus size={16} className="btn-icon" />
             {t('txt_create_account')}
           </button>
+        </form>
       </StandalonePageFrame>
     </div>
   );

webapp/src/components/ConfirmDialog.tsx

@@ -20,14 +20,19 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
   if (!props.open) return null;
   return (
     <div className="dialog-mask">
-      <div className="dialog-card">
+      <form
+        className="dialog-card"
+        onSubmit={(e) => {
+          e.preventDefault();
+          props.onConfirm();
+        }}
+      >
         <h3 className="dialog-title">{props.title}</h3>
         <div className="dialog-message">{props.message}</div>
         {props.children}
         <button
-          type="button"
+          type="submit"
           className={`btn ${props.danger ? 'btn-danger' : 'btn-primary'} dialog-btn`}
-          onClick={props.onConfirm}
         >
           <Check size={14} className="btn-icon" />
           {props.confirmText || t('txt_yes')}
@@ -37,7 +42,7 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
           {props.cancelText || t('txt_no')}
         </button>
         {props.afterActions}
-      </div>
+      </form>
     </div>
   );
 }

webapp/src/components/PublicSendPage.tsx

@@ -92,7 +92,12 @@ export default function PublicSendPage(props: PublicSendPageProps) {
         {loading && <p className="muted">{t('txt_loading')}</p>}
 
         {!loading && needPassword && (
-          <>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              void loadSend(password);
+            }}
+          >
             <label className="field">
               <span>{t('txt_password')}</span>
               <div className="password-wrap">
@@ -104,10 +109,10 @@ export default function PublicSendPage(props: PublicSendPageProps) {
                 />
               </div>
             </label>
-            <button type="button" className="btn btn-primary full" disabled={busy} onClick={() => void loadSend(password)}>
+            <button type="submit" className="btn btn-primary full" disabled={busy}>
               <Lock size={14} className="btn-icon" /> {t('txt_unlock_send')}
             </button>
-          </>
+          </form>
         )}
 
         {!loading && sendData && (

webapp/src/components/RecoverTwoFactorPage.tsx

@@ -16,6 +16,12 @@ export default function RecoverTwoFactorPage(props: RecoverTwoFactorPageProps) {
   return (
     <div className="auth-page">
       <StandalonePageFrame title={t('txt_recover_two_step_login')}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            props.onSubmit();
+          }}
+        >
           <p className="muted standalone-muted">{t('txt_use_your_one_time_recovery_code_to_disable_two_step_verification')}</p>
 
           <label className="field">
@@ -53,7 +59,7 @@ export default function RecoverTwoFactorPage(props: RecoverTwoFactorPageProps) {
           </label>
 
           <div className="field-grid">
-          <button type="button" className="btn btn-primary" onClick={props.onSubmit}>
+            <button type="submit" className="btn btn-primary">
               <Send size={14} className="btn-icon" />
               {t('txt_submit')}
             </button>
@@ -62,6 +68,7 @@ export default function RecoverTwoFactorPage(props: RecoverTwoFactorPageProps) {
               {t('txt_cancel')}
             </button>
           </div>
+        </form>
       </StandalonePageFrame>
     </div>
   );