From 588408ff96d33754aaf9be14b040cebe9edd9f65 Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Sun, 15 Mar 2026 18:26:36 +0800
Subject: [PATCH] feat: refactor authentication forms to use <form> elements
 for better submission handling

---
 webapp/src/components/AuthViews.tsx           | 195 ++++++++++--------
 webapp/src/components/ConfirmDialog.tsx       |  13 +-
 webapp/src/components/PublicSendPage.tsx      |  11 +-
 .../src/components/RecoverTwoFactorPage.tsx   |  87 ++++----
 4 files changed, 172 insertions(+), 134 deletions(-)

diff --git a/webapp/src/components/AuthViews.tsx b/webapp/src/components/AuthViews.tsx
index 61259ea..40e6787 100644
--- a/webapp/src/components/AuthViews.tsx
+++ b/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>
   );
diff --git a/webapp/src/components/ConfirmDialog.tsx b/webapp/src/components/ConfirmDialog.tsx
index 8743570..81b8f0b 100644
--- a/webapp/src/components/ConfirmDialog.tsx
+++ b/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>
   );
 }
diff --git a/webapp/src/components/PublicSendPage.tsx b/webapp/src/components/PublicSendPage.tsx
index b769be4..23dc459 100644
--- a/webapp/src/components/PublicSendPage.tsx
+++ b/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 && (
diff --git a/webapp/src/components/RecoverTwoFactorPage.tsx b/webapp/src/components/RecoverTwoFactorPage.tsx
index e91c79d..b76e7ff 100644
--- a/webapp/src/components/RecoverTwoFactorPage.tsx
+++ b/webapp/src/components/RecoverTwoFactorPage.tsx
@@ -16,52 +16,59 @@ export default function RecoverTwoFactorPage(props: RecoverTwoFactorPageProps) {
   return (
     <div className="auth-page">
       <StandalonePageFrame title={t('txt_recover_two_step_login')}>
-        <p className="muted standalone-muted">{t('txt_use_your_one_time_recovery_code_to_disable_two_step_verification')}</p>
+        <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">
-          <span>{t('txt_email')}</span>
-          <input
-            className="input"
-            type="email"
-            value={props.values.email}
-            onInput={(e) => props.onChange({ ...props.values, email: (e.currentTarget as HTMLInputElement).value })}
-          />
-        </label>
-
-        <label className="field">
-          <span>{t('txt_master_password')}</span>
-          <div className="password-wrap">
+          <label className="field">
+            <span>{t('txt_email')}</span>
             <input
               className="input"
-              type={showPassword ? 'text' : 'password'}
-              value={props.values.password}
-              onInput={(e) => props.onChange({ ...props.values, password: (e.currentTarget as HTMLInputElement).value })}
+              type="email"
+              value={props.values.email}
+              onInput={(e) => props.onChange({ ...props.values, email: (e.currentTarget as HTMLInputElement).value })}
             />
-            <button type="button" className="eye-btn" onClick={() => setShowPassword((v) => !v)}>
-              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+          </label>
+
+          <label className="field">
+            <span>{t('txt_master_password')}</span>
+            <div className="password-wrap">
+              <input
+                className="input"
+                type={showPassword ? 'text' : 'password'}
+                value={props.values.password}
+                onInput={(e) => props.onChange({ ...props.values, password: (e.currentTarget as HTMLInputElement).value })}
+              />
+              <button type="button" className="eye-btn" onClick={() => setShowPassword((v) => !v)}>
+                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            </div>
+          </label>
+
+          <label className="field">
+            <span>{t('txt_recovery_code')}</span>
+            <input
+              className="input"
+              value={props.values.recoveryCode}
+              onInput={(e) => props.onChange({ ...props.values, recoveryCode: (e.currentTarget as HTMLInputElement).value.toUpperCase() })}
+            />
+          </label>
+
+          <div className="field-grid">
+            <button type="submit" className="btn btn-primary">
+              <Send size={14} className="btn-icon" />
+              {t('txt_submit')}
+            </button>
+            <button type="button" className="btn btn-secondary" onClick={props.onCancel}>
+              <X size={14} className="btn-icon" />
+              {t('txt_cancel')}
             </button>
           </div>
-        </label>
-
-        <label className="field">
-          <span>{t('txt_recovery_code')}</span>
-          <input
-            className="input"
-            value={props.values.recoveryCode}
-            onInput={(e) => props.onChange({ ...props.values, recoveryCode: (e.currentTarget as HTMLInputElement).value.toUpperCase() })}
-          />
-        </label>
-
-        <div className="field-grid">
-          <button type="button" className="btn btn-primary" onClick={props.onSubmit}>
-            <Send size={14} className="btn-icon" />
-            {t('txt_submit')}
-          </button>
-          <button type="button" className="btn btn-secondary" onClick={props.onCancel}>
-            <X size={14} className="btn-icon" />
-            {t('txt_cancel')}
-          </button>
-        </div>
+        </form>
       </StandalonePageFrame>
     </div>
   );