feat: login with username or email + change password
Backend: - Login handler accepts username OR email via the same field - New PUT /auth/me/password endpoint (verifies current password, requires min 8 chars for new password) Frontend: - Login form shows EMAIL OR USERNAME field (single field for both) - Auth store updated with changePassword function - UserSettings has new CHANGE PASSWORD section
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useAuthStore } from '../stores/auth.ts';
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useAuthStore } from "../stores/auth.ts";
|
||||
|
||||
export function LoginForm() {
|
||||
const [isRegister, setIsRegister] = useState(false);
|
||||
const [email, setEmail] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [email, setEmail] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const { login, register, isLoading, error, clearError } = useAuthStore();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -16,44 +16,63 @@ export function LoginForm() {
|
||||
clearError();
|
||||
|
||||
if (isRegister) {
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
}
|
||||
if (password !== confirmPassword) return;
|
||||
await register(email, username, password);
|
||||
} else {
|
||||
await login(email, password);
|
||||
}
|
||||
|
||||
navigate('/');
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full flex items-center justify-center bg-gb-bg p-4">
|
||||
<div className="terminal-border bg-gb-bg-h p-6 w-full max-w-md">
|
||||
<pre className="text-gb-orange font-mono text-lg mb-6">{'┌─ DUMPSTER ─┐'}</pre>
|
||||
<h2 className="text-gb-fg-s mb-4">{isRegister ? '[REGISTER]' : '[LOGIN]'}</h2>
|
||||
<pre className="text-gb-orange font-mono text-lg mb-6">
|
||||
{"┌─ DUMPSTER ─┐"}
|
||||
</pre>
|
||||
<h2 className="text-gb-fg-s mb-4">
|
||||
{isRegister ? "[REGISTER]" : "[LOGIN]"}
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-gb-fg-t mb-1">EMAIL:</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="terminal-input"
|
||||
required
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
{isRegister && (
|
||||
{isRegister ? (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-gb-fg-t mb-1">EMAIL:</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="terminal-input"
|
||||
required
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gb-fg-t mb-1">USERNAME:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="terminal-input"
|
||||
required
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div>
|
||||
<label className="block text-gb-fg-t mb-1">USERNAME:</label>
|
||||
<label className="block text-gb-fg-t mb-1">
|
||||
EMAIL OR USERNAME:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="terminal-input"
|
||||
required
|
||||
autoComplete="username"
|
||||
placeholder="email or username"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -65,12 +84,16 @@ export function LoginForm() {
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="terminal-input"
|
||||
required
|
||||
autoComplete={isRegister ? 'new-password' : 'current-password'}
|
||||
autoComplete={
|
||||
isRegister ? "new-password" : "current-password"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{isRegister && (
|
||||
<div>
|
||||
<label className="block text-gb-fg-t mb-1">CONFIRM PASSWORD:</label>
|
||||
<label className="block text-gb-fg-t mb-1">
|
||||
CONFIRM PASSWORD:
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
@@ -81,8 +104,16 @@ export function LoginForm() {
|
||||
</div>
|
||||
)}
|
||||
{error && <p className="text-gb-red text-sm">ERR: {error}</p>}
|
||||
<button type="submit" className="terminal-button w-full" disabled={isLoading}>
|
||||
{isLoading ? '[PROCESSING...]' : isRegister ? '[REGISTER]' : '[LOGIN]'}
|
||||
<button
|
||||
type="submit"
|
||||
className="terminal-button w-full"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading
|
||||
? "[PROCESSING...]"
|
||||
: isRegister
|
||||
? "[REGISTER]"
|
||||
: "[LOGIN]"}
|
||||
</button>
|
||||
</form>
|
||||
{!isRegister && (
|
||||
@@ -91,28 +122,29 @@ export function LoginForm() {
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
try {
|
||||
// Get challenge from server
|
||||
const resp = await fetch('/api/v1/auth/webauthn/login/begin', { method: 'POST', credentials: 'include' });
|
||||
if (!resp.ok) throw new Error('Passkey login not available');
|
||||
const resp = await fetch(
|
||||
"/api/v1/auth/webauthn/login/begin",
|
||||
{ method: "POST", credentials: "include" },
|
||||
);
|
||||
if (!resp.ok)
|
||||
throw new Error("Passkey login not available");
|
||||
const options = await resp.json();
|
||||
|
||||
// Use WebAuthn API
|
||||
const credential = await navigator.credentials.get({ publicKey: options });
|
||||
if (!credential) return;
|
||||
|
||||
// Send to server
|
||||
const finishResp = await fetch('/api/v1/auth/webauthn/login/finish', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(credential),
|
||||
const credential = await navigator.credentials.get({
|
||||
publicKey: options,
|
||||
});
|
||||
|
||||
if (finishResp.ok) {
|
||||
navigate('/');
|
||||
}
|
||||
if (!credential) return;
|
||||
const finishResp = await fetch(
|
||||
"/api/v1/auth/webauthn/login/finish",
|
||||
{
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(credential),
|
||||
},
|
||||
);
|
||||
if (finishResp.ok) navigate("/");
|
||||
} catch (err) {
|
||||
console.error('Passkey login failed:', err);
|
||||
console.error("Passkey login failed:", err);
|
||||
}
|
||||
}}
|
||||
className="terminal-button w-full border-gb-aqua text-gb-aqua"
|
||||
@@ -130,12 +162,15 @@ export function LoginForm() {
|
||||
}}
|
||||
className="text-gb-blue hover:text-gb-aqua text-sm"
|
||||
>
|
||||
{isRegister ? '[BACK TO LOGIN]' : '[CREATE ACCOUNT]'}
|
||||
{isRegister ? "[BACK TO LOGIN]" : "[CREATE ACCOUNT]"}
|
||||
</button>
|
||||
</div>
|
||||
{!isRegister && (
|
||||
<p className="text-gb-fg-f text-xs mt-4 text-center">
|
||||
Use Link component: <Link to="/" className="text-gb-blue hover:text-gb-aqua">[HOME]</Link>
|
||||
Use Link component:{" "}
|
||||
<Link to="/" className="text-gb-blue hover:text-gb-aqua">
|
||||
[HOME]
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user