danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

add: reset password and basic auth mock service

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-01 00:27:16 +03:30
parent 2fc5b28925
commit a81659ef6e
13 changed files with 245 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/auth/page.tsx
+81 -20
View File
@@ -9,17 +9,22 @@ import StepEnterNumber from '@/features/auth/components/StepEnterNumber';
import StepEnterOtp from '@/features/auth/components/StepEnterOtp';
import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums';
import { useCountdown } from '@/hooks/useCountdown';
import StepNewPassword from '@/features/auth/components/StepNewPassword';
import { validatePhoneNumber } from '@/features/auth/actions/validatePhoneNumber';
import { signupUser } from '@/features/auth/actions/signupUser';
type Props = object
function AuthIndex({ }: Props) {
const [number, setNumber] = useState("");
const [password, setPassword] = useState("");
const [passwordRepeat, setPasswordRepeat] = useState("");
const [otp, setOtp] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [showPasswordRepeat, setShowPasswordRepeat] = useState(false);
const [rememberMe, setRememberMe] = useState(false);
const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER);
const { timerRunning, secondsLeft, restart } = useCountdown(step === AUTH_STEP.ENTER_OTP);
const { timerRunning, secondsLeft, restart, stop } = useCountdown(step === AUTH_STEP.ENTER_OTP);
const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
@@ -29,17 +34,20 @@ function AuthIndex({ }: Props) {
}
}, [isAuthenticated])
const updateInput = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.id == "phone") {
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_PHONE) {
setNumber(() => e.target.value)
}
else if (e.target.id == "password") {
else if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_PASSWORD) {
setPassword(() => e.target.value)
}
else if (e.target.id == "rememberMe") {
else if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT) {
setPasswordRepeat(() => e.target.value)
}
else if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME) {
setRememberMe((state) => !state)
}
else if (e.target.id.startsWith("otp-data")) {
else if (e.target.id.startsWith(AUTH_PAGE_ELEMENT.INPUT_OTP)) {
const index = +e.target.id.split('-')[2];
const prev = otp.padEnd(6).split('');
prev[index] = e.target.value;
@@ -48,15 +56,18 @@ function AuthIndex({ }: Props) {
}
}
const onClickEvent = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
const target = e.target as HTMLButtonElement;
if (target.id === AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD) {
setShowPassword((state) => !state);
}
if (target.id === AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD) {
setShowPasswordRepeat((state) => !state);
}
else if (target.id === AUTH_PAGE_ELEMENT.RESET_PASSWORD) {
setShowPassword((state) => !state);
setStep(() => AUTH_STEP.ENTER_OTP)
}
else if (target.id === AUTH_PAGE_ELEMENT.RESEND_OTP) {
if(!timerRunning) {
@@ -65,12 +76,16 @@ function AuthIndex({ }: Props) {
}
};
const submit = async (e: FormEvent<HTMLFormElement>) => {
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (step == AUTH_STEP.ENTER_NUMBER) {
setStep(AUTH_STEP.ENTER_PASSWORD)
if(await validatePhoneNumber(number)) {
setStep(AUTH_STEP.ENTER_PASSWORD)
} else {
setStep(AUTH_STEP.ENTER_OTP);
}
}
if (step == AUTH_STEP.ENTER_PASSWORD) {
else if (step == AUTH_STEP.ENTER_PASSWORD) {
if (await loginUser(number, password)) {
console.log("Logged in")
}
@@ -78,17 +93,34 @@ function AuthIndex({ }: Props) {
console.log("Wrong credentials")
}
}
if (step == AUTH_STEP.ENTER_OTP) {
else if (step == AUTH_STEP.ENTER_OTP) {
stop();
if(await validatePhoneNumber(number)) {
setStep(AUTH_STEP.ENTER_RESET_PASSWORD)
} else {
setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
}
}
else if (step == AUTH_STEP.ENTER_RESET_PASSWORD) {
console.log("Password changed")
setStep(AUTH_STEP.ENTER_NUMBER)
}
else if (step == AUTH_STEP.ENTER_NEW_PASSWORD) {
if(await signupUser(number, password)) {
console.log("Signed up")
redirect("/")
} else {
console.log("Could not signup")
}
}
}
if (step == AUTH_STEP.ENTER_NUMBER) {
// First Step -> Enter number
return (
<StepEnterNumber
onChange={updateInput}
onSubmit={submit}
onChange={onChange}
onSubmit={onSubmit}
value={number}
/>
)
@@ -97,9 +129,9 @@ function AuthIndex({ }: Props) {
if (step == AUTH_STEP.ENTER_PASSWORD) {
return (
<StepEnterPassword
onChange={updateInput}
onClick={onClickEvent}
onSubmit={submit}
onChange={onChange}
onClick={onClick}
onSubmit={onSubmit}
value={password}
passwordVisible={showPassword}
rememberMe={rememberMe}
@@ -110,16 +142,45 @@ function AuthIndex({ }: Props) {
if (step == AUTH_STEP.ENTER_OTP) {
return (
<StepEnterOtp
onChange={updateInput}
onClick={onClickEvent}
onChange={onChange}
onClick={onClick}
phoneNumber={number}
onSubmit={submit}
onSubmit={onSubmit}
value={otp}
timerRunning={timerRunning}
secondsLeft={secondsLeft}
/>
)
}
if (step == AUTH_STEP.ENTER_NEW_PASSWORD) {
return (
<StepNewPassword
onChange={onChange}
onClick={onClick}
onSubmit={onSubmit}
value={password}
repeatValue={passwordRepeat}
passwordVisible={showPassword}
repeatPasswordVisible={showPasswordRepeat}
/>
)
}
if (step == AUTH_STEP.ENTER_RESET_PASSWORD) {
return (
<StepNewPassword
reset
onChange={onChange}
onClick={onClick}
onSubmit={onSubmit}
value={password}
repeatValue={passwordRepeat}
passwordVisible={showPassword}
repeatPasswordVisible={showPasswordRepeat}
/>
)
}
}
export default AuthIndex
src/components/button/PrimaryButton.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import React from 'react'
type Props = { } & React.ButtonHTMLAttributes<HTMLButtonElement>;
type Props = {} & React.ButtonHTMLAttributes<HTMLButtonElement>;
function PrimaryButton({children, ...rest}: Props) {
function PrimaryButton({ children, className, ...rest }: Props) {
return (
<button className='bg-primary w-full rounded-normal p-3 text-white font-bold text-sm' {...rest}>
{ children }
<button className={`${className} bg-primary w-full rounded-normal p-3 text-white font-bold text-sm`} {...rest}>
{children}
</button>
)
}
src/components/input/InputField.tsx
+3 -2
View File
@@ -5,12 +5,13 @@ type Props = {
labelText?: React.ReactNode;
value?: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
valid?: boolean
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
function InputField({ onChange, htmlFor, labelText, children, className, ...inputProps }: Props) {
function InputField({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }: Props) {
return (
<div className={`${className} h-11 inline-flex relative border border-[#E5E5E5] px-3 w-full rounded-normal group focus-within:border focus-within:border-primary`}>
<div className={`${className} ${valid ? 'border-[#E5E5E5]' : 'border-[red]'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border focus-within:border-primary`}>
<label
className='absolute right-2 -top-3 px-2 bg-background text-[12px] text-foreground'
htmlFor={htmlFor}>
src/enums/authStep.ts
+2
View File
@@ -2,4 +2,6 @@ export enum AUTH_STEP {
ENTER_NUMBER = 0,
ENTER_PASSWORD = 1,
ENTER_OTP = 2,
ENTER_NEW_PASSWORD = 3,
ENTER_RESET_PASSWORD = 4,
}
src/enums/elementIds.ts
+7 -1
View File
@@ -1,5 +1,11 @@
export enum AUTH_PAGE_ELEMENT {
TOGGLE_PASSWORD = "togglePassword",
TOGGLE_REPEAT_PASSWORD = "toggleRepeatPassword",
RESET_PASSWORD = "resetPassword",
RESEND_OTP = "resendOtp"
RESEND_OTP = "resendOtp",
INPUT_PASSWORD = "password",
INPUT_REMEMBER_ME = "rememberMe",
INPUT_PASSWORD_REPEAT = "passwordRepeat",
INPUT_OTP = "opt",
INPUT_PHONE = "phoneNumber"
}
src/features/auth/actions/loginUser.ts
+11 -19
View File
@@ -1,25 +1,17 @@
// features/auth/actions/loginUser.ts
import { useAuthStore } from '@/zustand/userStore'
import { login } from '@/lib/api/auth'
// Simulated API login
export async function loginUser(number: string, password: string) {
if (number == "123" && password == "123") {
// Simulate API call - replace with real one
const response = await new Promise<{ user: any }>((resolve) =>
setTimeout(() => {
resolve({
user: {
id: '123',
name: 'John Doe',
number,
token: 'mock-jwt-token',
},
})
}, 1000)
)
export async function loginUser(phoneNumber: string, password: string) {
if (phoneNumber == "123" && password == "123") {
let response = login({
phoneNumber,
password,
})
const { login } = useAuthStore.getState()
login(response.user)
{
const { login } = useAuthStore.getState()
login(response.user)
}
return true;
}
src/features/auth/actions/signupUser.ts
+19
View File
@@ -0,0 +1,19 @@
import { useAuthStore } from '@/zustand/userStore'
import { signup } from '@/lib/api/auth'
export async function signupUser(phoneNumber: string, password: string) {
if (phoneNumber == "1234" && password == "1234") {
let response = signup({
phoneNumber,
password,
})
{
const { login } = useAuthStore.getState()
login(response.user)
}
return true;
}
return false;
}
src/features/auth/actions/validatePhoneNumber.ts
+10
View File
@@ -0,0 +1,10 @@
import { checkUserExists } from '@/lib/api/auth'
export async function validatePhoneNumber(phoneNumber: string): Promise<boolean> {
try {
return await checkUserExists(phoneNumber)
} catch (e) {
console.error(e)
return false
}
}
src/features/auth/components/StepEnterNumber.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import PrimaryButton from '@/components/button/PrimaryButton';
import InputField from '@/components/input/InputField';
import { AUTH_PAGE_ELEMENT } from '@/enums';
import React from 'react'
type Props = {
@@ -19,7 +20,7 @@ function StepEnterNumber({ onSubmit, onChange, value }: Props) {
</div>
<InputField
className='mt-10'
htmlFor='phone'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
labelText='شماره همراه'
value={value}
placeholder='09120000000'
src/features/auth/components/StepEnterOtp.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import PrimaryButton from '@/components/button/PrimaryButton';
import OTPInputField from '@/components/input/MultiInputField';
import { AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
import React from 'react'
type Props = {
@@ -27,7 +27,7 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
<OTPInputField
className='mt-10'
maxLength={6}
htmlFor='otp'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
labelText=''
value={value}
placeholder=''
src/features/auth/components/StepEnterPassword.tsx
+3 -3
View File
@@ -24,7 +24,7 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
</div>
<InputField
className='mt-10'
htmlFor='password'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
labelText='کلمه عبور'
value={value}
placeholder=''
@@ -39,8 +39,8 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
<div className='inline-flex justify-between items-center'>
{/* TODO: customize checkbox */}
<label htmlFor='rememberMe' className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
<input id='rememberMe' className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} /> </div>
<label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
<input id={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} /> </div>
</div>
</div>
<PrimaryButton type='submit'>ورود به منو</PrimaryButton>
src/features/auth/components/StepNewPassword.tsx
+60
View File
@@ -0,0 +1,60 @@
import PrimaryButton from '@/components/button/PrimaryButton';
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
import InputField from '@/components/input/InputField';
import { AUTH_PAGE_ELEMENT } from '@/enums';
import React from 'react'
type Props = {
onSubmit: React.FormEventHandler<HTMLFormElement> | undefined;
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
value: string;
repeatValue: string;
reset?: boolean;
passwordVisible: boolean;
repeatPasswordVisible: boolean;
}
function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
return (
<form onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
<div className='block'>
<img src='/assets/images/login-banner.png' />
<div className='pt-4' dir='rtl'>
<h6 className='text-lg font-bold'>
{ reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور" }
</h6>
<p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
</div>
<InputField
className='mt-10'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
labelText='کلمه عبور'
value={value}
placeholder=''
onChange={onChange}
type={passwordVisible ? 'text' : 'password'}>
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
<EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
</button>
</InputField>
<InputField
valid={value === repeatValue}
className='mt-6'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
labelText='تکرار کلمه عبور'
value={repeatValue}
placeholder=''
onChange={onChange}
type={repeatPasswordVisible ? 'text' : 'password'}>
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
<EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
</button>
</InputField>
</div>
<PrimaryButton type='submit'>ورود</PrimaryButton>
</form>
)
}
export default StepNewPassword
src/lib/api/auth.ts
+41
View File
@@ -0,0 +1,41 @@
const BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.example.com'
export async function checkUserExists(phoneNumber: string): Promise<boolean> {
const res = phoneNumber === "123";
const data = { status: 200, result: { exists: res } }
return data.result.exists
}
export async function signup(userData: {
phoneNumber: string,
password: string
}) {
const res = userData.phoneNumber === "123" && userData.password === "123";
const data = { sucess: res }
return {
data,
user: {
id: '123',
name: 'John Doe',
number: userData.phoneNumber,
token: 'mock-jwt-token',
}
}
}
export async function login(credentials: {
phoneNumber: string,
password: string
}) {
const res = credentials.phoneNumber === "1234" && credentials.password === "1234";
const data = { sucess: res }
return {
data,
user: {
id: '1234',
name: 'Foo bar',
number: credentials.phoneNumber,
token: 'mock-jwt-token',
}
}
}