yoinkkk/ExcaliDash
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add admin password reset flow

Browse Source
This commit is contained in:
Zimeng Xiong
2026-02-06 14:11:13 -08:00
parent e4941ad77f
commit 1e617025df
23 changed files with 4205 additions and 698 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Admin.tsx
+761
View File
File diff suppressed because it is too large Load Diff
frontend/src/pages/Dashboard.tsx
+11 -10
View File
@@ -674,12 +674,12 @@ export const Dashboard: React.FC = () => {
</DragOverlayPortal>
)}
<h1 className="text-5xl mb-8 text-slate-900 dark:text-white pl-1" style={{ fontFamily: 'Excalifont' }}>
<h1 className="text-3xl sm:text-5xl mb-6 sm:mb-8 text-slate-900 dark:text-white pl-1" style={{ fontFamily: 'Excalifont' }}>
{viewTitle}
</h1>
<div className="mb-8 flex flex-col xl:flex-row items-center justify-between gap-4">
<div className="flex flex-1 w-full gap-3 items-center">
<div className="flex flex-1 w-full gap-3 items-center flex-wrap">
<div className="relative flex-1 group max-w-md transition-all duration-200 focus-within:-translate-y-0.5">
<input
ref={searchInputRef}
@@ -696,7 +696,7 @@ export const Dashboard: React.FC = () => {
</kbd>
</div>
</div>
<div className="flex items-center gap-2 p-1">
<div className="flex items-center gap-2 p-1 flex-wrap">
<div className="relative">
<button
onClick={(e) => {
@@ -704,7 +704,7 @@ export const Dashboard: React.FC = () => {
setShowSortMenu(!showSortMenu);
}}
className={clsx(
"flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-bold transition-all border-2 border-black dark:border-neutral-700 whitespace-nowrap h-[42px] w-[180px]",
"flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-bold transition-all border-2 border-black dark:border-neutral-700 whitespace-nowrap h-[42px] w-full sm:w-[180px]",
"bg-white dark:bg-neutral-900 text-slate-700 dark:text-neutral-300 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 hover:bg-indigo-50 dark:hover:bg-indigo-900/30"
)}
>
@@ -914,11 +914,12 @@ export const Dashboard: React.FC = () => {
>
{isDraggingFile && (
<div className="absolute inset-0 z-50 bg-white/80 backdrop-blur-sm border-4 border-dashed border-indigo-400 rounded-3xl flex flex-col items-center justify-center animate-in fade-in duration-200">
<div className="bg-indigo-50 p-8 rounded-full mb-6 shadow-sm">
<Inbox size={64} className="text-indigo-600" />
<div className="bg-indigo-50 p-6 sm:p-8 rounded-full mb-5 sm:mb-6 shadow-sm">
<Inbox size={56} className="text-indigo-600 hidden sm:block" />
<Inbox size={44} className="text-indigo-600 sm:hidden" />
</div>
<h3 className="text-3xl font-bold text-slate-800 mb-2">Drop files to import</h3>
<p className="text-slate-500 text-lg max-w-md text-center">
<h3 className="text-2xl sm:text-3xl font-bold text-slate-800 mb-2 text-center px-4">Drop files to import</h3>
<p className="text-slate-500 text-base sm:text-lg max-w-sm sm:max-w-md text-center px-4">
Drop .excalidraw or .json files here to add them to
<span className="font-bold text-indigo-600 mx-1">
{viewTitle}
@@ -932,9 +933,9 @@ export const Dashboard: React.FC = () => {
<Loader2 size={32} className="animate-spin" />
</div>
) : (
<div className={clsx("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-24 transition-all duration-300", isDraggingFile && "opacity-20 blur-sm")}>
<div className={clsx("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 pb-16 sm:pb-24 transition-all duration-300", isDraggingFile && "opacity-20 blur-sm")}>
{sortedDrawings.length === 0 ? (
<div className="col-span-full flex flex-col items-center justify-center py-32 text-slate-400 dark:text-neutral-500 border-2 border-dashed border-slate-200 dark:border-neutral-700 rounded-3xl bg-slate-50/50 dark:bg-neutral-800/50">
<div className="col-span-full flex flex-col items-center justify-center py-16 sm:py-32 text-slate-400 dark:text-neutral-500 border-2 border-dashed border-slate-200 dark:border-neutral-700 rounded-3xl bg-slate-50/50 dark:bg-neutral-800/50">
<div className="w-20 h-20 bg-white dark:bg-slate-800 rounded-full shadow-sm border border-slate-100 dark:border-slate-700 flex items-center justify-center mb-6">
{isTrashView ? <Trash2 size={32} className="text-slate-300 dark:text-slate-600" /> : <Inbox size={32} className="text-slate-300 dark:text-slate-600" />}
</div>
frontend/src/pages/Login.tsx
+175 -55
View File
@@ -1,15 +1,22 @@
import React, { useEffect, useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useNavigate, Link, useSearchParams } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Logo } from '../components/Logo';
import * as api from '../api';
import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY, USER_KEY } from '../utils/impersonation';
export const Login: React.FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [newPassword, setNewPassword] = useState('');
const [confirmNewPassword, setConfirmNewPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { login, authEnabled, bootstrapRequired, isAuthenticated, loading: authLoading } = useAuth();
const { login, logout, authEnabled, bootstrapRequired, isAuthenticated, loading: authLoading, user } = useAuth();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const queryMustReset = searchParams.get('mustReset') === '1';
const mustReset = Boolean(user?.mustResetPassword) || queryMustReset;
useEffect(() => {
if (authLoading || authEnabled === null) return;
@@ -22,9 +29,10 @@ export const Login: React.FC = () => {
return;
}
if (isAuthenticated) {
if (mustReset) return;
navigate('/', { replace: true });
}
}, [authEnabled, authLoading, bootstrapRequired, isAuthenticated, navigate]);
}, [authEnabled, authLoading, bootstrapRequired, isAuthenticated, mustReset, navigate]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
@@ -33,6 +41,12 @@ export const Login: React.FC = () => {
try {
await login(email, password);
const stored = localStorage.getItem(USER_KEY);
const storedUser = stored ? (JSON.parse(stored) as { mustResetPassword?: boolean } | null) : null;
if (storedUser?.mustResetPassword) {
setPassword('');
return;
}
navigate('/');
} catch (err: unknown) {
const message = err instanceof Error ? err.message : 'Failed to login';
@@ -42,73 +56,163 @@ export const Login: React.FC = () => {
}
};
const handleMustReset = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
if (!newPassword || !confirmNewPassword) {
setError('Please enter and confirm a new password');
return;
}
if (newPassword.length < 8) {
setError('New password must be at least 8 characters long');
return;
}
if (newPassword !== confirmNewPassword) {
setError('New passwords do not match');
return;
}
setLoading(true);
try {
const response = await api.api.post<{
user: { id: string; email: string; name: string; role?: string; mustResetPassword?: boolean };
accessToken: string;
refreshToken: string;
}>('/auth/must-reset-password', { newPassword });
localStorage.setItem(ACCESS_TOKEN_KEY, response.data.accessToken);
localStorage.setItem(REFRESH_TOKEN_KEY, response.data.refreshToken);
localStorage.setItem(USER_KEY, JSON.stringify(response.data.user));
window.location.href = '/';
} catch (err: unknown) {
let message = 'Failed to reset password';
if (api.isAxiosError(err)) {
message = err.response?.data?.message || err.response?.data?.error || message;
}
setError(message);
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
<div className="max-w-md w-full space-y-8">
<div className="text-center">
<Logo className="mx-auto h-12 w-auto" />
<h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
Sign in to your account
{mustReset ? 'Reset your password' : 'Sign in to your account'}
</h2>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
Or{' '}
<Link
to="/register"
className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
>
create a new account
</Link>
</p>
{!mustReset ? (
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
Or{' '}
<Link
to="/register"
className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
>
create a new account
</Link>
</p>
) : (
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
Your admin requires you to set a new password before using ExcaliDash.
</p>
)}
</div>
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<form className="mt-8 space-y-6" onSubmit={mustReset ? handleMustReset : handleSubmit}>
{error && (
<div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<div className="text-sm text-red-800 dark:text-red-200">{error}</div>
</div>
)}
<div className="rounded-md shadow-sm -space-y-px">
<div>
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label htmlFor="password" className="sr-only">
Password
</label>
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{!mustReset ? (
<>
<div>
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label htmlFor="password" className="sr-only">
Password
</label>
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
</>
) : (
<>
<div>
<label htmlFor="newPassword" className="sr-only">
New password
</label>
<input
id="newPassword"
name="newPassword"
type="password"
autoComplete="new-password"
required
minLength={8}
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="New password (min 8 characters)"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
/>
</div>
<div>
<label htmlFor="confirmNewPassword" className="sr-only">
Confirm new password
</label>
<input
id="confirmNewPassword"
name="confirmNewPassword"
type="password"
autoComplete="new-password"
required
minLength={8}
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Confirm new password"
value={confirmNewPassword}
onChange={(e) => setConfirmNewPassword(e.target.value)}
/>
</div>
</>
)}
</div>
<div className="flex justify-end">
<Link
to="/reset-password"
className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
>
Forgot your password?
</Link>
</div>
{!mustReset && (
<div className="flex justify-end">
<Link
to="/reset-password"
className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
>
Forgot your password?
</Link>
</div>
)}
<div>
<button
@@ -116,9 +220,25 @@ export const Login: React.FC = () => {
disabled={loading}
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Signing in...' : 'Sign in'}
{mustReset ? (loading ? 'Updating...' : 'Set new password') : (loading ? 'Signing in...' : 'Sign in')}
</button>
</div>
{mustReset && (
<div className="text-center">
<button
type="button"
onClick={() => {
setNewPassword('');
setConfirmNewPassword('');
logout();
}}
className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
>
Sign in as a different user
</button>
</div>
)}
</form>
</div>
</div>
frontend/src/pages/PasswordResetRequest.tsx
+13 -95
View File
@@ -1,112 +1,30 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { Logo } from '../components/Logo';
const API_URL = import.meta.env.VITE_API_URL || "/api";
export const PasswordResetRequest: React.FC = () => {
const [email, setEmail] = useState('');
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
setLoading(true);
try {
await axios.post(`${API_URL}/auth/password-reset-request`, { email });
setSuccess(true);
} catch (err: unknown) {
let message = 'Failed to send reset email';
if (axios.isAxiosError(err)) {
if (err.response?.status === 404) {
message = 'Password reset feature is not enabled on this server';
} else if (err.response?.data?.message) {
message = err.response.data.message;
} else if (err.message) {
message = err.message;
}
} else if (err instanceof Error) {
message = err.message;
}
setError(message);
} finally {
setLoading(false);
}
};
if (success) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
<div className="max-w-md w-full space-y-8">
<div className="text-center">
<Logo className="mx-auto h-12 w-auto" />
<h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
Check your email
</h2>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
If an account with that email exists, a password reset link has been sent.
</p>
<div className="mt-6">
<Link
to="/login"
className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
>
Back to login
</Link>
</div>
</div>
</div>
</div>
);
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
<div className="max-w-md w-full space-y-8">
<div className="text-center">
<Logo className="mx-auto h-12 w-auto" />
<h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
Reset your password
Password help
</h2>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
Enter your email address and we'll send you a link to reset your password.
This server does not send password reset emails.
</p>
</div>
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
{error && (
<div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<div className="text-sm text-red-800 dark:text-red-200">{error}</div>
<div className="mt-8 space-y-6">
<div className="rounded-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 text-left space-y-3">
<div className="text-sm text-gray-700 dark:text-gray-200">
Contact your administrator and ask them to generate a temporary password from the Admin dashboard.
</div>
)}
<div>
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<button
type="submit"
disabled={loading}
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Sending...' : 'Send reset link'}
</button>
<div className="text-xs text-gray-600 dark:text-gray-300">
If you are an admin and you’re locked out, run:
</div>
<pre className="text-xs bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md p-3 overflow-x-auto">
cd backend && node scripts/admin-recover.cjs --identifier you@example.com --generate --activate --disable-login-rate-limit
</pre>
</div>
<div className="text-center">
@@ -117,7 +35,7 @@ export const PasswordResetRequest: React.FC = () => {
Back to login
</Link>
</div>
</form>
</div>
</div>
</div>
);
frontend/src/pages/Profile.tsx
+185 -41
View File
@@ -5,11 +5,13 @@ import { useAuth } from '../context/AuthContext';
import * as api from '../api';
import type { Collection } from '../types';
import { User, Lock, Save, X, Shield } from 'lucide-react';
import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY, USER_KEY } from '../utils/impersonation';
export const Profile: React.FC = () => {
const { user: authUser, logout, authEnabled } = useAuth();
const navigate = useNavigate();
const isAdmin = authUser?.role === 'ADMIN';
const mustResetPassword = Boolean(authUser?.mustResetPassword);
const [collections, setCollections] = useState<Collection[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
@@ -20,6 +22,9 @@ export const Profile: React.FC = () => {
// User info state
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [showEmailForm, setShowEmailForm] = useState(false);
const [emailCurrentPassword, setEmailCurrentPassword] = useState('');
const [emailLoading, setEmailLoading] = useState(false);
// Password change state
const [currentPassword, setCurrentPassword] = useState('');
@@ -56,6 +61,12 @@ export const Profile: React.FC = () => {
fetchData();
}, [authEnabled, authUser, isAdmin, navigate]);
useEffect(() => {
if (mustResetPassword) {
setShowPasswordForm(true);
}
}, [mustResetPassword]);
const handleToggleRegistration = async () => {
if (!isAdmin || registrationEnabled === null) return;
@@ -107,6 +118,10 @@ export const Profile: React.FC = () => {
};
const handleUpdateName = async () => {
if (mustResetPassword) {
setError('You must reset your password before updating your profile');
return;
}
if (!name.trim()) {
setError('Name cannot be empty');
return;
@@ -191,6 +206,58 @@ export const Profile: React.FC = () => {
}
};
const handleUpdateEmail = async () => {
if (mustResetPassword) {
setError('You must reset your password before changing your email');
return;
}
if (!email.trim()) {
setError('Email cannot be empty');
return;
}
if (!emailCurrentPassword) {
setError('Current password is required to change email');
return;
}
setEmailLoading(true);
setError('');
setSuccess('');
try {
const response = await api.api.put<{
user: { id: string; email: string; name: string; createdAt: string; updatedAt: string };
accessToken: string;
refreshToken: string;
}>('/auth/email', {
email: email.trim(),
currentPassword: emailCurrentPassword,
});
localStorage.setItem(ACCESS_TOKEN_KEY, response.data.accessToken);
localStorage.setItem(REFRESH_TOKEN_KEY, response.data.refreshToken);
localStorage.setItem(USER_KEY, JSON.stringify(response.data.user));
setSuccess('Email updated successfully');
setShowEmailForm(false);
setEmailCurrentPassword('');
setTimeout(() => window.location.reload(), 500);
} catch (err: unknown) {
let message = 'Failed to update email';
if (api.isAxiosError(err)) {
if (err.response?.data?.message) {
message = err.response.data.message;
} else if (err.response?.data?.error) {
message = err.response.data.error;
}
}
setError(message);
} finally {
setEmailLoading(false);
}
};
return (
<Layout
collections={collections}
@@ -200,7 +267,7 @@ export const Profile: React.FC = () => {
onEditCollection={handleEditCollection}
onDeleteCollection={handleDeleteCollection}
>
<h1 className="text-5xl mb-8 text-slate-900 dark:text-white pl-1" style={{ fontFamily: 'Excalifont' }}>
<h1 className="text-3xl sm:text-5xl mb-6 sm:mb-8 text-slate-900 dark:text-white pl-1" style={{ fontFamily: 'Excalifont' }}>
Profile
</h1>
@@ -226,20 +293,95 @@ export const Profile: React.FC = () => {
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Personal Information</h2>
</div>
<div className="space-y-4">
<div>
<label htmlFor="email" className="block text-sm font-bold text-slate-700 dark:text-neutral-300 mb-2">
Email Address
</label>
<input
id="email"
type="email"
value={email}
disabled
className="w-full px-4 py-3 bg-slate-50 dark:bg-neutral-800 border-2 border-slate-200 dark:border-neutral-700 rounded-xl text-slate-600 dark:text-neutral-400 cursor-not-allowed"
/>
<p className="mt-1 text-xs text-slate-500 dark:text-neutral-500">Email cannot be changed</p>
</div>
{mustResetPassword && (
<div className="p-4 bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-200 dark:border-amber-800 rounded-xl">
<p className="text-amber-900 dark:text-amber-200 font-bold">
Password reset required
</p>
<p className="text-sm text-amber-800 dark:text-amber-200/80 font-medium mt-1">
Change your password below before using ExcaliDash.
</p>
</div>
)}
<div className="space-y-4">
<div>
<label htmlFor="email" className="block text-sm font-bold text-slate-700 dark:text-neutral-300 mb-2">
Email Address
</label>
<div className="flex gap-3">
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
disabled={!showEmailForm}
className={
showEmailForm
? "flex-1 px-4 py-3 bg-white dark:bg-neutral-800 border-2 border-black dark:border-neutral-700 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 font-medium"
: "flex-1 px-4 py-3 bg-slate-50 dark:bg-neutral-800 border-2 border-slate-200 dark:border-neutral-700 rounded-xl text-slate-600 dark:text-neutral-400 cursor-not-allowed"
}
/>
{!showEmailForm && (
<button
onClick={() => {
setShowEmailForm(true);
setEmailCurrentPassword('');
setError('');
setSuccess('');
}}
disabled={mustResetPassword}
className="px-6 py-3 bg-white dark:bg-neutral-800 text-slate-700 dark:text-neutral-300 font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200"
>
Change
</button>
)}
</div>
{showEmailForm && (
<div className="mt-4 space-y-3">
<div>
<label htmlFor="emailCurrentPassword" className="block text-sm font-bold text-slate-700 dark:text-neutral-300 mb-2">
Current Password
</label>
<input
id="emailCurrentPassword"
type="password"
value={emailCurrentPassword}
onChange={(e) => setEmailCurrentPassword(e.target.value)}
className="w-full px-4 py-3 bg-white dark:bg-neutral-800 border-2 border-black dark:border-neutral-700 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 font-medium"
placeholder="Enter current password"
/>
</div>
<div className="flex gap-3">
<button
onClick={handleUpdateEmail}
disabled={
emailLoading ||
!email.trim() ||
!emailCurrentPassword ||
email.trim() === authUser?.email
}
className="flex-1 px-6 py-3 bg-indigo-600 dark:bg-indigo-500 text-white font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
>
{emailLoading ? 'Saving...' : 'Save Email'}
</button>
<button
onClick={() => {
setShowEmailForm(false);
setEmail(authUser?.email || '');
setEmailCurrentPassword('');
setError('');
}}
disabled={emailLoading}
className="px-6 py-3 bg-white dark:bg-neutral-800 text-slate-700 dark:text-neutral-300 font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
>
<X size={18} />
Cancel
</button>
</div>
</div>
)}
</div>
<div>
<label htmlFor="name" className="block text-sm font-bold text-slate-700 dark:text-neutral-300 mb-2">
@@ -254,14 +396,14 @@ export const Profile: React.FC = () => {
className="flex-1 px-4 py-3 bg-white dark:bg-neutral-800 border-2 border-black dark:border-neutral-700 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 font-medium"
placeholder="Your name"
/>
<button
onClick={handleUpdateName}
disabled={loading || !name.trim() || name === authUser?.name}
className="px-6 py-3 bg-indigo-600 dark:bg-indigo-500 text-white font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:disabled:hover:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] flex items-center gap-2"
>
<Save size={18} />
Save
</button>
<button
onClick={handleUpdateName}
disabled={mustResetPassword || loading || !name.trim() || name === authUser?.name}
className="px-6 py-3 bg-indigo-600 dark:bg-indigo-500 text-white font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:disabled:hover:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] flex items-center gap-2"
>
<Save size={18} />
Save
</button>
</div>
</div>
</div>
@@ -312,7 +454,7 @@ export const Profile: React.FC = () => {
</div>
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Change Password</h2>
</div>
{!showPasswordForm && (
{!showPasswordForm && !mustResetPassword && (
<button
onClick={() => setShowPasswordForm(true)}
className="px-4 py-2 bg-rose-600 dark:bg-rose-500 text-white font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200"
@@ -374,23 +516,25 @@ export const Profile: React.FC = () => {
>
{loading ? 'Changing...' : 'Change Password'}
</button>
<button
onClick={() => {
setShowPasswordForm(false);
setCurrentPassword('');
setNewPassword('');
setConfirmPassword('');
setError('');
}}
disabled={loading}
className="px-6 py-3 bg-white dark:bg-neutral-800 text-slate-700 dark:text-neutral-300 font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
>
<X size={18} />
Cancel
</button>
</div>
</div>
)}
{!mustResetPassword && (
<button
onClick={() => {
setShowPasswordForm(false);
setCurrentPassword('');
setNewPassword('');
setConfirmPassword('');
setError('');
}}
disabled={loading}
className="px-6 py-3 bg-white dark:bg-neutral-800 text-slate-700 dark:text-neutral-300 font-bold rounded-xl border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
>
<X size={18} />
Cancel
</button>
)}
</div>
</div>
)}
</div>
</div>
</Layout>
frontend/src/pages/Settings.tsx
+398 -217
View File
File diff suppressed because it is too large Load Diff