chore: authentication container changed to auth steps
This commit is contained in:
@@ -1,12 +1,12 @@
|
|||||||
import React, { useState, type JSX } from 'react';
|
import React, { useState, type JSX } from 'react';
|
||||||
import { LoginRegisterForm } from './LoginRegiserForm';
|
import { LoginRegisterForm } from './LoginRegiserForm';
|
||||||
import type { AuthMode, AuthType } from '../types/auth-types';
|
import type { AuthMode, AuthType } from '../../types/auth-types';
|
||||||
import { OtpVerifyForm } from './OtpVerifyForm';
|
import { OtpVerifyForm } from './OtpVerifyForm';
|
||||||
import { isNumeric } from '@/utils/regexes/isNumeric';
|
import { isNumeric } from '@/utils/regexes/isNumeric';
|
||||||
import { CompleteSignUp } from './CompleteSignUp';
|
import { CompleteSignUp } from './CompleteSignUp';
|
||||||
import { EnterPasswordForm } from './EnterPasswordForm';
|
import { EnterPasswordForm } from './EnterPasswordForm';
|
||||||
|
|
||||||
export const AuthenticationContainer = (): JSX.Element => {
|
export const AuthenticationSteps = (): JSX.Element => {
|
||||||
const [authMode, setAuthMode] = useState<AuthMode>('register');
|
const [authMode, setAuthMode] = useState<AuthMode>('register');
|
||||||
const [authType, setAuthType] = useState<AuthType>('phone');
|
const [authType, setAuthType] = useState<AuthType>('phone');
|
||||||
const [currentStep, setCurrentStep] = useState<
|
const [currentStep, setCurrentStep] = useState<
|
||||||
@@ -3,7 +3,7 @@ import parsePhoneNumberFromString from 'libphonenumber-js';
|
|||||||
import React, { useRef, useState, type Dispatch } from 'react';
|
import React, { useRef, useState, type Dispatch } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { CountryCodeSelector } from './CountryCodeSelector';
|
import { CountryCodeSelector } from './CountryCodeSelector';
|
||||||
import { AuthenticationCard } from './AuthenticationCard';
|
import { AuthenticationCard } from '../AuthenticationCard';
|
||||||
|
|
||||||
export interface CompleteSignUpProps {
|
export interface CompleteSignUpProps {
|
||||||
email: string;
|
email: string;
|
||||||
@@ -10,7 +10,7 @@ import {
|
|||||||
Typography,
|
Typography,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { useMemo, useRef, useState, type RefObject } from 'react';
|
import { useMemo, useRef, useState, type RefObject } from 'react';
|
||||||
import { countries, type Country } from '../data/countries';
|
import { countries, type Country } from '../../data/countries';
|
||||||
import { ArrowDown2 } from 'iconsax-reactjs';
|
import { ArrowDown2 } from 'iconsax-reactjs';
|
||||||
import ReactCountryFlag from 'react-country-flag';
|
import ReactCountryFlag from 'react-country-flag';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useRef, useState } from 'react';
|
import React, { useRef, useState } from 'react';
|
||||||
import { AuthenticationCard } from './AuthenticationCard';
|
import { AuthenticationCard } from '../AuthenticationCard';
|
||||||
import { ArrowLeft, Edit2, Eye, EyeSlash, MaskLeft } from 'iconsax-reactjs';
|
import { ArrowLeft, Edit2, Eye, EyeSlash, MaskLeft } from 'iconsax-reactjs';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
@@ -11,10 +11,10 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { CountryCodeSelector } from './CountryCodeSelector';
|
import { CountryCodeSelector } from './CountryCodeSelector';
|
||||||
import { Google } from 'iconsax-reactjs';
|
import { Google } from 'iconsax-reactjs';
|
||||||
import { isNumeric } from '@/utils/regexes/isNumeric';
|
import { isNumeric } from '@/utils/regexes/isNumeric';
|
||||||
import type { AuthMode, AuthType } from '../types/auth-types';
|
import type { AuthMode, AuthType } from '../../types/auth-types';
|
||||||
import { isEmail } from '@/utils/regexes/isEmail';
|
import { isEmail } from '@/utils/regexes/isEmail';
|
||||||
import parsePhoneNumberFromString from 'libphonenumber-js';
|
import parsePhoneNumberFromString from 'libphonenumber-js';
|
||||||
import { AuthenticationCard } from './AuthenticationCard';
|
import { AuthenticationCard } from '../AuthenticationCard';
|
||||||
|
|
||||||
export interface LoginRegisterFormProps {
|
export interface LoginRegisterFormProps {
|
||||||
loginRegisterValue: string;
|
loginRegisterValue: string;
|
||||||
@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material';
|
import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material';
|
||||||
import { Edit2 } from 'iconsax-reactjs';
|
import { Edit2 } from 'iconsax-reactjs';
|
||||||
import DigitInput from '@/components/components/DigitsInput';
|
import DigitInput from '@/components/components/DigitsInput';
|
||||||
import type { AuthMode, AuthType } from '../types/auth-types';
|
import type { AuthMode, AuthType } from '../../types/auth-types';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Toast } from '@/components/Toast';
|
import { Toast } from '@/components/Toast';
|
||||||
import { AuthenticationCard } from './AuthenticationCard';
|
import { AuthenticationCard } from '../AuthenticationCard';
|
||||||
|
|
||||||
interface OtpVerifyFormProps {
|
interface OtpVerifyFormProps {
|
||||||
value: string;
|
value: string;
|
||||||
@@ -2,7 +2,7 @@ import { FlexBox } from '@/components/components/common/FlexBox';
|
|||||||
import Logo from '@/components/Logo';
|
import Logo from '@/components/Logo';
|
||||||
import { Paper } from '@mui/material';
|
import { Paper } from '@mui/material';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { AuthenticationContainer } from '../components/AuthenticationContainer';
|
import { AuthenticationSteps } from '../components/AuthenticationSteps/AuthenticationSteps';
|
||||||
|
|
||||||
export function AuthenticationPage() {
|
export function AuthenticationPage() {
|
||||||
return (
|
return (
|
||||||
@@ -16,7 +16,7 @@ export function AuthenticationPage() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Logo />
|
<Logo />
|
||||||
<AuthenticationContainer />
|
<AuthenticationSteps />
|
||||||
</FlexBox>
|
</FlexBox>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user