add: login page fundamentals
This commit is contained in:
Mahyar Khanbolooki
@@ -0,0 +1,221 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, type FormEvent, type ChangeEvent, useEffect, useRef } from 'react'
|
||||
import PrimaryButton from '@/components/button/PrimaryButton'
|
||||
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
|
||||
import InputField from '@/components/input/InputField';
|
||||
import OTPInputField from '@/components/input/MultiInputField';
|
||||
|
||||
enum LOGIN_STEPS {
|
||||
ENTER_NUMBER = 0,
|
||||
ENTER_PASSWORD = 1,
|
||||
ENTER_OTP = 2,
|
||||
}
|
||||
|
||||
enum CLICK_ID {
|
||||
TOGGLE_PASSWORD = "togglePassword",
|
||||
RESET_PASSWORD = "resetPassword",
|
||||
RESEND_OTP = "resendOtp"
|
||||
}
|
||||
|
||||
type Props = object
|
||||
|
||||
function AuthIndex({ }: Props) {
|
||||
const [number, setNumber] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [rememberMe, setRememberMe] = useState(false);
|
||||
const [step, setStep] = useState(LOGIN_STEPS.ENTER_NUMBER);
|
||||
const [timerRunning, setTimerRunning] = useState(false);
|
||||
const [secondLeft, setSecondsLeft] = useState(0);
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null); // ← useRef for interval
|
||||
|
||||
useEffect(() => {
|
||||
if (timerRunning && intervalRef.current === null) {
|
||||
intervalRef.current = setInterval(() => {
|
||||
setSecondsLeft((state) => {
|
||||
if (state <= 1) { // changed to <= 1 to prevent negative values
|
||||
setTimerRunning(false);
|
||||
clearInterval(intervalRef.current!);
|
||||
intervalRef.current = null;
|
||||
return 0;
|
||||
}
|
||||
return state - 1;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
// Cleanup if component unmounts or timerRunning changes
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
intervalRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [timerRunning]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (step == LOGIN_STEPS.ENTER_OTP) {
|
||||
setSecondsLeft(30);
|
||||
setTimerRunning(true);
|
||||
}
|
||||
return () => {
|
||||
|
||||
}
|
||||
}, [step])
|
||||
|
||||
const updateInput = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.id == "phone") {
|
||||
setNumber(() => e.target.value)
|
||||
}
|
||||
else if (e.target.id == "password") {
|
||||
setPassword(() => e.target.value)
|
||||
}
|
||||
else if (e.target.id == "rememberMe") {
|
||||
setRememberMe((state) => !state)
|
||||
}
|
||||
else if (e.target.id.startsWith("otp-data")) {
|
||||
const index = +e.target.id.split('-')[2];
|
||||
const prev = otp.padEnd(6).split('');
|
||||
prev[index] = e.target.value;
|
||||
const next = prev.join('');
|
||||
setOtp(next.trimEnd());
|
||||
}
|
||||
}
|
||||
|
||||
const onClickEvent = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
e.stopPropagation();
|
||||
const target = e.target as HTMLButtonElement;
|
||||
|
||||
if (target.id === CLICK_ID.TOGGLE_PASSWORD) {
|
||||
setShowPassword((state) => !state);
|
||||
}
|
||||
else if (target.id === CLICK_ID.RESET_PASSWORD) {
|
||||
setShowPassword((state) => !state);
|
||||
}
|
||||
else if (target.id === CLICK_ID.RESEND_OTP) {
|
||||
setSecondsLeft(30);
|
||||
setTimerRunning(true);
|
||||
}
|
||||
};
|
||||
|
||||
const submit = (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
console.log("STEP: ", step)
|
||||
if (step == LOGIN_STEPS.ENTER_NUMBER) {
|
||||
setStep(LOGIN_STEPS.ENTER_PASSWORD)
|
||||
}
|
||||
if (step == LOGIN_STEPS.ENTER_PASSWORD) {
|
||||
setStep(LOGIN_STEPS.ENTER_OTP)
|
||||
}
|
||||
if (step == LOGIN_STEPS.ENTER_OTP) {
|
||||
setStep(LOGIN_STEPS.ENTER_NUMBER)
|
||||
setTimerRunning(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (step == LOGIN_STEPS.ENTER_NUMBER) {
|
||||
// First Step -> Enter number
|
||||
return (
|
||||
<form onSubmit={submit} 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'>ورود به سیستم</h6>
|
||||
<p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
|
||||
</div>
|
||||
<InputField
|
||||
className='mt-10'
|
||||
htmlFor='phone'
|
||||
labelText='شماره همراه'
|
||||
value={number}
|
||||
placeholder='09120000000'
|
||||
onChange={updateInput}
|
||||
type='number' />
|
||||
</div>
|
||||
<PrimaryButton type='submit'>بعدی</PrimaryButton>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
if (step == LOGIN_STEPS.ENTER_PASSWORD) {
|
||||
return (
|
||||
<form onSubmit={submit} 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'>ورود به سیستم</h6>
|
||||
<p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
|
||||
</div>
|
||||
<InputField
|
||||
className='mt-10'
|
||||
htmlFor='password'
|
||||
labelText='کلمه عبور'
|
||||
value={password}
|
||||
placeholder=''
|
||||
onChange={updateInput}
|
||||
type={showPassword ? 'text' : 'password'}>
|
||||
<button className='ps-3' id={CLICK_ID.TOGGLE_PASSWORD} type='button' onClick={onClickEvent}>
|
||||
<EyeToggleIcon slash={showPassword} className="pointer-events-none" />
|
||||
</button>
|
||||
</InputField>
|
||||
<div className='inline-flex justify-between items-center w-full pt-3'>
|
||||
<button id={CLICK_ID.RESET_PASSWORD} type='button' onClick={onClickEvent} className='text-sm2 cursor-pointer'>بازیابی کلمه عبور</button>
|
||||
|
||||
<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={updateInput} type='checkbox' checked={rememberMe} /> </div>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton type='submit'>ورود به منو</PrimaryButton>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
if (step == LOGIN_STEPS.ENTER_OTP) {
|
||||
return (
|
||||
<form onSubmit={submit} 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'>
|
||||
{/* // TODO: add persian digits font */}
|
||||
<h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
|
||||
<p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {number} را وارد نمایید.</p>
|
||||
</div>
|
||||
<OTPInputField
|
||||
className='mt-10'
|
||||
maxLength={6}
|
||||
htmlFor='otp'
|
||||
labelText=''
|
||||
value={otp}
|
||||
placeholder=''
|
||||
onChange={updateInput}
|
||||
type='text'>
|
||||
|
||||
</OTPInputField>
|
||||
<div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
|
||||
<div dir='rtl'>
|
||||
{timerRunning ?
|
||||
<div>{secondLeft} ثانیه دیگر تا دریافت کد</div> :
|
||||
<div>
|
||||
کد را دریافت نکردید؟
|
||||
<span className='text-primary px-1'>
|
||||
<button id={CLICK_ID.RESEND_OTP} className='cursor-pointer' onClick={onClickEvent}>
|
||||
دوباره امتحان کنید
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton type='submit'>بعدی</PrimaryButton>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default AuthIndex
|
||||
+54
-16
@@ -1,26 +1,64 @@
|
||||
@import "tailwindcss";
|
||||
@import "../../public/assets/css/fonts.css";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
@theme {
|
||||
--font-irancell: "Irancell";
|
||||
|
||||
--color-background: #FFFFFF;
|
||||
--color-primary: #C39854;
|
||||
--color-foreground: #333333;
|
||||
--color-disabled: #999999;
|
||||
--radius-normal: 10px;
|
||||
--text-sm2: 13px;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
html,
|
||||
body {
|
||||
@apply h-full bg-background font-irancell font-normal text-foreground;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* color-scheme: dark; */
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
font-family: "fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
color: var(--color-disabled);
|
||||
margin: 10px 0px 10px 0px;
|
||||
font-size: 34px;
|
||||
/* Controls dot size (width & height) */
|
||||
line-height: 8px;
|
||||
/* Ensures vertical alignment */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
|
||||
/* add spacing to better separate each image */
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user