Compare commits
No commits in common. "dc0b46fbd9513de64e4055c634e4834626e5047c" and "1ed1576101f976bdef996f61a6eee2b368dfa415" have entirely different histories.
dc0b46fbd9
...
1ed1576101
9
.gitignore
vendored
9
.gitignore
vendored
@ -26,12 +26,3 @@ dist-ssr
|
||||
# vite-plugin-pwa dev output
|
||||
dev-dist
|
||||
.agents/
|
||||
|
||||
# Testing / E2E / API tests
|
||||
.env.e2e*
|
||||
e2e/
|
||||
api-tests/
|
||||
playwright-report/
|
||||
test-results/
|
||||
coverage/
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ This is a Progressive Web App (Pwa) built for the Krishna Sales team.
|
||||
- Logout now calls `POST /usr/logout` to revoke the session and cookie on the server (retried if the call fails). Sign-out and sign-in in one tab are reflected in the others; a different user signing in elsewhere reloads the tab.
|
||||
- One shared session for all four workflow clients (`src/api/session.ts`) replaces the per-client token copies. Existing sign-ins are cleared once, so everyone logs in again after this update.
|
||||
- Password policy: live rules checklist, forced change on login when the password is expired, temporary or predates the policy, forgot / reset password, and change password.
|
||||
- Password expiry warning & enforcement: Evaluates `user.password_status` (`warn`, `days_left`, `must_change`). Shows a top banner in `ConsoleLayout` with "Change Password" and "Later" skip options during the warning window; automatically launches the mandatory password change dialog when the password has expired.
|
||||
- "Password change due" banner when the password is about to expire (from `user.password_status` at login), with a **Change now** shortcut.
|
||||
- Note: the refresh cookie is only set when the app and the API share one origin (`VITE_ZINO_API_URL` = `SAME_ORIGIN`, or the app's own host). On a different origin the server returns the token but no cookie, and the session ends when the access token expires.
|
||||
|
||||
**Maintenance**
|
||||
|
||||
@ -19,9 +19,4 @@ export default defineConfig([
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
{
|
||||
// Playwright fixtures take a `use` callback that the React hooks rule mistakes for a hook.
|
||||
files: ['e2e/**/*.ts'],
|
||||
rules: { 'react-hooks/rules-of-hooks': 'off' },
|
||||
},
|
||||
])
|
||||
|
||||
67
package-lock.json
generated
67
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "krishna-sales-pwa",
|
||||
"version": "1.0.4",
|
||||
"version": "1.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "krishna-sales-pwa",
|
||||
"version": "1.0.4",
|
||||
"version": "1.1.0",
|
||||
"dependencies": {
|
||||
"@react-google-maps/api": "^2.20.8",
|
||||
"jspdf": "^4.2.1",
|
||||
@ -20,14 +20,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@playwright/test": "^1.65.0",
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"@types/node": "^24.13.2",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vite-pwa/assets-generator": "^1.0.2",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"dotenv": "^18.0.9",
|
||||
"eslint": "^10.6.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.3",
|
||||
@ -2311,22 +2309,6 @@
|
||||
"url": "https://github.com/sponsors/Boshen"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.65.0",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.65.0.tgz",
|
||||
"integrity": "sha512-iGURLGuKDLakSEl7Pgfv8h7f+XLT+V861Wfhz0zlEl5nyFuKUopdkFBPKqTllTUp06aOwPuH8iuUEb3yp3MpbQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright": "1.65.0"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/@quansync/fs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@quansync/fs/-/fs-1.0.0.tgz",
|
||||
@ -4734,22 +4716,6 @@
|
||||
"@types/trusted-types": "^2.0.7"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv": {
|
||||
"version": "18.0.9",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-18.0.9.tgz",
|
||||
"integrity": "sha512-3fVOW4cB02R066PUSwn8O4TJyz9NckQl7F81blIbaq9jKBm2tSmOKky7ZHIXzGvkVPXCSn6jkpziBPZdGFs8Tw==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"bin": {
|
||||
"dotenv": "dist/index.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://dotenvx.com"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
@ -7141,35 +7107,6 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.65.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.65.0.tgz",
|
||||
"integrity": "sha512-F3AMWcR44qMBt4kq+6Kb6mX7bjGXshktKFOPULd7reED6ZJWevjbNRqysP7q+AATE9kdPEZBibex1BYsvpVoeA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.65.0"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.65.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.65.0.tgz",
|
||||
"integrity": "sha512-vNSKgH6YqtN7cdT/L334zo0a+YwkrpicyrHJlWWPIm/Q+Nn2SWInil01oT0mbu96U4GgoRtCYQD9CzJQgju+lA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/possible-typed-array-names": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
|
||||
|
||||
10
package.json
10
package.json
@ -8,13 +8,7 @@
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"generate-pwa-assets": "pwa-assets-generator",
|
||||
"e2e": "playwright test -c e2e/playwright.config.ts",
|
||||
"e2e:mocked": "playwright test -c e2e/playwright.config.ts --project=mocked",
|
||||
"e2e:live": "playwright test -c e2e/playwright.config.ts --project=setup --project=live",
|
||||
"e2e:report": "playwright show-report e2e/playwright-report",
|
||||
"e2e:typecheck": "tsc -p e2e --noEmit",
|
||||
"api:test": "node api-tests/run.mjs"
|
||||
"generate-pwa-assets": "pwa-assets-generator"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-google-maps/api": "^2.20.8",
|
||||
@ -29,14 +23,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@playwright/test": "^1.65.0",
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"@types/node": "^24.13.2",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vite-pwa/assets-generator": "^1.0.2",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"dotenv": "^18.0.9",
|
||||
"eslint": "^10.6.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.3",
|
||||
|
||||
@ -88,7 +88,7 @@ export async function resetPassword(resetToken: string, newPassword: string): Pr
|
||||
* On 200 success, the backend bumps password_changed_at and invalidates the session JWT.
|
||||
*/
|
||||
export async function changePassword(
|
||||
currentPassword: string | undefined | null,
|
||||
currentPassword: string,
|
||||
newPassword: string,
|
||||
token?: string | null
|
||||
): Promise<{ message: string }> {
|
||||
@ -97,13 +97,6 @@ export async function changePassword(
|
||||
throw new AuthApiError('You must be signed in to change your password', 401);
|
||||
}
|
||||
|
||||
const payload: Record<string, string> = {
|
||||
new_password: newPassword,
|
||||
};
|
||||
if (currentPassword) {
|
||||
payload.current_password = currentPassword;
|
||||
}
|
||||
|
||||
const res = await fetch(`${BASE_URL}/usr/me/password`, {
|
||||
method: 'POST',
|
||||
credentials: AUTH_CREDENTIALS,
|
||||
@ -111,7 +104,10 @@ export async function changePassword(
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
body: JSON.stringify({
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword,
|
||||
}),
|
||||
});
|
||||
|
||||
const body = await res.json().catch(() => ({}));
|
||||
|
||||
@ -36,7 +36,6 @@ export async function loginAll(email: string, password: string, orgId?: string)
|
||||
try {
|
||||
const me = await orderBookingClient.getMe();
|
||||
res.user = { ...res.user, ...me };
|
||||
ALL.forEach((c) => c.setUser(res.user));
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch user profile:', e);
|
||||
}
|
||||
@ -56,7 +55,6 @@ export async function completePasswordChangeAll(
|
||||
try {
|
||||
const me = await orderBookingClient.getMe();
|
||||
res.user = { ...res.user, ...me };
|
||||
ALL.forEach((c) => c.setUser(res.user));
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch user profile:', e);
|
||||
}
|
||||
|
||||
@ -10,13 +10,6 @@ export interface ApiError {
|
||||
data?: any;
|
||||
}
|
||||
|
||||
export interface PasswordStatus {
|
||||
must_change?: boolean;
|
||||
expires_at?: string;
|
||||
days_left?: number;
|
||||
warn?: boolean;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
org_id: string;
|
||||
@ -25,8 +18,6 @@ export interface User {
|
||||
roles: string[];
|
||||
groups: string[];
|
||||
is_admin?: boolean;
|
||||
provider?: string;
|
||||
password_status?: PasswordStatus;
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useState, type ReactNode, useEffect } from 'react';
|
||||
import { loginAll, logoutAll, currentToken, orderBookingClient, completePasswordChangeAll } from '../api/clients';
|
||||
import { AuthCtx, type AuthValue } from './context';
|
||||
import type { PasswordStatus } from '../api/types';
|
||||
import { AuthCtx, type AuthValue, type PasswordStatus } from './context';
|
||||
import { sessionClient } from '../api/session';
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
@ -18,7 +17,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
});
|
||||
|
||||
const [passwordStatus, setPasswordStatus] = useState<PasswordStatus | null>(() => {
|
||||
return orderBookingClient.currentUser()?.password_status ?? null;
|
||||
try {
|
||||
const raw = localStorage.getItem('krishna_sales_mobile_password_status');
|
||||
return raw ? (JSON.parse(raw) as PasswordStatus) : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
// Keep React in step with the session: refresh/idle expiry, a sign-out or a
|
||||
@ -44,11 +48,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (authed && (!isAdmin || roles.length === 0 || !passwordStatus)) {
|
||||
if (authed && (!isAdmin || roles.length === 0)) {
|
||||
orderBookingClient.getMe().then(me => {
|
||||
if (me.is_admin) setIsAdmin(true);
|
||||
if (me.roles) setRoles(me.roles);
|
||||
if (me.password_status) setPasswordStatus(me.password_status);
|
||||
}).catch(console.error);
|
||||
}
|
||||
}, [authed]);
|
||||
@ -65,11 +68,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
localStorage.setItem('krishna_sales_mobile_is_admin', userIsAdmin ? 'true' : 'false');
|
||||
setRoles(userRoles);
|
||||
localStorage.setItem('krishna_sales_mobile_roles', JSON.stringify(userRoles));
|
||||
if (res.user?.password_status) {
|
||||
setPasswordStatus(res.user.password_status);
|
||||
} else {
|
||||
setPasswordStatus(null);
|
||||
}
|
||||
// Only a due/expiring password is worth remembering; a fresh login replaces it.
|
||||
const status: PasswordStatus | null = res.user?.password_status?.warn ? res.user.password_status : null;
|
||||
setPasswordStatus(status);
|
||||
if (status) localStorage.setItem('krishna_sales_mobile_password_status', JSON.stringify(status));
|
||||
else localStorage.removeItem('krishna_sales_mobile_password_status');
|
||||
};
|
||||
|
||||
const value: AuthValue = {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
import type { PasswordStatus } from '../api/types';
|
||||
|
||||
export interface PasswordChangeRequiredInfo {
|
||||
message: string;
|
||||
@ -7,12 +6,19 @@ export interface PasswordChangeRequiredInfo {
|
||||
rules?: string[];
|
||||
}
|
||||
|
||||
/** `user.password_status` from /usr/login: set when a password change is coming due. */
|
||||
export interface PasswordStatus {
|
||||
warn?: boolean;
|
||||
days_left?: number;
|
||||
change_required_from?: string;
|
||||
}
|
||||
|
||||
export interface AuthValue {
|
||||
authed: boolean;
|
||||
passwordStatus: PasswordStatus | null;
|
||||
isAdmin: boolean;
|
||||
roles: string[];
|
||||
userEmail: string | null;
|
||||
passwordStatus: PasswordStatus | null;
|
||||
login: (email: string, password: string, orgId?: string) => Promise<void>;
|
||||
completePasswordChange: (email: string, currentPassword: string, newPassword: string, orgId?: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Card } from '../reusable';
|
||||
import logo from '../../assets/logo.png';
|
||||
|
||||
/** Shared auth-page chrome: curved green background, brand header and a card. */
|
||||
export function AuthShell({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden flex flex-col items-center justify-center gap-6 p-4 bg-app">
|
||||
{/* Decorative curves */}
|
||||
<svg
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute top-0 left-0 w-[70%] max-w-[520px] h-auto"
|
||||
viewBox="0 0 400 220"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="wave-top" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stopColor="#7fd49a" stopOpacity="0.85" />
|
||||
<stop offset="1" stopColor="#d9f3e2" stopOpacity="0.2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0 0H400C340 40 300 120 190 150C110 172 50 150 0 210Z" fill="url(#wave-top)" />
|
||||
<path d="M0 0H250C200 30 150 70 90 90C50 103 20 100 0 130Z" fill="#9adcae" fillOpacity="0.55" />
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute bottom-0 left-0 w-full h-auto"
|
||||
viewBox="0 0 400 180"
|
||||
preserveAspectRatio="none"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="wave-bottom" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stopColor="#d9f3e2" stopOpacity="0.4" />
|
||||
<stop offset="1" stopColor="#6cc88b" stopOpacity="0.8" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0 80C80 30 160 40 240 80C310 115 360 90 400 50V180H0Z" fill="url(#wave-bottom)" />
|
||||
<path d="M0 130C90 100 170 110 250 135C320 157 370 140 400 115V180H0Z" fill="#4fb374" fillOpacity="0.55" />
|
||||
</svg>
|
||||
|
||||
<div className="relative flex flex-col gap-2 items-center text-center">
|
||||
<img src={logo} alt="Krishna Sales Logo" className="h-20 w-20 rounded-full object-contain shadow-md" />
|
||||
<h1 className="m-0 text-3xl font-extrabold text-emerald-900 tracking-[-0.02em]">Krishna Sales</h1>
|
||||
</div>
|
||||
<Card className="relative w-full max-w-[420px] rounded-3xl shadow-xl shadow-emerald-900/10 border-white/60 bg-white/85 backdrop-blur p-6 sm:p-8">
|
||||
<div className="mb-5">
|
||||
<h2 className="m-0 text-2xl font-extrabold text-emerald-950">{title}</h2>
|
||||
{subtitle && <p className="text-sm text-slate-600 mt-1 leading-relaxed">{subtitle}</p>}
|
||||
</div>
|
||||
{children}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -5,7 +5,6 @@ import { Button } from '../buttons/Button';
|
||||
import { PasswordRulesChecklist } from './PasswordRulesChecklist';
|
||||
import { changePassword } from '../../api/auth';
|
||||
import { usePasswordPolicy } from '../../hooks/usePasswordPolicy';
|
||||
import { cn } from '../../lib/cn';
|
||||
import {
|
||||
passwordMeetsPolicy,
|
||||
passwordTooLong,
|
||||
@ -18,7 +17,6 @@ interface ChangePasswordModalProps {
|
||||
userEmail?: string | null;
|
||||
userName?: string | null;
|
||||
onSuccessLogout: () => void;
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
export function ChangePasswordModal({
|
||||
@ -27,7 +25,6 @@ export function ChangePasswordModal({
|
||||
userEmail,
|
||||
userName,
|
||||
onSuccessLogout,
|
||||
required = false,
|
||||
}: ChangePasswordModalProps) {
|
||||
const policy = usePasswordPolicy(open);
|
||||
const [currentPassword, setCurrentPassword] = useState('');
|
||||
@ -37,12 +34,6 @@ export function ChangePasswordModal({
|
||||
const [showNew, setShowNew] = useState(false);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
|
||||
const [fieldErrors, setFieldErrors] = useState<{
|
||||
current?: boolean;
|
||||
new?: boolean;
|
||||
confirm?: boolean;
|
||||
}>({});
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [done, setDone] = useState(false);
|
||||
@ -52,7 +43,6 @@ export function ChangePasswordModal({
|
||||
setCurrentPassword('');
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setFieldErrors({});
|
||||
setError(null);
|
||||
onClose();
|
||||
};
|
||||
@ -60,61 +50,35 @@ export function ChangePasswordModal({
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setFieldErrors({});
|
||||
|
||||
const errors: { current?: boolean; new?: boolean; confirm?: boolean } = {};
|
||||
|
||||
if (!required && !currentPassword) {
|
||||
errors.current = true;
|
||||
}
|
||||
if (!newPassword) {
|
||||
errors.new = true;
|
||||
}
|
||||
if (!confirmPassword) {
|
||||
errors.confirm = true;
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
setFieldErrors(errors);
|
||||
if (!required && errors.current) {
|
||||
setError('Current password is required.');
|
||||
} else if (errors.new && errors.confirm) {
|
||||
setError('Please enter and confirm your new password.');
|
||||
} else if (errors.new) {
|
||||
setError('New password is required.');
|
||||
} else {
|
||||
setError('Please confirm your new password.');
|
||||
}
|
||||
if (!currentPassword || !newPassword || !confirmPassword) {
|
||||
setError('All fields are required.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!passwordMeetsPolicy(policy, newPassword, { email: userEmail, name: userName })) {
|
||||
setFieldErrors({ new: true });
|
||||
setError('New password does not meet all of the password requirements.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordTooLong(newPassword)) {
|
||||
setFieldErrors({ new: true });
|
||||
setError(`New password must be at most ${PASSWORD_MAX_CHARS} characters.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setFieldErrors({ confirm: true });
|
||||
setError('New passwords do not match.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!required && currentPassword && newPassword === currentPassword) {
|
||||
setFieldErrors({ new: true });
|
||||
if (newPassword === currentPassword) {
|
||||
setError('New password must be different from your current password.');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await changePassword(required ? undefined : currentPassword, newPassword);
|
||||
await changePassword(currentPassword, newPassword);
|
||||
setDone(true);
|
||||
setTimeout(() => {
|
||||
onSuccessLogout();
|
||||
@ -130,58 +94,43 @@ export function ChangePasswordModal({
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
closable={!required}
|
||||
width="sm"
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
<Lock className="text-emerald-600 size-5" />
|
||||
<span>{required ? 'Password Expired' : 'Change Password'}</span>
|
||||
<span>Change Password</span>
|
||||
</div>
|
||||
}
|
||||
subtitle={
|
||||
required
|
||||
? 'Your password has expired. Please set a new password to continue.'
|
||||
: "Update your account password. You'll need to sign in again after."
|
||||
}
|
||||
subtitle="Update your account password. You'll need to sign in again after."
|
||||
>
|
||||
<form noValidate onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
{/* Current Password — only required for self-service change; hidden when must_change is active */}
|
||||
{!required && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs font-semibold text-slate-700">
|
||||
Current password <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
type={showCurrent ? 'text' : 'password'}
|
||||
autoComplete="current-password"
|
||||
value={currentPassword}
|
||||
onChange={(e) => {
|
||||
setCurrentPassword(e.target.value);
|
||||
if (fieldErrors.current) setFieldErrors((prev) => ({ ...prev, current: false }));
|
||||
setError(null);
|
||||
}}
|
||||
disabled={submitting || done}
|
||||
className={cn(
|
||||
'h-[42px] w-full px-3 pr-10 text-sm rounded-lg outline-none transition-all',
|
||||
fieldErrors.current
|
||||
? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400 focus:border-rose-500'
|
||||
: 'border border-slate-200 bg-slate-50/50 text-slate-800 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500'
|
||||
)}
|
||||
placeholder="Enter current password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCurrent((s) => !s)}
|
||||
disabled={submitting || done}
|
||||
tabIndex={-1}
|
||||
className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
|
||||
>
|
||||
{showCurrent ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
{/* Current Password */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs font-semibold text-slate-700">
|
||||
Current password <span className="text-rose-500">*</span>
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
type={showCurrent ? 'text' : 'password'}
|
||||
autoComplete="current-password"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
disabled={submitting || done}
|
||||
required
|
||||
className="h-[42px] w-full px-3 pr-10 text-sm border border-slate-200 bg-slate-50/50 rounded-lg outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all text-slate-800"
|
||||
placeholder="Enter current password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCurrent((s) => !s)}
|
||||
disabled={submitting || done}
|
||||
tabIndex={-1}
|
||||
className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
|
||||
>
|
||||
{showCurrent ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* New Password */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
@ -193,19 +142,10 @@ export function ChangePasswordModal({
|
||||
type={showNew ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
value={newPassword}
|
||||
onChange={(e) => {
|
||||
setNewPassword(e.target.value);
|
||||
if (fieldErrors.new) setFieldErrors((prev) => ({ ...prev, new: false }));
|
||||
setError(null);
|
||||
}}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
disabled={submitting || done}
|
||||
autoFocus={required}
|
||||
className={cn(
|
||||
'h-[42px] w-full px-3 pr-10 text-sm rounded-lg outline-none transition-all',
|
||||
fieldErrors.new
|
||||
? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400 focus:border-rose-500'
|
||||
: 'border border-slate-200 bg-slate-50/50 text-slate-800 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500'
|
||||
)}
|
||||
required
|
||||
className="h-[42px] w-full px-3 pr-10 text-sm border border-slate-200 bg-slate-50/50 rounded-lg outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all text-slate-800"
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
<button
|
||||
@ -237,18 +177,10 @@ export function ChangePasswordModal({
|
||||
type={showConfirm ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => {
|
||||
setConfirmPassword(e.target.value);
|
||||
if (fieldErrors.confirm) setFieldErrors((prev) => ({ ...prev, confirm: false }));
|
||||
setError(null);
|
||||
}}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
disabled={submitting || done}
|
||||
className={cn(
|
||||
'h-[42px] w-full px-3 pr-10 text-sm rounded-lg outline-none transition-all',
|
||||
fieldErrors.confirm
|
||||
? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400 focus:border-rose-500'
|
||||
: 'border border-slate-200 bg-slate-50/50 text-slate-800 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500'
|
||||
)}
|
||||
required
|
||||
className="h-[42px] w-full px-3 pr-10 text-sm border border-slate-200 bg-slate-50/50 rounded-lg outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all text-slate-800"
|
||||
placeholder="Re-enter new password"
|
||||
/>
|
||||
<button
|
||||
@ -278,25 +210,14 @@ export function ChangePasswordModal({
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end gap-2.5 mt-2">
|
||||
{required ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={submitting || done}
|
||||
onClick={onSuccessLogout}
|
||||
>
|
||||
Sign out
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={submitting || done}
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={submitting || done}
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting || done}
|
||||
|
||||
@ -1,132 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { AlertTriangle, KeyRound, Lock } from 'lucide-react';
|
||||
import type { PasswordStatus } from '../../api/types';
|
||||
|
||||
interface PasswordExpiryWarningBannerProps {
|
||||
passwordStatus?: PasswordStatus | null;
|
||||
onChangePassword: () => void;
|
||||
}
|
||||
|
||||
export function PasswordExpiryWarningBanner({
|
||||
passwordStatus,
|
||||
onChangePassword,
|
||||
}: PasswordExpiryWarningBannerProps) {
|
||||
const expiresAt = passwordStatus?.expires_at || 'session';
|
||||
const dismissKey = `krishna_sales_mobile_dismissed_pw_warn_${expiresAt}`;
|
||||
|
||||
const [dismissed, setDismissed] = useState<boolean>(() => {
|
||||
try {
|
||||
return sessionStorage.getItem(dismissKey) === 'true';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
const isExpired = Boolean(
|
||||
passwordStatus?.must_change ||
|
||||
(passwordStatus?.days_left !== undefined && passwordStatus.days_left <= 0)
|
||||
);
|
||||
|
||||
// Evaluate warning state: backend flags warn: true, or days_left is within warning window (<= 3)
|
||||
const isWarnActive = Boolean(
|
||||
isExpired ||
|
||||
passwordStatus?.warn ||
|
||||
(passwordStatus?.days_left !== undefined && passwordStatus.days_left <= 3)
|
||||
);
|
||||
|
||||
// If not warning/expired, or if dismissed while NOT expired, hide banner.
|
||||
// When expired, dismissal is disabled so the user must take action.
|
||||
if (!isWarnActive || (dismissed && !isExpired)) return null;
|
||||
|
||||
const daysLeft = passwordStatus?.days_left;
|
||||
let headline = 'Your password will expire soon.';
|
||||
if (isExpired) {
|
||||
headline = 'Your password has expired.';
|
||||
} else if (daysLeft !== undefined) {
|
||||
if (daysLeft === 1) {
|
||||
headline = 'Your password will expire tomorrow.';
|
||||
} else {
|
||||
headline = `Your password will expire in ${daysLeft} days.`;
|
||||
}
|
||||
}
|
||||
|
||||
const handleDismiss = () => {
|
||||
setDismissed(true);
|
||||
try {
|
||||
sessionStorage.setItem(dismissKey, 'true');
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
};
|
||||
|
||||
if (isExpired) {
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
className="print:hidden shrink-0 px-3.5 py-2.5 sm:px-4 sm:py-2.5 bg-rose-50 border-b border-rose-200 text-xs text-rose-900 font-sans shadow-xs transition-all"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2.5 sm:gap-4">
|
||||
<div className="flex items-start sm:items-center gap-2.5 min-w-0 flex-1">
|
||||
<Lock size={18} className="text-rose-600 shrink-0 mt-0.5 sm:mt-0" />
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-x-2 gap-y-0.5 min-w-0">
|
||||
<strong className="font-semibold text-rose-950 text-xs sm:text-sm">{headline}</strong>
|
||||
<span className="text-rose-800 text-2xs sm:text-xs">
|
||||
You must update your password to continue using your account.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0 self-end sm:self-center ml-7 sm:ml-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onChangePassword}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-rose-600 hover:bg-rose-700 active:bg-rose-800 text-white font-semibold rounded-md shadow-xs transition-colors cursor-pointer text-xs"
|
||||
>
|
||||
<KeyRound size={13} />
|
||||
<span>Change Password Now</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
className="print:hidden shrink-0 px-3.5 py-2.5 sm:px-4 sm:py-2.5 bg-amber-50 border-b border-amber-200 text-xs text-amber-900 font-sans shadow-xs transition-all"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2.5 sm:gap-4">
|
||||
<div className="flex items-start sm:items-center gap-2.5 min-w-0 flex-1">
|
||||
<AlertTriangle size={18} className="text-amber-600 shrink-0 mt-0.5 sm:mt-0" />
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-x-2 gap-y-0.5 min-w-0">
|
||||
<strong className="font-semibold text-amber-950 text-xs sm:text-sm">{headline}</strong>
|
||||
<span className="text-amber-800 text-2xs sm:text-xs">
|
||||
Please update your password to maintain access to your account.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0 self-end sm:self-center ml-7 sm:ml-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDismiss}
|
||||
className="px-2.5 py-1.5 text-xs font-semibold text-amber-800 hover:text-amber-950 hover:bg-amber-100/80 active:bg-amber-200/80 rounded-md transition-colors cursor-pointer"
|
||||
>
|
||||
Later
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onChangePassword}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-600 hover:bg-amber-700 active:bg-amber-800 text-white font-semibold rounded-md shadow-xs transition-colors cursor-pointer text-xs"
|
||||
>
|
||||
<KeyRound size={13} />
|
||||
<span>Change Password</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,24 +22,12 @@ export interface ModalProps {
|
||||
maxHeight?: string;
|
||||
actions?: ReactNode;
|
||||
children?: ReactNode;
|
||||
/** Whether the modal can be dismissed via Esc, backdrop, or close button. @default true */
|
||||
closable?: boolean;
|
||||
}
|
||||
|
||||
/** Portal modal host — backdrop, Esc / click-out close, scroll-locked body. */
|
||||
export function Modal({
|
||||
open,
|
||||
onClose,
|
||||
title,
|
||||
subtitle,
|
||||
width = 'md',
|
||||
maxHeight = 'max-h-[80dvh]',
|
||||
actions,
|
||||
children,
|
||||
closable = true,
|
||||
}: ModalProps) {
|
||||
export function Modal({ open, onClose, title, subtitle, width = 'md', maxHeight = 'max-h-[80dvh]', actions, children }: ModalProps) {
|
||||
useEffect(() => {
|
||||
if (!open || !closable) return;
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
@ -50,7 +38,7 @@ export function Modal({
|
||||
document.removeEventListener('keydown', onKey);
|
||||
document.body.style.overflow = prev;
|
||||
};
|
||||
}, [open, onClose, closable]);
|
||||
}, [open, onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
@ -58,7 +46,7 @@ export function Modal({
|
||||
<div
|
||||
className="fixed inset-0 z-[10000] flex items-end sm:items-center justify-center overflow-y-auto bg-black/40 sm:p-8"
|
||||
onMouseDown={(e) => {
|
||||
if (closable && e.target === e.currentTarget) onClose();
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -81,15 +69,13 @@ export function Modal({
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{actions && <div className="flex items-center gap-2 mr-2">{actions}</div>}
|
||||
{closable && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
className="shrink-0 -mr-1 p-1.5 rounded-md text-slate-800 hover:text-black hover:bg-slate-200 transition-colors cursor-pointer"
|
||||
>
|
||||
<X size={22} strokeWidth={3} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
className="shrink-0 -mr-1 p-1.5 rounded-md text-slate-800 hover:text-black hover:bg-slate-200 transition-colors"
|
||||
>
|
||||
<X size={22} strokeWidth={3} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div className="shrink min-h-0 overflow-y-auto scrollbar-slim">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { NavLink, Navigate, Outlet, useNavigate } from 'react-router-dom';
|
||||
import { LogOut, Menu, X, Database, Users, KeyRound } from 'lucide-react';
|
||||
import { LogOut, Menu, X, Database, Users, KeyRound, AlertTriangle } from 'lucide-react';
|
||||
import { cn } from '../lib/cn';
|
||||
import { useAuth } from '../auth/context';
|
||||
import { onAuthErrorAll, orderBookingClient } from '../api/clients';
|
||||
@ -8,7 +8,6 @@ import { SCREENS } from './tabs';
|
||||
import { routeConfig } from '../routesConfig';
|
||||
import { APP_VERSION } from '../api/config';
|
||||
import { ChangePasswordModal } from '../components/auth/ChangePasswordModal';
|
||||
import { PasswordExpiryWarningBanner } from '../components/auth/PasswordExpiryWarningBanner';
|
||||
import { NoticeStrips } from '../components/common/NoticeBanner';
|
||||
import logoUrl from '../assets/logo.png';
|
||||
import './screen.css';
|
||||
@ -26,25 +25,13 @@ const canAccessScreen = (key: string, isAdmin: boolean, roles: string[]) => {
|
||||
/** Auth-guarded shell: slim navy top bar + fixed bottom tab nav + routed <Outlet>. */
|
||||
export function ConsoleLayout() {
|
||||
const { authed, logout, isAdmin, roles: userRoles, userEmail, passwordStatus } = useAuth();
|
||||
const [passwordDueDismissed, setPasswordDueDismissed] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const user = orderBookingClient.currentUser();
|
||||
const effectivePasswordStatus = passwordStatus ?? user?.password_status;
|
||||
|
||||
const isExpired = Boolean(
|
||||
effectivePasswordStatus?.must_change ||
|
||||
(effectivePasswordStatus?.days_left !== undefined && effectivePasswordStatus.days_left <= 0)
|
||||
);
|
||||
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
|
||||
|
||||
// If password has expired, automatically move the user directly to change password
|
||||
useEffect(() => {
|
||||
if (isExpired) {
|
||||
setIsChangePasswordOpen(true);
|
||||
}
|
||||
}, [isExpired]);
|
||||
|
||||
// A 401 from any workflow client bounces back to login.
|
||||
useEffect(() => {
|
||||
onAuthErrorAll(() => {
|
||||
@ -75,10 +62,38 @@ export function ConsoleLayout() {
|
||||
</header>
|
||||
|
||||
<NoticeStrips />
|
||||
<PasswordExpiryWarningBanner
|
||||
passwordStatus={effectivePasswordStatus}
|
||||
onChangePassword={() => setIsChangePasswordOpen(true)}
|
||||
/>
|
||||
|
||||
{passwordStatus?.warn && !passwordDueDismissed && (
|
||||
<div
|
||||
role="alert"
|
||||
className="print:hidden shrink-0 flex items-center gap-2 px-4 py-2 bg-amber-50 border-b border-amber-200 text-xs text-amber-900"
|
||||
>
|
||||
<AlertTriangle size={16} className="shrink-0 text-amber-700" />
|
||||
<span className="flex-1">
|
||||
<strong>Password change due.</strong>{' '}
|
||||
{typeof passwordStatus.days_left === 'number'
|
||||
? passwordStatus.days_left <= 0
|
||||
? 'Your password expires today.'
|
||||
: `Your password expires in ${passwordStatus.days_left} day${passwordStatus.days_left === 1 ? '' : 's'}.`
|
||||
: 'Please update it soon.'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsChangePasswordOpen(true)}
|
||||
className="font-semibold text-amber-900 underline cursor-pointer"
|
||||
>
|
||||
Change now
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Dismiss"
|
||||
onClick={() => setPasswordDueDismissed(true)}
|
||||
className="text-amber-700 hover:text-amber-900 cursor-pointer"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<main className="flex-1 overflow-y-auto px-4 pt-4 pb-24">
|
||||
<div className="w-full max-w-[1200px] mx-auto flex flex-col gap-5">
|
||||
@ -246,12 +261,7 @@ export function ConsoleLayout() {
|
||||
|
||||
<ChangePasswordModal
|
||||
open={isChangePasswordOpen}
|
||||
onClose={() => {
|
||||
if (!isExpired) {
|
||||
setIsChangePasswordOpen(false);
|
||||
}
|
||||
}}
|
||||
required={isExpired}
|
||||
onClose={() => setIsChangePasswordOpen(false)}
|
||||
userEmail={userEmail || user?.email}
|
||||
userName={user?.name}
|
||||
onSuccessLogout={() => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useState, useEffect, useRef, type FormEvent } from 'react';
|
||||
import { useState, useEffect, type FormEvent } from 'react';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { Eye, EyeOff, ArrowLeft, Mail, Lock, KeyRound, CheckCircle2, AlertCircle } from 'lucide-react';
|
||||
import { AuthShell } from '../components/auth/AuthShell';
|
||||
import { Eye, EyeOff, ArrowLeft, Mail, KeyRound, CheckCircle2, AlertCircle } from 'lucide-react';
|
||||
import { Card } from '../components/reusable';
|
||||
import { Button } from '../components/buttons';
|
||||
import { PasswordRulesChecklist } from '../components/auth/PasswordRulesChecklist';
|
||||
import { forgotPassword, verifyResetCode, resetPassword } from '../api/auth';
|
||||
@ -11,6 +11,7 @@ import {
|
||||
passwordTooLong,
|
||||
PASSWORD_MAX_CHARS,
|
||||
} from '../utils/passwordPolicy';
|
||||
import logo from '../assets/logo.png';
|
||||
|
||||
const CODE_LENGTH = 6;
|
||||
const RESEND_COOLDOWN = 60; // seconds
|
||||
@ -33,13 +34,6 @@ export function ForgotPasswordPage() {
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
const policy = usePasswordPolicy(step === 'password');
|
||||
const codeInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// The email and code inputs share a tree position, so React reuses the DOM node
|
||||
// and autoFocus doesn't fire on step change — focus the code input explicitly.
|
||||
useEffect(() => {
|
||||
if (step === 'code') codeInputRef.current?.focus();
|
||||
}, [step]);
|
||||
|
||||
// Cooldown countdown
|
||||
useEffect(() => {
|
||||
@ -143,23 +137,31 @@ export function ForgotPasswordPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const title = done
|
||||
? 'Password Reset Complete'
|
||||
: step === 'email'
|
||||
? 'Forgot Password'
|
||||
: step === 'code'
|
||||
? 'Enter Verification Code'
|
||||
: 'Create New Password';
|
||||
const subtitle = done
|
||||
? 'Your password has been changed. Redirecting to login…'
|
||||
: step === 'email'
|
||||
? "Enter your email address and we'll send you a 6-digit verification code."
|
||||
: step === 'code'
|
||||
? `We emailed a ${CODE_LENGTH}-digit code to ${email}. It is valid for 10 minutes.`
|
||||
: 'Choose a strong new password that meets the security policy.';
|
||||
|
||||
return (
|
||||
<AuthShell title={title} subtitle={subtitle}>
|
||||
<div className="min-h-screen flex items-center justify-center p-4 bg-emerald-50">
|
||||
<Card className="w-full max-w-[420px] shadow-lg border-emerald-100 bg-white p-6 sm:p-7">
|
||||
<div className="flex flex-col gap-2 items-center mb-6 text-center">
|
||||
<img src={logo} alt="Krishna Sales Logo" className="h-14 w-auto object-contain" />
|
||||
<h1 className="text-xl font-extrabold text-emerald-950 tracking-tight">
|
||||
{done
|
||||
? 'Password Reset Complete'
|
||||
: step === 'email'
|
||||
? 'Forgot Password'
|
||||
: step === 'code'
|
||||
? 'Enter Verification Code'
|
||||
: 'Create New Password'}
|
||||
</h1>
|
||||
<p className="text-xs text-slate-500 max-w-[340px] leading-relaxed">
|
||||
{done
|
||||
? 'Your password has been changed. Redirecting to login…'
|
||||
: step === 'email'
|
||||
? "Enter your email address and we'll send you a 6-digit verification code."
|
||||
: step === 'code'
|
||||
? `We emailed a ${CODE_LENGTH}-digit code to ${email}. It is valid for 10 minutes.`
|
||||
: 'Choose a strong new password that meets the security policy.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-start gap-2">
|
||||
<AlertCircle size={16} className="shrink-0 mt-0.5" />
|
||||
@ -173,33 +175,35 @@ export function ForgotPasswordPage() {
|
||||
<CheckCircle2 size={36} className="text-emerald-600" />
|
||||
<span className="font-semibold">{message}</span>
|
||||
</div>
|
||||
<Button type="button" full onClick={goToLogin} className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20">
|
||||
<Button type="button" full onClick={goToLogin} className="bg-emerald-600 hover:bg-emerald-700 text-white">
|
||||
Go to Login
|
||||
</Button>
|
||||
</div>
|
||||
) : step === 'email' ? (
|
||||
/* Step 1: Email Form */
|
||||
<form onSubmit={handleEmailSubmit} className="flex flex-col gap-4">
|
||||
<div className="relative flex items-center">
|
||||
<Mail size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<label className="flex flex-col gap-1.5 font-sans">
|
||||
<span className="text-sm font-semibold text-emerald-800 flex items-center gap-1.5">
|
||||
<Mail size={15} />
|
||||
Email address <span className="text-emerald-500">*</span>
|
||||
</span>
|
||||
<input
|
||||
aria-label="Email address"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
disabled={submitting}
|
||||
className="h-12 w-full pl-11 pr-4 rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-500 text-sm"
|
||||
placeholder="Email"
|
||||
className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
full
|
||||
disabled={submitting}
|
||||
className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
|
||||
className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
|
||||
>
|
||||
{submitting ? 'Sending code…' : 'Send Reset Code'}
|
||||
</Button>
|
||||
@ -215,11 +219,12 @@ export function ForgotPasswordPage() {
|
||||
) : step === 'code' ? (
|
||||
/* Step 2: OTP Verification Form */
|
||||
<form onSubmit={handleCodeSubmit} className="flex flex-col gap-4">
|
||||
<div className="relative flex items-center">
|
||||
<KeyRound size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<label className="flex flex-col gap-1.5 font-sans">
|
||||
<span className="text-sm font-semibold text-emerald-800 flex items-center gap-1.5">
|
||||
<KeyRound size={15} />
|
||||
Reset Code <span className="text-emerald-500">*</span>
|
||||
</span>
|
||||
<input
|
||||
ref={codeInputRef}
|
||||
aria-label="Reset code"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
@ -229,16 +234,16 @@ export function ForgotPasswordPage() {
|
||||
required
|
||||
autoFocus
|
||||
disabled={submitting}
|
||||
className="h-12 w-full px-11 text-center text-xl font-bold tracking-[0.3em] rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-400"
|
||||
className="h-[46px] px-3 text-center text-xl font-bold tracking-[0.3em] border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400"
|
||||
placeholder="123456"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
full
|
||||
disabled={submitting || code.length !== CODE_LENGTH}
|
||||
className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
|
||||
className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
|
||||
>
|
||||
{submitting ? 'Verifying…' : 'Verify Code'}
|
||||
</Button>
|
||||
@ -269,10 +274,11 @@ export function ForgotPasswordPage() {
|
||||
/* Step 3: New Password Form */
|
||||
<form onSubmit={handlePasswordSubmit} className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1.5 font-sans">
|
||||
<span className="text-sm font-semibold text-emerald-800">
|
||||
New password <span className="text-emerald-500">*</span>
|
||||
</span>
|
||||
<div className="relative flex items-center">
|
||||
<Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<input
|
||||
aria-label="New password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
value={password}
|
||||
@ -280,44 +286,45 @@ export function ForgotPasswordPage() {
|
||||
required
|
||||
autoFocus
|
||||
disabled={submitting}
|
||||
className="h-12 w-full pl-11 pr-11 rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-500 text-sm"
|
||||
placeholder="New password"
|
||||
className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword((s) => !s)}
|
||||
disabled={submitting}
|
||||
tabIndex={-1}
|
||||
className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
|
||||
className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
|
||||
>
|
||||
{showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
|
||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<PasswordRulesChecklist policy={policy} password={password} email={email} className="mt-1" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5 font-sans">
|
||||
<span className="text-sm font-semibold text-emerald-800">
|
||||
Confirm new password <span className="text-emerald-500">*</span>
|
||||
</span>
|
||||
<div className="relative flex items-center">
|
||||
<Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<input
|
||||
aria-label="Confirm new password"
|
||||
type={showConfirm ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
required
|
||||
disabled={submitting}
|
||||
className="h-12 w-full pl-11 pr-11 rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-500 text-sm"
|
||||
placeholder="Confirm new password"
|
||||
className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
|
||||
placeholder="Re-enter new password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirm((s) => !s)}
|
||||
disabled={submitting}
|
||||
tabIndex={-1}
|
||||
className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
|
||||
className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
|
||||
>
|
||||
{showConfirm ? <Eye size={18} /> : <EyeOff size={18} />}
|
||||
{showConfirm ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -326,7 +333,7 @@ export function ForgotPasswordPage() {
|
||||
type="submit"
|
||||
full
|
||||
disabled={submitting}
|
||||
className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
|
||||
className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
|
||||
>
|
||||
{submitting ? 'Updating password…' : 'Set New Password'}
|
||||
</Button>
|
||||
@ -344,6 +351,7 @@ export function ForgotPasswordPage() {
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</AuthShell>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import { Navigate, useNavigate, Link } from 'react-router-dom';
|
||||
import { Eye, EyeOff, Lock, Mail, AlertCircle, ArrowLeft, ArrowRight } from 'lucide-react';
|
||||
import { Eye, EyeOff, Lock, AlertCircle, ArrowLeft } from 'lucide-react';
|
||||
import { useAuth, type PasswordChangeRequiredInfo } from '../auth/context';
|
||||
import { Button } from '../components/buttons';
|
||||
import { AuthShell } from '../components/auth/AuthShell';
|
||||
import { Card } from '../components/reusable';
|
||||
import { PasswordRulesChecklist } from '../components/auth/PasswordRulesChecklist';
|
||||
import { usePasswordPolicy } from '../hooks/usePasswordPolicy';
|
||||
import { cn } from '../lib/cn';
|
||||
import {
|
||||
passwordMeetsPolicy,
|
||||
passwordTooLong,
|
||||
PASSWORD_MAX_CHARS,
|
||||
} from '../utils/passwordPolicy';
|
||||
import logo from '../assets/logo.png';
|
||||
|
||||
/** Login gate. Redirects to /daily once authenticated. */
|
||||
export function LoginPage() {
|
||||
@ -30,45 +30,20 @@ export function LoginPage() {
|
||||
const [showNewPassword, setShowNewPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
const [fieldErrors, setFieldErrors] = useState<{
|
||||
email?: boolean;
|
||||
password?: boolean;
|
||||
newPassword?: boolean;
|
||||
confirmPassword?: boolean;
|
||||
}>({});
|
||||
|
||||
const policy = usePasswordPolicy(!!changeRequired);
|
||||
|
||||
if (authed) return <Navigate to="/daily" replace />;
|
||||
|
||||
async function submit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setFieldErrors({});
|
||||
|
||||
const errs: typeof fieldErrors = {};
|
||||
if (!email) errs.email = true;
|
||||
if (!password) errs.password = true;
|
||||
|
||||
if (Object.keys(errs).length > 0) {
|
||||
setFieldErrors(errs);
|
||||
setError(
|
||||
errs.email && errs.password
|
||||
? 'Please enter both your email and password.'
|
||||
: errs.email
|
||||
? 'Email address is required.'
|
||||
: 'Password is required.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await login(email, password);
|
||||
navigate('/daily', { replace: true });
|
||||
} catch (err: any) {
|
||||
// Backend signals that password policy or expiry requires a new password first
|
||||
if (err?.code === 'password_change_required' || err?.data?.code === 'password_change_required' || (err?.status === 403 && err?.reason === 'policy')) {
|
||||
if (err?.code === 'password_change_required' || err?.data?.code === 'password_change_required' || err?.status === 403 && err?.reason === 'policy') {
|
||||
setChangeRequired({
|
||||
message: err?.message || err?.data?.error || 'A new password policy is in effect. Please choose a new password to continue.',
|
||||
reason: err?.reason || err?.data?.reason,
|
||||
@ -86,44 +61,28 @@ export function LoginPage() {
|
||||
async function handleChangePasswordSubmit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setFieldErrors({});
|
||||
|
||||
const errs: typeof fieldErrors = {};
|
||||
if (!newPassword) errs.newPassword = true;
|
||||
if (!confirmPassword) errs.confirmPassword = true;
|
||||
|
||||
if (Object.keys(errs).length > 0) {
|
||||
setFieldErrors(errs);
|
||||
setError(
|
||||
errs.newPassword && errs.confirmPassword
|
||||
? 'Please enter and confirm your new password.'
|
||||
: errs.newPassword
|
||||
? 'New password is required.'
|
||||
: 'Please confirm your new password.'
|
||||
);
|
||||
if (!newPassword || !confirmPassword) {
|
||||
setError('Please fill in both password fields.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!passwordMeetsPolicy(policy, newPassword, { email })) {
|
||||
setFieldErrors({ newPassword: true });
|
||||
setError('New password does not meet all of the password requirements.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordTooLong(newPassword)) {
|
||||
setFieldErrors({ newPassword: true });
|
||||
setError(`New password must be at most ${PASSWORD_MAX_CHARS} characters.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setFieldErrors({ confirmPassword: true });
|
||||
setError('New passwords do not match.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword === password) {
|
||||
setFieldErrors({ newPassword: true });
|
||||
setError('New password must be different from your current password.');
|
||||
return;
|
||||
}
|
||||
@ -143,15 +102,24 @@ export function LoginPage() {
|
||||
setChangeRequired(null);
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setFieldErrors({});
|
||||
setError(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthShell
|
||||
title={changeRequired ? 'Set a New Password' : 'Welcome Back'}
|
||||
subtitle={changeRequired ? changeRequired.message : 'Sign in to continue to Krishna Sales'}
|
||||
>
|
||||
<div className="min-h-screen flex items-center justify-center p-4 bg-emerald-50">
|
||||
<Card className="w-full max-w-[420px] shadow-lg border-emerald-100 bg-white p-6 sm:p-7">
|
||||
<div className="flex flex-col gap-2 items-center mb-6 text-center">
|
||||
<img src={logo} alt="Krishna Sales Logo" className="h-16 w-auto object-contain" />
|
||||
<h1 className="m-0 text-2xl font-extrabold text-emerald-900 tracking-[-0.02em]">
|
||||
{changeRequired ? 'Set a New Password' : 'Krishna Sales'}
|
||||
</h1>
|
||||
{changeRequired && (
|
||||
<p className="text-xs text-slate-600 mt-1 max-w-[340px] leading-relaxed">
|
||||
{changeRequired.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 text-xs text-rose-700 bg-rose-50 border border-rose-200 p-3 rounded-lg flex items-start gap-2">
|
||||
<AlertCircle size={16} className="shrink-0 mt-0.5" />
|
||||
@ -161,7 +129,7 @@ export function LoginPage() {
|
||||
|
||||
{changeRequired ? (
|
||||
/* Forced Password Change Form */
|
||||
<form noValidate onSubmit={handleChangePasswordSubmit} className="flex flex-col gap-4">
|
||||
<form onSubmit={handleChangePasswordSubmit} className="flex flex-col gap-4">
|
||||
<div className="p-3 bg-amber-50/80 border border-amber-200 rounded-lg flex items-start gap-2.5 text-xs text-amber-900">
|
||||
<Lock size={16} className="text-amber-700 shrink-0 mt-0.5" />
|
||||
<span>
|
||||
@ -171,36 +139,29 @@ export function LoginPage() {
|
||||
|
||||
{/* New Password */}
|
||||
<div className="flex flex-col gap-1.5 font-sans">
|
||||
<label className="text-xs font-semibold text-slate-700">
|
||||
New password <span className="text-emerald-500">*</span>
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<input
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
value={newPassword}
|
||||
onChange={(e) => {
|
||||
setNewPassword(e.target.value);
|
||||
if (fieldErrors.newPassword) setFieldErrors((prev) => ({ ...prev, newPassword: false }));
|
||||
setError(null);
|
||||
}}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
disabled={busy}
|
||||
className={cn(
|
||||
'h-12 w-full pl-11 pr-11 rounded-full outline-none transition-all text-sm',
|
||||
fieldErrors.newPassword
|
||||
? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
|
||||
: 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
|
||||
)}
|
||||
aria-label="New password"
|
||||
placeholder="New password"
|
||||
className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewPassword((s) => !s)}
|
||||
disabled={busy}
|
||||
tabIndex={-1}
|
||||
className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
|
||||
className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
|
||||
>
|
||||
{showNewPassword ? <Eye size={18} /> : <EyeOff size={18} />}
|
||||
{showNewPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<PasswordRulesChecklist
|
||||
@ -213,25 +174,18 @@ export function LoginPage() {
|
||||
|
||||
{/* Confirm New Password */}
|
||||
<div className="flex flex-col gap-1.5 font-sans">
|
||||
<label className="text-xs font-semibold text-slate-700">
|
||||
Confirm new password <span className="text-emerald-500">*</span>
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<input
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => {
|
||||
setConfirmPassword(e.target.value);
|
||||
if (fieldErrors.confirmPassword) setFieldErrors((prev) => ({ ...prev, confirmPassword: false }));
|
||||
setError(null);
|
||||
}}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
disabled={busy}
|
||||
className={cn(
|
||||
'h-12 w-full pl-11 pr-11 rounded-full outline-none transition-all text-sm',
|
||||
fieldErrors.confirmPassword
|
||||
? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
|
||||
: 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
|
||||
)}
|
||||
aria-label="Confirm new password"
|
||||
className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
<button
|
||||
@ -239,9 +193,9 @@ export function LoginPage() {
|
||||
onClick={() => setShowConfirmPassword((s) => !s)}
|
||||
disabled={busy}
|
||||
tabIndex={-1}
|
||||
className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
|
||||
className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
|
||||
>
|
||||
{showConfirmPassword ? <Eye size={18} /> : <EyeOff size={18} />}
|
||||
{showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -250,9 +204,9 @@ export function LoginPage() {
|
||||
type="submit"
|
||||
full
|
||||
disabled={busy}
|
||||
className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
|
||||
className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
|
||||
>
|
||||
{busy ? 'Updating & Signing in…' : (<>Update Password & Sign In <ArrowRight size={18} className="ml-2" /></>)}
|
||||
{busy ? 'Updating & Signing in…' : 'Update Password & Sign In'}
|
||||
</Button>
|
||||
|
||||
<button
|
||||
@ -267,80 +221,68 @@ export function LoginPage() {
|
||||
</form>
|
||||
) : (
|
||||
/* Standard Login Form */
|
||||
<form noValidate onSubmit={submit} className="flex flex-col gap-4">
|
||||
<div className="relative flex items-center">
|
||||
<Mail size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<form onSubmit={submit} className="flex flex-col gap-4">
|
||||
<label className="flex flex-col gap-1.5 font-sans">
|
||||
<span className="text-sm font-semibold text-emerald-800">
|
||||
Email <span className="text-emerald-500">*</span>
|
||||
</span>
|
||||
<input
|
||||
type="email"
|
||||
aria-label="Email"
|
||||
value={email}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
if (fieldErrors.email) setFieldErrors((prev) => ({ ...prev, email: false }));
|
||||
setError(null);
|
||||
}}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
disabled={busy}
|
||||
className={cn(
|
||||
'h-12 w-full pl-11 pr-4 rounded-full outline-none transition-all text-sm',
|
||||
fieldErrors.email
|
||||
? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
|
||||
: 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
|
||||
)}
|
||||
placeholder="Email"
|
||||
className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5 font-sans">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-semibold text-emerald-800">
|
||||
Password <span className="text-emerald-500">*</span>
|
||||
</span>
|
||||
<Link
|
||||
to="/forgot-password"
|
||||
className="text-xs font-semibold text-emerald-700 hover:text-emerald-900 transition-colors"
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative flex items-center">
|
||||
<Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
aria-label="Password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (fieldErrors.password) setFieldErrors((prev) => ({ ...prev, password: false }));
|
||||
setError(null);
|
||||
}}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
disabled={busy}
|
||||
className={cn(
|
||||
'h-12 w-full pl-11 pr-11 rounded-full outline-none transition-all text-sm',
|
||||
fieldErrors.password
|
||||
? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
|
||||
: 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
|
||||
)}
|
||||
placeholder="Password"
|
||||
className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword((s) => !s)}
|
||||
disabled={busy}
|
||||
tabIndex={-1}
|
||||
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||
className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
|
||||
className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
|
||||
>
|
||||
{showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
|
||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<Link
|
||||
to="/forgot-password"
|
||||
className="self-end text-sm font-medium text-emerald-900 hover:text-emerald-700 transition-colors"
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
full
|
||||
disabled={busy}
|
||||
className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
|
||||
className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
|
||||
>
|
||||
{busy ? 'Signing in…' : (<>Sign In <ArrowRight size={18} className="ml-2" /></>)}
|
||||
{busy ? 'Signing in…' : 'Sign in'}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</AuthShell>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user