mirror of
https://tangled.org/tranquil.farm/tranquil-pds
synced 2026-08-01 06:56:05 +00:00
refactor(frontend): extract auth and registration page styles + pages.css
This commit is contained in:
Lewis
Tangled
@@ -139,7 +139,7 @@
|
||||
{/if}
|
||||
|
||||
<div class="actions">
|
||||
<button class="back-btn" onclick={goBack}>
|
||||
<button class="secondary" onclick={goBack}>
|
||||
{$_('actAs.backToControllers')}
|
||||
</button>
|
||||
</div>
|
||||
@@ -148,53 +148,3 @@
|
||||
{/snippet}
|
||||
</AuthenticatedRoute>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
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);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message.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 {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleVerification(e); }}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="verification-code">{$_('verification.codeLabel')}</label>
|
||||
<input
|
||||
id="verification-code"
|
||||
@@ -192,7 +192,7 @@
|
||||
<p class="or-divider">{$_('login.signInToAnother')}</p>
|
||||
{/if}
|
||||
|
||||
<button type="button" class="oauth-btn" onclick={handleOAuthLogin} disabled={submitting || loading}>
|
||||
<button type="button" class="lg" style="width: 100%" onclick={handleOAuthLogin} disabled={submitting || loading}>
|
||||
{submitting ? $_('login.redirecting') : $_('login.button')}
|
||||
</button>
|
||||
|
||||
@@ -209,170 +209,3 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-page {
|
||||
max-width: var(--width-lg);
|
||||
margin: var(--space-9) auto;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
max-width: var(--width-md);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
max-width: var(--width-sm);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.actions {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.oauth-btn {
|
||||
width: 100%;
|
||||
padding: var(--space-5);
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.forgot-links {
|
||||
margin-top: var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forgot-links a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
margin-top: var(--space-6);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link-text a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.saved-accounts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.saved-accounts.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.saved-accounts.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.account-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-xl);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
|
||||
}
|
||||
|
||||
.account-item:hover:not(.disabled) {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.account-item.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.account-handle {
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.account-did {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.forget-btn {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.forget-btn:hover {
|
||||
background: var(--error-bg);
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.or-divider {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
margin: var(--space-5) 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="new-password">{$_('recoverPasskey.newPassword')}</label>
|
||||
<input
|
||||
id="new-password"
|
||||
@@ -110,7 +110,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="confirm-password">{$_('recoverPasskey.confirmPassword')}</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
@@ -134,69 +134,3 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.recover-page {
|
||||
max-width: var(--width-sm);
|
||||
margin: var(--space-9) auto;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-7) 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.success-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: var(--text-4xl);
|
||||
color: var(--success-text);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.next-steps {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -329,10 +329,7 @@
|
||||
|
||||
<div class="page">
|
||||
{#if loadingServerInfo}
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>{$_('common.loading')}</p>
|
||||
</div>
|
||||
<div class="loading"></div>
|
||||
{:else if flow}
|
||||
<header class="page-header">
|
||||
<h1>{$_('oauth.register.title')}</h1>
|
||||
@@ -360,7 +357,7 @@
|
||||
<AccountTypeSwitcher active="passkey" {ssoAvailable} oauthRequestUri={getRequestUriFromUrl()} />
|
||||
|
||||
<form class="register-form" onsubmit={handleInfoSubmit}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="handle">{$_('register.handle')}</label>
|
||||
<HandleInput
|
||||
value={flow.info.handle}
|
||||
@@ -384,7 +381,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="verification-channel">{$_('register.verificationMethod')}</label>
|
||||
<select id="verification-channel" bind:value={flow.info.verificationChannel} disabled={flow.state.submitting}>
|
||||
<option value="email">{channelLabel('email')}</option>
|
||||
@@ -401,7 +398,7 @@
|
||||
</div>
|
||||
|
||||
{#if flow.info.verificationChannel === 'email'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="email">{$_('register.emailAddress')}</label>
|
||||
<input
|
||||
id="email"
|
||||
@@ -413,7 +410,7 @@
|
||||
/>
|
||||
</div>
|
||||
{:else if flow.info.verificationChannel === 'discord'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="discord-username">{$_('register.discordUsername')}</label>
|
||||
<input
|
||||
id="discord-username"
|
||||
@@ -425,7 +422,7 @@
|
||||
/>
|
||||
</div>
|
||||
{:else if flow.info.verificationChannel === 'telegram'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="telegram-username">{$_('register.telegramUsername')}</label>
|
||||
<input
|
||||
id="telegram-username"
|
||||
@@ -437,7 +434,7 @@
|
||||
/>
|
||||
</div>
|
||||
{:else if flow.info.verificationChannel === 'signal'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="signal-number">{$_('register.signalUsername')}</label>
|
||||
<input
|
||||
id="signal-number"
|
||||
@@ -496,7 +493,7 @@
|
||||
{/if}
|
||||
|
||||
{#if flow.info.didType === 'web-external'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="external-did">{$_('registerPasskey.externalDid')}</label>
|
||||
<input id="external-did" type="text" bind:value={flow.info.externalDid} placeholder={$_('registerPasskey.externalDidPlaceholder')} disabled={flow.state.submitting} required />
|
||||
<p class="hint">{$_('registerPasskey.externalDidHint')} <code>https://{flow.info.externalDid ? flow.extractDomain(flow.info.externalDid) : 'yourdomain.com'}/.well-known/did.json</code></p>
|
||||
@@ -504,7 +501,7 @@
|
||||
{/if}
|
||||
|
||||
{#if serverInfo?.inviteCodeRequired}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="invite-code">{$_('register.inviteCode')}</label>
|
||||
<input
|
||||
id="invite-code"
|
||||
@@ -535,7 +532,6 @@
|
||||
|
||||
{:else if flow.state.step === 'creating'}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
<p>{$_('registerPasskey.creatingAccount')}</p>
|
||||
</div>
|
||||
|
||||
@@ -577,111 +573,8 @@
|
||||
|
||||
{:else if flow.state.step === 'activating'}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
<p>{$_('registerPasskey.activatingAccount')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.register-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.identity-section {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
margin: 0;
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.identity-section legend {
|
||||
font-weight: var(--font-medium);
|
||||
font-size: var(--text-sm);
|
||||
padding: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-label.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio-label input {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.radio-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.radio-hint {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.radio-hint.disabled-hint {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
padding: var(--space-4);
|
||||
background: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.warning-box ul {
|
||||
margin: var(--space-2) 0 0 0;
|
||||
padding-left: var(--space-5);
|
||||
}
|
||||
|
||||
.warning-box li {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.form-actions .primary {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.passkey-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.passkey-step h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.passkey-step p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,31 +21,7 @@
|
||||
<a href="/app/login">{$_('register.signIn')}</a>
|
||||
{:else}
|
||||
<div class="loading-content">
|
||||
<div class="spinner"></div>
|
||||
<p>{$_('common.loading')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.register-redirect {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.loading-content p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -287,9 +287,7 @@
|
||||
{/if}
|
||||
|
||||
{#if loadingServerInfo || !flow}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
</div>
|
||||
<div class="loading"></div>
|
||||
{:else if flow.state.step === 'info'}
|
||||
<div class="migrate-callout">
|
||||
<div class="migrate-icon">↗</div>
|
||||
@@ -305,7 +303,7 @@
|
||||
<AccountTypeSwitcher active="password" {ssoAvailable} oauthRequestUri={getRequestUriFromUrl()} />
|
||||
|
||||
<form class="register-form" onsubmit={handleInfoSubmit}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="handle">{$_('register.handle')}</label>
|
||||
<HandleInput
|
||||
value={flow.info.handle}
|
||||
@@ -329,7 +327,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="password">{$_('register.password')}</label>
|
||||
<input
|
||||
id="password"
|
||||
@@ -342,7 +340,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="confirm-password">{$_('register.confirmPassword')}</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
@@ -354,7 +352,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="verification-channel">{$_('register.verificationMethod')}</label>
|
||||
<select id="verification-channel" bind:value={flow.info.verificationChannel} disabled={flow.state.submitting}>
|
||||
<option value="email">{$_('register.email')}</option>
|
||||
@@ -371,7 +369,7 @@
|
||||
</div>
|
||||
|
||||
{#if flow.info.verificationChannel === 'email'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="email">{$_('register.emailAddress')}</label>
|
||||
<input
|
||||
id="email"
|
||||
@@ -383,7 +381,7 @@
|
||||
/>
|
||||
</div>
|
||||
{:else if flow.info.verificationChannel === 'discord'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="discord-username">{$_('register.discordUsername')}</label>
|
||||
<input
|
||||
id="discord-username"
|
||||
@@ -399,7 +397,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
{:else if flow.info.verificationChannel === 'telegram'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="telegram-username">{$_('register.telegramUsername')}</label>
|
||||
<input
|
||||
id="telegram-username"
|
||||
@@ -415,7 +413,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
{:else if flow.info.verificationChannel === 'signal'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="signal-number">{$_('register.signalUsername')}</label>
|
||||
<input
|
||||
id="signal-number"
|
||||
@@ -480,7 +478,7 @@
|
||||
{/if}
|
||||
|
||||
{#if flow.info.didType === 'web-external'}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="external-did">{$_('register.externalDid')}</label>
|
||||
<input
|
||||
id="external-did"
|
||||
@@ -495,7 +493,7 @@
|
||||
{/if}
|
||||
|
||||
{#if serverInfo?.inviteCodeRequired}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="invite-code">{$_('register.inviteCode')}</label>
|
||||
<input
|
||||
id="invite-code"
|
||||
@@ -531,7 +529,6 @@
|
||||
|
||||
{:else if flow.state.step === 'creating'}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
<p>{$_('common.creating')}</p>
|
||||
</div>
|
||||
|
||||
@@ -547,94 +544,7 @@
|
||||
|
||||
{:else if flow.state.step === 'redirect-to-dashboard'}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
<p>{$_('register.redirecting')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.register-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.identity-section {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
margin: 0;
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.identity-section legend {
|
||||
font-weight: var(--font-medium);
|
||||
font-size: var(--text-sm);
|
||||
padding: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-label.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio-label input {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.radio-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.radio-hint {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.radio-hint.disabled-hint {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
padding: var(--space-4);
|
||||
background: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.warning-box ul {
|
||||
margin: var(--space-2) 0 0 0;
|
||||
padding-left: var(--space-5);
|
||||
}
|
||||
|
||||
.warning-box li {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.form-actions .primary {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -148,9 +148,7 @@
|
||||
<AccountTypeSwitcher active="sso" ssoAvailable={providers.length > 0} oauthRequestUri={getRequestUriFromUrl()} />
|
||||
|
||||
{#if loading}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
</div>
|
||||
<div class="loading"></div>
|
||||
{:else if providers.length === 0}
|
||||
<div class="no-providers">
|
||||
<p>{$_('register.noSsoProviders')}</p>
|
||||
@@ -184,63 +182,3 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.no-providers {
|
||||
text-align: center;
|
||||
padding: var(--space-8);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.provider-list {
|
||||
max-width: var(--width-md);
|
||||
}
|
||||
|
||||
.provider-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.provider-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.provider-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-dark);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-primary);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.provider-button:hover:not(:disabled) {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.provider-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.provider-button .provider-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: var(--space-5);
|
||||
max-width: var(--width-md);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="identifier">{$_('requestPasskeyRecovery.handleOrEmail')}</label>
|
||||
<input
|
||||
id="identifier"
|
||||
@@ -76,62 +76,3 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.recovery-page {
|
||||
max-width: var(--width-sm);
|
||||
margin: var(--space-9) auto;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-7) 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.success-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
text-align: center;
|
||||
margin-top: var(--space-7);
|
||||
}
|
||||
|
||||
.link-text a {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
<p class="subtitle">{$_('resetPassword.subtitle')}</p>
|
||||
|
||||
<form onsubmit={handleReset}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="token">{$_('resetPassword.code')}</label>
|
||||
<input
|
||||
id="token"
|
||||
@@ -96,7 +96,7 @@
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="new-password">{$_('resetPassword.newPassword')}</label>
|
||||
<input
|
||||
id="new-password"
|
||||
@@ -108,7 +108,7 @@
|
||||
minlength="8"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="confirm-password">{$_('resetPassword.confirmPassword')}</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
@@ -131,7 +131,7 @@
|
||||
<p class="subtitle">{$_('resetPassword.forgotSubtitle')}</p>
|
||||
|
||||
<form onsubmit={handleRequestReset}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="email">{$_('resetPassword.handleOrEmail')}</label>
|
||||
<input
|
||||
id="email"
|
||||
@@ -153,35 +153,3 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.reset-page {
|
||||
max-width: var(--width-sm);
|
||||
margin: var(--space-9) auto;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-7) 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
text-align: center;
|
||||
margin-top: var(--space-6);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.link-text a {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -332,10 +332,7 @@
|
||||
|
||||
<div class="page">
|
||||
{#if loading}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
<p>{$_('common.loading')}</p>
|
||||
</div>
|
||||
<div class="loading"></div>
|
||||
{:else if error && !pending}
|
||||
<div class="error-container">
|
||||
<div class="error-icon">!</div>
|
||||
@@ -397,7 +394,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}
|
||||
@@ -551,7 +548,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"
|
||||
@@ -582,19 +579,3 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.provider-info {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -343,7 +343,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleEmailUpdate(); }}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="new-email">{$_('verify.newEmailLabel')}</label>
|
||||
<input
|
||||
id="new-email"
|
||||
@@ -357,7 +357,7 @@
|
||||
</div>
|
||||
|
||||
{#if !tokenFromUrl}
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="verification-code">{$_('verify.codeLabel')}</label>
|
||||
<input
|
||||
id="verification-code"
|
||||
@@ -395,7 +395,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleTokenVerification(); }}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="identifier">{$_('verify.identifierLabel')}</label>
|
||||
<input
|
||||
id="identifier"
|
||||
@@ -409,7 +409,7 @@
|
||||
<p class="field-help">{$_('verify.identifierHelp')}</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="verification-code">{$_('verify.codeLabel')}</label>
|
||||
<input
|
||||
id="verification-code"
|
||||
@@ -474,7 +474,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSignupVerification(e); }}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="verification-code">{$_('verify.codeLabel')}</label>
|
||||
<input
|
||||
id="verification-code"
|
||||
@@ -515,136 +515,3 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.verify-page {
|
||||
max-width: var(--width-sm);
|
||||
margin: var(--space-9) auto;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
}
|
||||
|
||||
.handle-info {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-6) 0;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: var(--text-secondary);
|
||||
margin: var(--space-4) 0 var(--space-6) 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.field-help {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
margin: var(--space-1) 0 0 0;
|
||||
}
|
||||
|
||||
.token-input {
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
text-align: center;
|
||||
margin-top: var(--space-6);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.link-text a {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
padding: var(--space-4);
|
||||
background: var(--accent);
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-medium);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--accent-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.btn.secondary:hover {
|
||||
background: var(--accent);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.success-container,
|
||||
.loading-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-container .actions {
|
||||
justify-content: center;
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
.success-container .btn {
|
||||
flex: none;
|
||||
padding: var(--space-4) var(--space-8);
|
||||
}
|
||||
|
||||
.bot-hint {
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.bot-hint p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bot-hint .manual-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.bot-hint .waiting-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user