refactor(frontend): extract oauth secondary page styles · tranquil.farm/tranquil-pds@6683d03

+3 -104

frontend/src/routes/OAuth2FA.svelte

··· 84 84 {/if} 85 85 86 86 <form onsubmit={handleSubmit}> 87 - <div class="field"> 87 + <div> 88 88 <label for="code">{$_('oauth.twoFactorCode.codeLabel')}</label> 89 89 <input 90 90 id="code" ··· 101 101 </div> 102 102 103 103 <div class="actions"> 104 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}> 104 + <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}> 105 105 {$_('common.cancel')} 106 106 </button> 107 - <button type="submit" class="submit-btn" disabled={submitting || code.trim().length !== 6}> 107 + <button type="submit" disabled={submitting || code.trim().length !== 6}> 108 108 {submitting ? $_('common.verifying') : $_('common.verify')} 109 109 </button> 110 110 </div> 111 111 </form> 112 112 </div> 113 - 114 - <style> 115 - .oauth-2fa-container { 116 - max-width: var(--width-sm); 117 - margin: var(--space-9) auto; 118 - padding: var(--space-7); 119 - } 120 - 121 - h1 { 122 - margin: 0 0 var(--space-2) 0; 123 - } 124 - 125 - .subtitle { 126 - color: var(--text-secondary); 127 - margin: 0 0 var(--space-7) 0; 128 - } 129 - 130 - form { 131 - display: flex; 132 - flex-direction: column; 133 - gap: var(--space-4); 134 - } 135 - 136 - .field { 137 - display: flex; 138 - flex-direction: column; 139 - gap: var(--space-1); 140 - } 141 - 142 - label { 143 - font-size: var(--text-sm); 144 - font-weight: var(--font-medium); 145 - } 146 - 147 - input { 148 - padding: var(--space-3); 149 - border: 1px solid var(--border-color); 150 - border-radius: var(--radius-md); 151 - font-size: var(--text-xl); 152 - letter-spacing: 0.5em; 153 - text-align: center; 154 - background: var(--bg-input); 155 - color: var(--text-primary); 156 - } 157 - 158 - input:focus { 159 - outline: none; 160 - border-color: var(--accent); 161 - } 162 - 163 - .error { 164 - padding: var(--space-3); 165 - background: var(--error-bg); 166 - border: 1px solid var(--error-border); 167 - border-radius: var(--radius-md); 168 - color: var(--error-text); 169 - margin-bottom: var(--space-4); 170 - } 171 - 172 - .actions { 173 - display: flex; 174 - gap: var(--space-4); 175 - margin-top: var(--space-2); 176 - } 177 - 178 - .actions button { 179 - flex: 1; 180 - padding: var(--space-3); 181 - border: none; 182 - border-radius: var(--radius-md); 183 - font-size: var(--text-base); 184 - cursor: pointer; 185 - transition: background-color var(--transition-fast); 186 - } 187 - 188 - .actions button:disabled { 189 - opacity: 0.6; 190 - cursor: not-allowed; 191 - } 192 - 193 - .cancel-btn { 194 - background: var(--bg-secondary); 195 - color: var(--text-primary); 196 - border: 1px solid var(--border-color); 197 - } 198 - 199 - .cancel-btn:hover:not(:disabled) { 200 - background: var(--error-bg); 201 - border-color: var(--error-border); 202 - color: var(--error-text); 203 - } 204 - 205 - .submit-btn { 206 - background: var(--accent); 207 - color: var(--text-inverse); 208 - } 209 - 210 - .submit-btn:hover:not(:disabled) { 211 - background: var(--accent-hover); 212 - } 213 - </style>

-88

frontend/src/routes/OAuthAccounts.svelte

··· 146 146 </button> 147 147 {/if} 148 148 </div> 149 - 150 - <style> 151 - .oauth-accounts-container { 152 - max-width: var(--width-sm); 153 - margin: var(--space-9) auto; 154 - padding: var(--space-7); 155 - } 156 - 157 - h1 { 158 - margin: 0 0 var(--space-6) 0; 159 - } 160 - 161 - .loading { 162 - display: flex; 163 - align-items: center; 164 - justify-content: center; 165 - min-height: 200px; 166 - color: var(--text-secondary); 167 - } 168 - 169 - .error-container { 170 - text-align: center; 171 - } 172 - 173 - .error { 174 - padding: var(--space-3); 175 - background: var(--error-bg); 176 - border: 1px solid var(--error-border); 177 - border-radius: var(--radius-md); 178 - color: var(--error-text); 179 - margin-bottom: var(--space-4); 180 - } 181 - 182 - .accounts-list { 183 - display: flex; 184 - flex-direction: column; 185 - gap: var(--space-2); 186 - margin-bottom: var(--space-4); 187 - } 188 - 189 - .account-item { 190 - display: flex; 191 - align-items: center; 192 - padding: var(--space-4); 193 - background: var(--bg-secondary); 194 - border: 1px solid var(--border-color); 195 - border-radius: var(--radius-xl); 196 - cursor: pointer; 197 - text-align: left; 198 - width: 100%; 199 - transition: border-color var(--transition-fast), background var(--transition-fast); 200 - } 201 - 202 - .account-item:hover:not(.disabled) { 203 - border-color: var(--accent); 204 - background: var(--bg-tertiary); 205 - } 206 - 207 - .account-item.disabled { 208 - opacity: 0.6; 209 - cursor: not-allowed; 210 - } 211 - 212 - .account-info { 213 - display: flex; 214 - flex-direction: column; 215 - gap: var(--space-1); 216 - } 217 - 218 - .account-handle { 219 - font-weight: var(--font-medium); 220 - color: var(--text-primary); 221 - } 222 - 223 - .account-email { 224 - font-size: var(--text-sm); 225 - color: var(--text-secondary); 226 - } 227 - 228 - .different-account { 229 - margin-top: var(--space-4); 230 - width: 100%; 231 - } 232 - 233 - .different-account { 234 - margin-top: var(--space-4); 235 - } 236 - </style>

+3 -115

frontend/src/routes/OAuthDelegation.svelte

··· 158 158 {/if} 159 159 160 160 <form onsubmit={handleSubmit}> 161 - <div class="field"> 161 + <div> 162 162 <label for="controller-identifier">{$_('oauthDelegation.controllerHandle')}</label> 163 163 <input 164 164 id="controller-identifier" ··· 172 172 </div> 173 173 174 174 <div class="actions"> 175 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}> 175 + <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}> 176 176 {$_('common.cancel')} 177 177 </button> 178 - <button type="submit" class="submit-btn" disabled={submitting || !controllerIdentifier.trim()}> 178 + <button type="submit" disabled={submitting || !controllerIdentifier.trim()}> 179 179 {submitting ? $_('oauthDelegation.checking') : $_('common.continue')} 180 180 </button> 181 181 </div> 182 182 </form> 183 183 {/if} 184 184 </div> 185 - 186 - <style> 187 - .delegation-container { 188 - max-width: var(--width-md); 189 - margin: var(--space-9) auto; 190 - padding: var(--space-7); 191 - } 192 - 193 - .loading { 194 - display: flex; 195 - align-items: center; 196 - justify-content: center; 197 - min-height: 200px; 198 - color: var(--text-secondary); 199 - } 200 - 201 - .page-header { 202 - margin-bottom: var(--space-6); 203 - } 204 - 205 - h1 { 206 - margin: 0 0 var(--space-2) 0; 207 - } 208 - 209 - .subtitle { 210 - color: var(--text-secondary); 211 - margin: 0; 212 - line-height: 1.6; 213 - } 214 - 215 - form { 216 - display: flex; 217 - flex-direction: column; 218 - gap: var(--space-4); 219 - } 220 - 221 - .field { 222 - display: flex; 223 - flex-direction: column; 224 - gap: var(--space-1); 225 - } 226 - 227 - label { 228 - font-size: var(--text-sm); 229 - font-weight: var(--font-medium); 230 - } 231 - 232 - input[type="text"] { 233 - padding: var(--space-3); 234 - border: 1px solid var(--border-color); 235 - border-radius: var(--radius-md); 236 - font-size: var(--text-base); 237 - background: var(--bg-input); 238 - color: var(--text-primary); 239 - } 240 - 241 - input:focus { 242 - outline: none; 243 - border-color: var(--accent); 244 - } 245 - 246 - .error { 247 - padding: var(--space-3); 248 - background: var(--error-bg); 249 - border: 1px solid var(--error-border); 250 - border-radius: var(--radius-md); 251 - color: var(--error-text); 252 - margin-bottom: var(--space-4); 253 - } 254 - 255 - .actions { 256 - display: flex; 257 - gap: var(--space-4); 258 - margin-top: var(--space-2); 259 - } 260 - 261 - .actions button { 262 - flex: 1; 263 - padding: var(--space-3); 264 - border: none; 265 - border-radius: var(--radius-md); 266 - font-size: var(--text-base); 267 - cursor: pointer; 268 - transition: background-color var(--transition-fast); 269 - } 270 - 271 - .actions button:disabled { 272 - opacity: 0.6; 273 - cursor: not-allowed; 274 - } 275 - 276 - .cancel-btn { 277 - background: var(--bg-secondary); 278 - color: var(--text-primary); 279 - border: 1px solid var(--border-color); 280 - } 281 - 282 - .cancel-btn:hover:not(:disabled) { 283 - background: var(--error-bg); 284 - border-color: var(--error-border); 285 - color: var(--error-text); 286 - } 287 - 288 - .submit-btn { 289 - background: var(--accent); 290 - color: var(--text-inverse); 291 - } 292 - 293 - .submit-btn:hover:not(:disabled) { 294 - background: var(--accent-hover); 295 - } 296 - </style>

-33

frontend/src/routes/OAuthError.svelte

··· 48 48 </button> 49 49 </div> 50 50 </div> 51 - 52 - <style> 53 - h1 { 54 - margin: 0 0 var(--space-6) 0; 55 - color: var(--error-text); 56 - } 57 - 58 - .error-box { 59 - padding: var(--space-6); 60 - background: var(--error-bg); 61 - border: 1px solid var(--error-border); 62 - border-radius: var(--radius-xl); 63 - margin-bottom: var(--space-6); 64 - } 65 - 66 - .error-code { 67 - font-family: var(--font-mono); 68 - font-size: var(--text-base); 69 - color: var(--error-text); 70 - margin-bottom: var(--space-2); 71 - } 72 - 73 - .error-description { 74 - color: var(--text-secondary); 75 - font-size: var(--text-sm); 76 - } 77 - 78 - .actions { 79 - display: flex; 80 - gap: var(--space-3); 81 - justify-content: center; 82 - } 83 - </style>

+2 -103

frontend/src/routes/OAuthPasskey.svelte

··· 127 127 <div class="passkey-status"> 128 128 {#if loading} 129 129 <div class="loading-indicator"> 130 - <div class="spinner"></div> 131 130 <p>{t('oauth.passkey.waiting')}</p> 132 131 </div> 133 132 {:else} 134 - <button type="button" class="passkey-btn" onclick={startPasskeyAuth} disabled={loading}> 133 + <button type="button" style="width: 100%" onclick={startPasskeyAuth} disabled={loading}> 135 134 {t('oauth.passkey.title')} 136 135 </button> 137 136 {/if} 138 137 </div> 139 138 140 139 <div class="actions"> 141 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={loading}> 140 + <button type="button" class="secondary" onclick={handleCancel} disabled={loading}> 142 141 {t('common.cancel')} 143 142 </button> 144 143 </div> 145 144 </div> 146 - 147 - <style> 148 - .oauth-passkey-container { 149 - max-width: 400px; 150 - margin: 4rem auto; 151 - padding: 2rem; 152 - text-align: center; 153 - } 154 - 155 - h1 { 156 - margin: 0 0 1.5rem 0; 157 - } 158 - 159 - .error { 160 - padding: 0.75rem; 161 - background: var(--error-bg); 162 - border: 1px solid var(--error-border); 163 - border-radius: 4px; 164 - color: var(--error-text); 165 - margin-bottom: 1.5rem; 166 - text-align: left; 167 - } 168 - 169 - .passkey-status { 170 - padding: 2rem; 171 - background: var(--bg-secondary); 172 - border-radius: 8px; 173 - margin-bottom: 1.5rem; 174 - } 175 - 176 - .loading-indicator { 177 - display: flex; 178 - flex-direction: column; 179 - align-items: center; 180 - gap: 1rem; 181 - } 182 - 183 - .spinner { 184 - width: 40px; 185 - height: 40px; 186 - border: 3px solid var(--border-color); 187 - border-top-color: var(--accent); 188 - border-radius: 50%; 189 - animation: spin 1s linear infinite; 190 - } 191 - 192 - .loading-indicator p { 193 - margin: 0; 194 - color: var(--text-secondary); 195 - } 196 - 197 - .passkey-btn { 198 - width: 100%; 199 - padding: 1rem; 200 - background: var(--accent); 201 - color: white; 202 - border: none; 203 - border-radius: 4px; 204 - font-size: 1rem; 205 - cursor: pointer; 206 - transition: background-color 0.15s; 207 - } 208 - 209 - .passkey-btn:hover:not(:disabled) { 210 - background: var(--accent-hover); 211 - } 212 - 213 - .passkey-btn:disabled { 214 - opacity: 0.6; 215 - cursor: not-allowed; 216 - } 217 - 218 - .actions { 219 - display: flex; 220 - justify-content: center; 221 - margin-bottom: 1.5rem; 222 - } 223 - 224 - .cancel-btn { 225 - padding: 0.75rem 2rem; 226 - background: var(--bg-secondary); 227 - color: var(--text-primary); 228 - border: 1px solid var(--border-color); 229 - border-radius: 4px; 230 - font-size: 1rem; 231 - cursor: pointer; 232 - transition: background-color 0.15s; 233 - } 234 - 235 - .cancel-btn:hover:not(:disabled) { 236 - background: var(--error-bg); 237 - border-color: var(--error-border); 238 - color: var(--error-text); 239 - } 240 - 241 - .cancel-btn:disabled { 242 - opacity: 0.6; 243 - cursor: not-allowed; 244 - } 245 - </style>

+3 -182

frontend/src/routes/OAuthSsoRegister.svelte

··· 292 292 293 293 <div class="sso-register-container"> 294 294 {#if loading} 295 - <div class="loading"> 296 - <div class="spinner"></div> 297 - <p>{$_('common.loading')}</p> 298 - </div> 295 + <div class="loading"></div> 299 296 {:else if error && !pending} 300 297 <div class="error-container"> 301 298 <div class="error-icon">!</div> ··· 324 321 <div class="split-layout sidebar-right"> 325 322 <div class="form-section"> 326 323 <form onsubmit={handleSubmit}> 327 - <div class="field"> 324 + <div> 328 325 <label for="handle">{$_('sso_register.handle_label')}</label> 329 326 <HandleInput 330 327 value={handle} ··· 478 475 </fieldset> 479 476 480 477 {#if serverInfo?.inviteCodeRequired} 481 - <div class="field"> 478 + <div> 482 479 <label for="invite-code">{$_('register.inviteCode')} <span class="required">{$_('register.inviteCodeRequired')}</span></label> 483 480 <input 484 481 id="invite-code" ··· 509 506 </div> 510 507 {/if} 511 508 </div> 512 - 513 - <style> 514 - .sso-register-container { 515 - max-width: var(--width-lg); 516 - margin: var(--space-9) auto; 517 - padding: var(--space-7); 518 - } 519 - 520 - .loading { 521 - display: flex; 522 - flex-direction: column; 523 - align-items: center; 524 - gap: var(--space-4); 525 - padding: var(--space-8); 526 - } 527 - 528 - .loading p { 529 - color: var(--text-secondary); 530 - } 531 - 532 - .error-container { 533 - text-align: center; 534 - padding: var(--space-8); 535 - } 536 - 537 - .error-icon { 538 - width: 48px; 539 - height: 48px; 540 - border-radius: 50%; 541 - background: var(--error-text); 542 - color: var(--text-inverse); 543 - display: flex; 544 - align-items: center; 545 - justify-content: center; 546 - font-size: 24px; 547 - font-weight: bold; 548 - margin: 0 auto var(--space-4); 549 - } 550 - 551 - .error-container h2 { 552 - margin-bottom: var(--space-2); 553 - } 554 - 555 - .error-container p { 556 - color: var(--text-secondary); 557 - margin-bottom: var(--space-6); 558 - } 559 - 560 - .back-link { 561 - color: var(--accent); 562 - text-decoration: none; 563 - } 564 - 565 - .back-link:hover { 566 - text-decoration: underline; 567 - } 568 - 569 - .page-header { 570 - margin-bottom: var(--space-6); 571 - } 572 - 573 - .page-header h1 { 574 - margin: 0 0 var(--space-3) 0; 575 - } 576 - 577 - .subtitle { 578 - color: var(--text-secondary); 579 - margin: 0; 580 - } 581 - 582 - .form-section { 583 - min-width: 0; 584 - } 585 - 586 - form { 587 - display: flex; 588 - flex-direction: column; 589 - gap: var(--space-5); 590 - } 591 - 592 - .contact-fields { 593 - display: flex; 594 - flex-direction: column; 595 - gap: var(--space-4); 596 - } 597 - 598 - .contact-fields .field { 599 - margin-bottom: 0; 600 - } 601 - 602 - .hint.success { 603 - color: var(--success-text); 604 - } 605 - 606 - .hint.error { 607 - color: var(--error-text); 608 - } 609 - 610 - .info-panel { 611 - background: var(--bg-secondary); 612 - border-radius: var(--radius-xl); 613 - padding: var(--space-6); 614 - } 615 - 616 - .info-panel h3 { 617 - margin: 0 0 var(--space-4) 0; 618 - font-size: var(--text-base); 619 - font-weight: var(--font-semibold); 620 - } 621 - 622 - .info-list { 623 - margin: 0; 624 - padding-left: var(--space-5); 625 - } 626 - 627 - .info-list li { 628 - margin-bottom: var(--space-2); 629 - font-size: var(--text-sm); 630 - color: var(--text-secondary); 631 - line-height: var(--leading-relaxed); 632 - } 633 - 634 - .info-list li:last-child { 635 - margin-bottom: 0; 636 - } 637 - 638 - .provider-info { 639 - margin-bottom: var(--space-6); 640 - } 641 - 642 - .provider-badge { 643 - display: flex; 644 - align-items: center; 645 - gap: var(--space-3); 646 - padding: var(--space-4); 647 - background: var(--bg-secondary); 648 - border-radius: var(--radius-md); 649 - } 650 - 651 - .provider-details { 652 - display: flex; 653 - flex-direction: column; 654 - } 655 - 656 - .provider-name { 657 - font-weight: var(--font-semibold); 658 - } 659 - 660 - .provider-username { 661 - font-size: var(--text-sm); 662 - color: var(--text-secondary); 663 - } 664 - 665 - .required { 666 - color: var(--error-text); 667 - } 668 - 669 - button[type="submit"] { 670 - margin-top: var(--space-3); 671 - } 672 - 673 - .spinner { 674 - width: 32px; 675 - height: 32px; 676 - border: 3px solid var(--border-color); 677 - border-top-color: var(--accent); 678 - border-radius: 50%; 679 - animation: spin 1s linear infinite; 680 - } 681 - 682 - @keyframes spin { 683 - to { 684 - transform: rotate(360deg); 685 - } 686 - } 687 - </style>

+3 -122

frontend/src/routes/OAuthTotp.svelte

··· 80 80 {/if} 81 81 82 82 <form onsubmit={handleSubmit}> 83 - <div class="field"> 83 + <div> 84 84 <label for="code">{$_('oauth.totp.codePlaceholder')}</label> 85 85 <input 86 86 id="code" ··· 110 110 </label> 111 111 112 112 <div class="actions"> 113 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}> 113 + <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}> 114 114 {$_('common.cancel')} 115 115 </button> 116 - <button type="submit" class="submit-btn" disabled={submitting || !canSubmit}> 116 + <button type="submit" disabled={submitting || !canSubmit}> 117 117 {submitting ? $_('common.verifying') : $_('common.verify')} 118 118 </button> 119 119 </div> 120 120 </form> 121 121 </div> 122 - 123 - <style> 124 - .oauth-totp-container { 125 - max-width: var(--width-sm); 126 - margin: var(--space-9) auto; 127 - padding: var(--space-7); 128 - } 129 - 130 - h1 { 131 - margin: 0 0 var(--space-6) 0; 132 - } 133 - 134 - form { 135 - display: flex; 136 - flex-direction: column; 137 - gap: var(--space-4); 138 - } 139 - 140 - .field { 141 - display: flex; 142 - flex-direction: column; 143 - gap: var(--space-1); 144 - } 145 - 146 - label { 147 - font-size: var(--text-sm); 148 - font-weight: var(--font-medium); 149 - } 150 - 151 - input { 152 - padding: var(--space-3); 153 - border: 1px solid var(--border-color); 154 - border-radius: var(--radius-md); 155 - font-size: var(--text-xl); 156 - letter-spacing: 0.25em; 157 - text-align: center; 158 - background: var(--bg-input); 159 - color: var(--text-primary); 160 - text-transform: uppercase; 161 - } 162 - 163 - input:focus { 164 - outline: none; 165 - border-color: var(--accent); 166 - } 167 - 168 - .hint { 169 - font-size: var(--text-xs); 170 - color: var(--text-muted); 171 - margin: var(--space-1) 0 0 0; 172 - text-align: center; 173 - } 174 - 175 - .error { 176 - padding: var(--space-3); 177 - background: var(--error-bg); 178 - border: 1px solid var(--error-border); 179 - border-radius: var(--radius-md); 180 - color: var(--error-text); 181 - margin-bottom: var(--space-4); 182 - } 183 - 184 - .actions { 185 - display: flex; 186 - gap: var(--space-4); 187 - margin-top: var(--space-2); 188 - } 189 - 190 - .actions button { 191 - flex: 1; 192 - padding: var(--space-3); 193 - border: none; 194 - border-radius: var(--radius-md); 195 - font-size: var(--text-base); 196 - cursor: pointer; 197 - transition: background-color var(--transition-fast); 198 - } 199 - 200 - .actions button:disabled { 201 - opacity: 0.6; 202 - cursor: not-allowed; 203 - } 204 - 205 - .cancel-btn { 206 - background: var(--bg-secondary); 207 - color: var(--text-primary); 208 - border: 1px solid var(--border-color); 209 - } 210 - 211 - .cancel-btn:hover:not(:disabled) { 212 - background: var(--error-bg); 213 - border-color: var(--error-border); 214 - color: var(--error-text); 215 - } 216 - 217 - .submit-btn { 218 - background: var(--accent); 219 - color: var(--text-inverse); 220 - } 221 - 222 - .submit-btn:hover:not(:disabled) { 223 - background: var(--accent-hover); 224 - } 225 - 226 - .trust-device-label { 227 - display: flex; 228 - align-items: center; 229 - gap: var(--space-2); 230 - cursor: pointer; 231 - font-size: var(--text-sm); 232 - color: var(--text-secondary); 233 - margin-top: var(--space-2); 234 - } 235 - 236 - .trust-device-label input[type="checkbox"] { 237 - width: auto; 238 - margin: 0; 239 - } 240 - </style>

Configure Feed

Configure Feed