Reworked login page
This commit is contained in:
CodingPhoenixx
@@ -3,55 +3,160 @@ import { customElement, state } from 'lit/decorators.js';
|
|||||||
import { apiPost } from '../../api/api';
|
import { apiPost } from '../../api/api';
|
||||||
import '../../components/ui-link';
|
import '../../components/ui-link';
|
||||||
|
|
||||||
|
|
||||||
@customElement('login-page')
|
@customElement('login-page')
|
||||||
export class LoginPage extends LitElement {
|
export class LoginPage extends LitElement {
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: linear-gradient(
|
display: flex;
|
||||||
135deg,
|
justify-content: center;
|
||||||
var(--color-accent),
|
align-items: center;
|
||||||
color-mix(in srgb, var(--color-accent) 30%, black)
|
background:
|
||||||
);
|
radial-gradient(
|
||||||
background-size: cover;
|
ellipse at 30% 20%,
|
||||||
background-position: center;
|
color-mix(in srgb, var(--color-accent) 15%, transparent) 0%,
|
||||||
display: flex;
|
transparent 50%
|
||||||
justify-content: center;
|
),
|
||||||
align-items: center;
|
radial-gradient(
|
||||||
}
|
ellipse at 70% 80%,
|
||||||
|
color-mix(in srgb, var(--color-accent) 10%, transparent) 0%,
|
||||||
|
transparent 50%
|
||||||
|
),
|
||||||
|
var(--color-bg);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
background: var(--color-bg-nav);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 2rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.25rem;
|
||||||
|
box-shadow:
|
||||||
|
0 1px 3px rgba(0, 0, 0, 0.08),
|
||||||
|
0 12px 40px rgba(0, 0, 0, 0.12);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
.form {
|
.header {
|
||||||
width: 100%;
|
display: flex;
|
||||||
max-width: 380px;
|
flex-direction: column;
|
||||||
background: var(--color-bg-nav);
|
gap: 0.35rem;
|
||||||
border: 1px solid var(--color-border);
|
margin-bottom: 0.25rem;
|
||||||
border-radius: 12px;
|
}
|
||||||
padding: 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
.header h2 {
|
||||||
border: 1px solid var(--color-border);
|
margin: 0;
|
||||||
border-radius: 6px;
|
font-size: 1.5rem;
|
||||||
padding: 0.6rem;
|
font-weight: 700;
|
||||||
font-size: 1rem;
|
letter-spacing: -0.02em;
|
||||||
background: var(--color-bg);
|
color: var(--color-text);
|
||||||
color: var(--color-text);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
ui-button {
|
.header p {
|
||||||
align-self: flex-end;
|
margin: 0;
|
||||||
}
|
font-size: 0.875rem;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 60%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
.error {
|
.field {
|
||||||
color: crimson;
|
display: flex;
|
||||||
font-size: 0.9rem;
|
flex-direction: column;
|
||||||
}
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 70%, transparent);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.65rem 0.75rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
outline: none;
|
||||||
|
transition:
|
||||||
|
border-color 0.25s ease,
|
||||||
|
box-shadow 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
color: color-mix(in srgb, var(--color-text) 35%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
box-shadow: 0 0 0 3px
|
||||||
|
color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #e5484d;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background: color-mix(in srgb, #e5484d 8%, transparent);
|
||||||
|
border: 1px solid color-mix(in srgb, #e5484d 25%, transparent);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
color: #fff;
|
||||||
|
background: var(--color-accent);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background 0.25s ease,
|
||||||
|
box-shadow 0.25s ease,
|
||||||
|
transform 0.15s ease,
|
||||||
|
opacity 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover:not(:disabled) {
|
||||||
|
background: color-mix(in srgb, var(--color-accent) 85%, black);
|
||||||
|
box-shadow: 0 4px 14px
|
||||||
|
color-mix(in srgb, var(--color-accent) 35%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active:not(:disabled) {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
opacity: 0.55;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 60%, transparent);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--color-border);
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@state() email = '';
|
@state() email = '';
|
||||||
@@ -69,11 +174,13 @@ export class LoginPage extends LitElement {
|
|||||||
});
|
});
|
||||||
localStorage.setItem('token', res.token);
|
localStorage.setItem('token', res.token);
|
||||||
window.dispatchEvent(new CustomEvent('auth-changed'));
|
window.dispatchEvent(new CustomEvent('auth-changed'));
|
||||||
dispatchEvent(new CustomEvent('nav', {
|
dispatchEvent(
|
||||||
detail: { path: "/cc/" },
|
new CustomEvent('nav', {
|
||||||
bubbles: true,
|
detail: { path: '/cc/' },
|
||||||
composed: true,
|
bubbles: true,
|
||||||
}));
|
composed: true,
|
||||||
|
})
|
||||||
|
);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
this.error = e.message || 'Login failed';
|
this.error = e.message || 'Login failed';
|
||||||
} finally {
|
} finally {
|
||||||
@@ -81,22 +188,52 @@ export class LoginPage extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private handleKeydown(e: KeyboardEvent) {
|
||||||
|
if (e.key === 'Enter') this.handleLogin();
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div class="form">
|
<div class="card">
|
||||||
<h2>Login</h2>
|
<div class="header">
|
||||||
<input type="email" placeholder="Email" .value=${this.email} @input=${(e: any)=> (this.email = e.target.value)}
|
<h2>Welcome back</h2>
|
||||||
/>
|
<p>Sign in to your FlightScore account</p>
|
||||||
<input type="password" placeholder="Password" .value=${this.password} @input=${(e: any)=> (this.password =
|
</div>
|
||||||
e.target.value)}
|
|
||||||
/>
|
<div class="field">
|
||||||
${this.error ? html`<div class="error">${this.error}</div>` : null}
|
<label>Email</label>
|
||||||
<ui-button ?disabled=${this.loading} @click=${this.handleLogin}>${this.loading ? 'Loading...' : 'Login'}</ui-button>
|
<input
|
||||||
<p>
|
type="email"
|
||||||
No account?
|
placeholder="you@example.com"
|
||||||
<ui-link href="/register">Register</ui-link>
|
.value=${this.email}
|
||||||
</p>
|
@input=${(e: any) => (this.email = e.target.value)}
|
||||||
</div>
|
@keydown=${this.handleKeydown}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Enter your password"
|
||||||
|
.value=${this.password}
|
||||||
|
@input=${(e: any) => (this.password = e.target.value)}
|
||||||
|
@keydown=${this.handleKeydown}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${this.error ? html`<div class="error">${this.error}</div>` : null}
|
||||||
|
|
||||||
|
<button ?disabled=${this.loading} @click=${this.handleLogin}>
|
||||||
|
${this.loading ? 'Signing in...' : 'Sign in'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<p class="footer">
|
||||||
|
No account? <ui-link href="/register">Create one</ui-link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user