Add login page and social login integration
- Implement `LoginPage`, `LoginForm`, and `SocialForm` components. - Add language toggle and dynamic title support. - Update `tsconfig.electron.json` for stricter settings. - Add `electron-store` and associated types for token storage. - Update `package.json` scripts and dependencies for Electron compatibility.
This commit is contained in:
natreex
277
app/login/reset-password/page.tsx
Executable file
277
app/login/reset-password/page.tsx
Executable file
@@ -0,0 +1,277 @@
|
||||
'use client'
|
||||
import {useContext, useState} from "react";
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faEnvelope, faKey, faLock, faArrowLeft} from '@fortawesome/free-solid-svg-icons';
|
||||
import System from "@/lib/models/System";
|
||||
import {QueryDataResponse} from "@/shared/interface";
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
|
||||
export default function ForgetPasswordPage() {
|
||||
const [step, setStep] = useState(1);
|
||||
const [email, setEmail] = useState('');
|
||||
const [verificationCode, setVerificationCode] = useState('');
|
||||
const [isConfirmed, setIsConfirmed] = useState(false);
|
||||
const [newPassword, setNewPassword] = useState<string>('');
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext)
|
||||
|
||||
function handleNextStep(): void {
|
||||
setStep(step + 1);
|
||||
}
|
||||
|
||||
function handlePrevStep(): void {
|
||||
setStep(step - 1);
|
||||
}
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
const response: QueryDataResponse<null> = await System.postToServer<QueryDataResponse<null>>('user/verify-code', {
|
||||
verifyCode: verificationCode,
|
||||
email,
|
||||
}, lang);
|
||||
if (response.valid) {
|
||||
successMessage(response.message ?? '');
|
||||
setIsConfirmed(true);
|
||||
} else {
|
||||
errorMessage(response.message ?? '');
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(t('resetPassword.error.codeServer'));
|
||||
} else {
|
||||
errorMessage(t('resetPassword.error.codeUnknown'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEmailCheck(): Promise<void> {
|
||||
if (email == null || email == "") {
|
||||
errorMessage(t('resetPassword.error.emailInvalid'));
|
||||
return;
|
||||
}
|
||||
|
||||
const emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
if (!emailRegEx.test(email)) {
|
||||
errorMessage(t('resetPassword.error.emailFormat'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response: QueryDataResponse<null> = await System.postToServer<QueryDataResponse<null>>('user/email-check', {
|
||||
email: email
|
||||
}, lang);
|
||||
if (response.valid) {
|
||||
successMessage(response.message ?? '');
|
||||
handleNextStep();
|
||||
} else {
|
||||
errorMessage(response.message ?? '');
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(t('resetPassword.error.emailServer'));
|
||||
} else {
|
||||
errorMessage(t('resetPassword.error.emailUnknown'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNewPassword(): Promise<void> {
|
||||
try {
|
||||
const response: QueryDataResponse<null> = await System.postToServer('password/reset', {
|
||||
email: email,
|
||||
newPassword: newPassword,
|
||||
code: verificationCode
|
||||
}, lang);
|
||||
if (response.valid) {
|
||||
successMessage(response.message ?? '');
|
||||
handleNextStep();
|
||||
} else {
|
||||
errorMessage(response.message ?? '');
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(t('resetPassword.error.passwordServer'));
|
||||
} else {
|
||||
errorMessage(t('resetPassword.error.passwordUnknown'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary p-4">
|
||||
<div className="w-full max-w-md px-4 py-10">
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="w-[90%] max-w-[320px]">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="ERitors"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-tertiary rounded-2xl overflow-hidden shadow-xl shadow-primary/10 w-full relative">
|
||||
<div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-info"></div>
|
||||
<div
|
||||
className="absolute -top-10 -left-10 w-40 h-40 bg-gradient-to-br from-primary/20 to-transparent rounded-full blur-xl"></div>
|
||||
<div
|
||||
className="absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br from-info/20 to-transparent rounded-full blur-xl"></div>
|
||||
|
||||
<div className="p-6 sm:p-8">
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM Display']">{t('resetPassword.title')}</h1>
|
||||
<p className="text-muted">{t('resetPassword.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={`flex-grow h-2 rounded-full ${step >= 1 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
|
||||
<div className="w-4"></div>
|
||||
<div
|
||||
className={`flex-grow h-2 rounded-full ${step >= 2 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
|
||||
<div className="w-4"></div>
|
||||
<div
|
||||
className={`flex-grow h-2 rounded-full ${step >= 3 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
|
||||
</div>
|
||||
<div className="flex justify-between mt-2 text-xs text-muted">
|
||||
<span>{t('resetPassword.progress.email')}</span>
|
||||
<span>{t('resetPassword.progress.verification')}</span>
|
||||
<span>{t('resetPassword.progress.final')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{step === 1 && (
|
||||
<form className="space-y-4">
|
||||
<div className="mb-5">
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-1 text-muted">
|
||||
{t('resetPassword.fields.email.label')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<FontAwesomeIcon icon={faEnvelope}
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder={t('resetPassword.fields.email.placeholder')}
|
||||
className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleEmailCheck}
|
||||
className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
|
||||
>
|
||||
{t('resetPassword.verify')}
|
||||
</button>
|
||||
|
||||
<a
|
||||
href="/login/login"
|
||||
className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<FontAwesomeIcon icon={faArrowLeft} className="w-4 h-4" />
|
||||
{t('resetPassword.backToLogin')}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<form className="space-y-4">
|
||||
<div className="mb-5">
|
||||
<label htmlFor="verificationCode"
|
||||
className="block text-sm font-medium mb-1 text-muted">
|
||||
{t('resetPassword.fields.code.label')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<FontAwesomeIcon icon={faKey}
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
|
||||
<input
|
||||
type="text"
|
||||
id="verificationCode"
|
||||
placeholder={t('resetPassword.fields.code.placeholder')}
|
||||
className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
|
||||
value={verificationCode}
|
||||
onChange={(e) => setVerificationCode(e.target.value)}
|
||||
disabled={isConfirmed}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isConfirmed && (
|
||||
<div className="mb-5">
|
||||
<label htmlFor="newPassword"
|
||||
className="block text-sm font-medium mb-1 text-muted">
|
||||
{t('resetPassword.fields.newPassword.label')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<FontAwesomeIcon icon={faLock}
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
|
||||
<input
|
||||
type="password"
|
||||
id="newPassword"
|
||||
placeholder={t('resetPassword.fields.newPassword.placeholder')}
|
||||
className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col space-y-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={isConfirmed ? handleNewPassword : handleConfirm}
|
||||
className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
|
||||
>
|
||||
{isConfirmed ? t('resetPassword.changePassword') : t('resetPassword.confirm')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePrevStep}
|
||||
className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors"
|
||||
>
|
||||
{t('resetPassword.back')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<div className="space-y-6">
|
||||
<div className="p-4 bg-success/20 border border-success rounded-xl">
|
||||
<p className="text-center text-text">
|
||||
{t('resetPassword.success')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<a href="/login/login" className="block w-full">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
|
||||
>
|
||||
{t('resetPassword.goToLogin')}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user