From 6683d03a9e1294e0dd75db3c215da4099c15d217 Mon Sep 17 00:00:00 2001
From: Lewis <lu5a@proton.me>
Date: Wed, 18 Mar 2026 07:18:08 +0200
Subject: [PATCH] refactor(frontend): extract oauth secondary page styles

---
 frontend/src/routes/OAuth2FA.svelte         | 107 +----------
 frontend/src/routes/OAuthAccounts.svelte    |  88 ----------
 frontend/src/routes/OAuthDelegation.svelte  | 118 +------------
 frontend/src/routes/OAuthError.svelte       |  33 ----
 frontend/src/routes/OAuthPasskey.svelte     | 105 +----------
 frontend/src/routes/OAuthSsoRegister.svelte | 185 +-------------------
 frontend/src/routes/OAuthTotp.svelte        | 125 +------------
 7 files changed, 14 insertions(+), 747 deletions(-)

diff --git a/frontend/src/routes/OAuth2FA.svelte b/frontend/src/routes/OAuth2FA.svelte
index 2eaf565..cf753d1 100644
--- a/frontend/src/routes/OAuth2FA.svelte
+++ b/frontend/src/routes/OAuth2FA.svelte
@@ -84,7 +84,7 @@
   {/if}
 
   <form onsubmit={handleSubmit}>
-    <div class="field">
+    <div>
       <label for="code">{$_('oauth.twoFactorCode.codeLabel')}</label>
       <input
         id="code"
@@ -101,113 +101,12 @@
     </div>
 
     <div class="actions">
-      <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}>
+      <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}>
         {$_('common.cancel')}
       </button>
-      <button type="submit" class="submit-btn" disabled={submitting || code.trim().length !== 6}>
+      <button type="submit" disabled={submitting || code.trim().length !== 6}>
         {submitting ? $_('common.verifying') : $_('common.verify')}
       </button>
     </div>
   </form>
 </div>
-
-<style>
-  .oauth-2fa-container {
-    max-width: var(--width-sm);
-    margin: var(--space-9) auto;
-    padding: var(--space-7);
-  }
-
-  h1 {
-    margin: 0 0 var(--space-2) 0;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    margin: 0 0 var(--space-7) 0;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  label {
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-  }
-
-  input {
-    padding: var(--space-3);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xl);
-    letter-spacing: 0.5em;
-    text-align: center;
-    background: var(--bg-input);
-    color: var(--text-primary);
-  }
-
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
-  .error {
-    padding: var(--space-3);
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: var(--radius-md);
-    color: var(--error-text);
-    margin-bottom: var(--space-4);
-  }
-
-  .actions {
-    display: flex;
-    gap: var(--space-4);
-    margin-top: var(--space-2);
-  }
-
-  .actions button {
-    flex: 1;
-    padding: var(--space-3);
-    border: none;
-    border-radius: var(--radius-md);
-    font-size: var(--text-base);
-    cursor: pointer;
-    transition: background-color var(--transition-fast);
-  }
-
-  .actions button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .cancel-btn {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-  }
-
-  .cancel-btn:hover:not(:disabled) {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-  }
-
-  .submit-btn {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .submit-btn:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-</style>
diff --git a/frontend/src/routes/OAuthAccounts.svelte b/frontend/src/routes/OAuthAccounts.svelte
index 7903f0d..dbd46de 100644
--- a/frontend/src/routes/OAuthAccounts.svelte
+++ b/frontend/src/routes/OAuthAccounts.svelte
@@ -146,91 +146,3 @@
     </button>
   {/if}
 </div>
-
-<style>
-  .oauth-accounts-container {
-    max-width: var(--width-sm);
-    margin: var(--space-9) auto;
-    padding: var(--space-7);
-  }
-
-  h1 {
-    margin: 0 0 var(--space-6) 0;
-  }
-
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 200px;
-    color: var(--text-secondary);
-  }
-
-  .error-container {
-    text-align: center;
-  }
-
-  .error {
-    padding: var(--space-3);
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: var(--radius-md);
-    color: var(--error-text);
-    margin-bottom: var(--space-4);
-  }
-
-  .accounts-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    margin-bottom: var(--space-4);
-  }
-
-  .account-item {
-    display: flex;
-    align-items: center;
-    padding: var(--space-4);
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-xl);
-    cursor: pointer;
-    text-align: left;
-    width: 100%;
-    transition: border-color var(--transition-fast), background var(--transition-fast);
-  }
-
-  .account-item:hover:not(.disabled) {
-    border-color: var(--accent);
-    background: var(--bg-tertiary);
-  }
-
-  .account-item.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .account-info {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  .account-handle {
-    font-weight: var(--font-medium);
-    color: var(--text-primary);
-  }
-
-  .account-email {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .different-account {
-    margin-top: var(--space-4);
-    width: 100%;
-  }
-
-  .different-account {
-    margin-top: var(--space-4);
-  }
-</style>
diff --git a/frontend/src/routes/OAuthDelegation.svelte b/frontend/src/routes/OAuthDelegation.svelte
index c00e1f8..d14989d 100644
--- a/frontend/src/routes/OAuthDelegation.svelte
+++ b/frontend/src/routes/OAuthDelegation.svelte
@@ -158,7 +158,7 @@
     {/if}
 
     <form onsubmit={handleSubmit}>
-      <div class="field">
+      <div>
         <label for="controller-identifier">{$_('oauthDelegation.controllerHandle')}</label>
         <input
           id="controller-identifier"
@@ -172,125 +172,13 @@
       </div>
 
       <div class="actions">
-        <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}>
+        <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}>
           {$_('common.cancel')}
         </button>
-        <button type="submit" class="submit-btn" disabled={submitting || !controllerIdentifier.trim()}>
+        <button type="submit" disabled={submitting || !controllerIdentifier.trim()}>
           {submitting ? $_('oauthDelegation.checking') : $_('common.continue')}
         </button>
       </div>
     </form>
   {/if}
 </div>
-
-<style>
-  .delegation-container {
-    max-width: var(--width-md);
-    margin: var(--space-9) auto;
-    padding: var(--space-7);
-  }
-
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 200px;
-    color: var(--text-secondary);
-  }
-
-  .page-header {
-    margin-bottom: var(--space-6);
-  }
-
-  h1 {
-    margin: 0 0 var(--space-2) 0;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    margin: 0;
-    line-height: 1.6;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  label {
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-  }
-
-  input[type="text"] {
-    padding: var(--space-3);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    font-size: var(--text-base);
-    background: var(--bg-input);
-    color: var(--text-primary);
-  }
-
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
-  .error {
-    padding: var(--space-3);
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: var(--radius-md);
-    color: var(--error-text);
-    margin-bottom: var(--space-4);
-  }
-
-  .actions {
-    display: flex;
-    gap: var(--space-4);
-    margin-top: var(--space-2);
-  }
-
-  .actions button {
-    flex: 1;
-    padding: var(--space-3);
-    border: none;
-    border-radius: var(--radius-md);
-    font-size: var(--text-base);
-    cursor: pointer;
-    transition: background-color var(--transition-fast);
-  }
-
-  .actions button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .cancel-btn {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-  }
-
-  .cancel-btn:hover:not(:disabled) {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-  }
-
-  .submit-btn {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .submit-btn:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-</style>
diff --git a/frontend/src/routes/OAuthError.svelte b/frontend/src/routes/OAuthError.svelte
index 62757fb..8de29ef 100644
--- a/frontend/src/routes/OAuthError.svelte
+++ b/frontend/src/routes/OAuthError.svelte
@@ -48,36 +48,3 @@
     </button>
   </div>
 </div>
-
-<style>
-  h1 {
-    margin: 0 0 var(--space-6) 0;
-    color: var(--error-text);
-  }
-
-  .error-box {
-    padding: var(--space-6);
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: var(--radius-xl);
-    margin-bottom: var(--space-6);
-  }
-
-  .error-code {
-    font-family: var(--font-mono);
-    font-size: var(--text-base);
-    color: var(--error-text);
-    margin-bottom: var(--space-2);
-  }
-
-  .error-description {
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-  }
-
-  .actions {
-    display: flex;
-    gap: var(--space-3);
-    justify-content: center;
-  }
-</style>
diff --git a/frontend/src/routes/OAuthPasskey.svelte b/frontend/src/routes/OAuthPasskey.svelte
index e0e8f28..0895753 100644
--- a/frontend/src/routes/OAuthPasskey.svelte
+++ b/frontend/src/routes/OAuthPasskey.svelte
@@ -127,119 +127,18 @@
   <div class="passkey-status">
     {#if loading}
       <div class="loading-indicator">
-        <div class="spinner"></div>
         <p>{t('oauth.passkey.waiting')}</p>
       </div>
     {:else}
-      <button type="button" class="passkey-btn" onclick={startPasskeyAuth} disabled={loading}>
+      <button type="button" style="width: 100%" onclick={startPasskeyAuth} disabled={loading}>
         {t('oauth.passkey.title')}
       </button>
     {/if}
   </div>
 
   <div class="actions">
-    <button type="button" class="cancel-btn" onclick={handleCancel} disabled={loading}>
+    <button type="button" class="secondary" onclick={handleCancel} disabled={loading}>
       {t('common.cancel')}
     </button>
   </div>
 </div>
-
-<style>
-  .oauth-passkey-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
-    text-align: center;
-  }
-
-  h1 {
-    margin: 0 0 1.5rem 0;
-  }
-
-  .error {
-    padding: 0.75rem;
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: 4px;
-    color: var(--error-text);
-    margin-bottom: 1.5rem;
-    text-align: left;
-  }
-
-  .passkey-status {
-    padding: 2rem;
-    background: var(--bg-secondary);
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
-  }
-
-  .loading-indicator {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid var(--border-color);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  .loading-indicator p {
-    margin: 0;
-    color: var(--text-secondary);
-  }
-
-  .passkey-btn {
-    width: 100%;
-    padding: 1rem;
-    background: var(--accent);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.15s;
-  }
-
-  .passkey-btn:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-
-  .passkey-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .actions {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 1.5rem;
-  }
-
-  .cancel-btn {
-    padding: 0.75rem 2rem;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.15s;
-  }
-
-  .cancel-btn:hover:not(:disabled) {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-  }
-
-  .cancel-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-</style>
diff --git a/frontend/src/routes/OAuthSsoRegister.svelte b/frontend/src/routes/OAuthSsoRegister.svelte
index 418afbf..bce343c 100644
--- a/frontend/src/routes/OAuthSsoRegister.svelte
+++ b/frontend/src/routes/OAuthSsoRegister.svelte
@@ -292,10 +292,7 @@
 
 <div class="sso-register-container">
   {#if loading}
-    <div class="loading">
-      <div class="spinner"></div>
-      <p>{$_('common.loading')}</p>
-    </div>
+    <div class="loading"></div>
   {:else if error && !pending}
     <div class="error-container">
       <div class="error-icon">!</div>
@@ -324,7 +321,7 @@
     <div class="split-layout sidebar-right">
       <div class="form-section">
         <form onsubmit={handleSubmit}>
-          <div class="field">
+          <div>
             <label for="handle">{$_('sso_register.handle_label')}</label>
             <HandleInput
               value={handle}
@@ -478,7 +475,7 @@
           </fieldset>
 
           {#if serverInfo?.inviteCodeRequired}
-            <div class="field">
+            <div>
               <label for="invite-code">{$_('register.inviteCode')} <span class="required">{$_('register.inviteCodeRequired')}</span></label>
               <input
                 id="invite-code"
@@ -509,179 +506,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  .sso-register-container {
-    max-width: var(--width-lg);
-    margin: var(--space-9) auto;
-    padding: var(--space-7);
-  }
-
-  .loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-4);
-    padding: var(--space-8);
-  }
-
-  .loading p {
-    color: var(--text-secondary);
-  }
-
-  .error-container {
-    text-align: center;
-    padding: var(--space-8);
-  }
-
-  .error-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: var(--error-text);
-    color: var(--text-inverse);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    font-weight: bold;
-    margin: 0 auto var(--space-4);
-  }
-
-  .error-container h2 {
-    margin-bottom: var(--space-2);
-  }
-
-  .error-container p {
-    color: var(--text-secondary);
-    margin-bottom: var(--space-6);
-  }
-
-  .back-link {
-    color: var(--accent);
-    text-decoration: none;
-  }
-
-  .back-link:hover {
-    text-decoration: underline;
-  }
-
-  .page-header {
-    margin-bottom: var(--space-6);
-  }
-
-  .page-header h1 {
-    margin: 0 0 var(--space-3) 0;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    margin: 0;
-  }
-
-  .form-section {
-    min-width: 0;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-5);
-  }
-
-  .contact-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .contact-fields .field {
-    margin-bottom: 0;
-  }
-
-  .hint.success {
-    color: var(--success-text);
-  }
-
-  .hint.error {
-    color: var(--error-text);
-  }
-
-  .info-panel {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-  }
-
-  .info-panel h3 {
-    margin: 0 0 var(--space-4) 0;
-    font-size: var(--text-base);
-    font-weight: var(--font-semibold);
-  }
-
-  .info-list {
-    margin: 0;
-    padding-left: var(--space-5);
-  }
-
-  .info-list li {
-    margin-bottom: var(--space-2);
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    line-height: var(--leading-relaxed);
-  }
-
-  .info-list li:last-child {
-    margin-bottom: 0;
-  }
-
-  .provider-info {
-    margin-bottom: var(--space-6);
-  }
-
-  .provider-badge {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-4);
-    background: var(--bg-secondary);
-    border-radius: var(--radius-md);
-  }
-
-  .provider-details {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .provider-name {
-    font-weight: var(--font-semibold);
-  }
-
-  .provider-username {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .required {
-    color: var(--error-text);
-  }
-
-  button[type="submit"] {
-    margin-top: var(--space-3);
-  }
-
-  .spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid var(--border-color);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
diff --git a/frontend/src/routes/OAuthTotp.svelte b/frontend/src/routes/OAuthTotp.svelte
index d17c675..a5684af 100644
--- a/frontend/src/routes/OAuthTotp.svelte
+++ b/frontend/src/routes/OAuthTotp.svelte
@@ -80,7 +80,7 @@
   {/if}
 
   <form onsubmit={handleSubmit}>
-    <div class="field">
+    <div>
       <label for="code">{$_('oauth.totp.codePlaceholder')}</label>
       <input
         id="code"
@@ -110,131 +110,12 @@
     </label>
 
     <div class="actions">
-      <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}>
+      <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}>
         {$_('common.cancel')}
       </button>
-      <button type="submit" class="submit-btn" disabled={submitting || !canSubmit}>
+      <button type="submit" disabled={submitting || !canSubmit}>
         {submitting ? $_('common.verifying') : $_('common.verify')}
       </button>
     </div>
   </form>
 </div>
-
-<style>
-  .oauth-totp-container {
-    max-width: var(--width-sm);
-    margin: var(--space-9) auto;
-    padding: var(--space-7);
-  }
-
-  h1 {
-    margin: 0 0 var(--space-6) 0;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  label {
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-  }
-
-  input {
-    padding: var(--space-3);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    font-size: var(--text-xl);
-    letter-spacing: 0.25em;
-    text-align: center;
-    background: var(--bg-input);
-    color: var(--text-primary);
-    text-transform: uppercase;
-  }
-
-  input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
-  .hint {
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    margin: var(--space-1) 0 0 0;
-    text-align: center;
-  }
-
-  .error {
-    padding: var(--space-3);
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: var(--radius-md);
-    color: var(--error-text);
-    margin-bottom: var(--space-4);
-  }
-
-  .actions {
-    display: flex;
-    gap: var(--space-4);
-    margin-top: var(--space-2);
-  }
-
-  .actions button {
-    flex: 1;
-    padding: var(--space-3);
-    border: none;
-    border-radius: var(--radius-md);
-    font-size: var(--text-base);
-    cursor: pointer;
-    transition: background-color var(--transition-fast);
-  }
-
-  .actions button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .cancel-btn {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-  }
-
-  .cancel-btn:hover:not(:disabled) {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-  }
-
-  .submit-btn {
-    background: var(--accent);
-    color: var(--text-inverse);
-  }
-
-  .submit-btn:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-
-  .trust-device-label {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    cursor: pointer;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    margin-top: var(--space-2);
-  }
-
-  .trust-device-label input[type="checkbox"] {
-    width: auto;
-    margin: 0;
-  }
-</style>