update title in sign in & forgot password, change name in transaction to transaction type
This commit is contained in:
wayanrivan
@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth';
|
||||
import { useLayout } from '@/providers';
|
||||
import { Alert } from '@/components';
|
||||
import moment from 'moment';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
const loginSchema = Yup.object().shape({
|
||||
username: Yup.string().required('Username is required'),
|
||||
@ -76,101 +77,106 @@ const Login = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card max-w-[390px] w-full">
|
||||
<form
|
||||
className="card-body flex flex-col gap-5 p-10"
|
||||
onSubmit={formik.handleSubmit}
|
||||
noValidate
|
||||
>
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
|
||||
</div>
|
||||
{formik.status && <Alert variant="danger">{formik.status}</Alert>}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="form-label text-gray-900 ps-2.5">Login</label>
|
||||
<label className="input">
|
||||
<input
|
||||
placeholder="Enter username"
|
||||
autoComplete="off"
|
||||
{...formik.getFieldProps('username')}
|
||||
className={clsx('form-control', {
|
||||
'is-invalid': formik.touched.username && formik.errors.username
|
||||
})}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
</label>
|
||||
{formik.touched.username && formik.errors.username && (
|
||||
<span role="alert" className="text-danger text-xs mt-1">
|
||||
{formik.errors.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<label className="form-label text-gray-900 ps-2.5">Password</label>
|
||||
</div>
|
||||
<label className="input">
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Enter Password"
|
||||
autoComplete="off"
|
||||
{...formik.getFieldProps('password')}
|
||||
className={clsx('form-control', {
|
||||
'is-invalid': formik.touched.password && formik.errors.password
|
||||
})}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
<button className="btn btn-icon" onClick={togglePassword} type="button">
|
||||
<KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />
|
||||
<KeenIcon
|
||||
icon="eye-slash"
|
||||
className={clsx('text-gray-500', { hidden: !showPassword })}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
{formik.touched.password && formik.errors.password && (
|
||||
<span role="alert" className="text-danger text-xs mt-1">
|
||||
{formik.errors.password}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<label className="checkbox-group">
|
||||
<input
|
||||
className="checkbox checkbox-sm"
|
||||
type="checkbox"
|
||||
{...formik.getFieldProps('remember')}
|
||||
/>
|
||||
<span className="checkbox-label">Remember me</span>
|
||||
</label>
|
||||
<Link
|
||||
to={
|
||||
currentLayout?.name === 'auth-branded'
|
||||
? '/auth/reset-password'
|
||||
: '/auth/classic/reset-password'
|
||||
}
|
||||
className="text-2sm link shrink-0"
|
||||
>
|
||||
Forgot Password?
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary flex justify-center grow"
|
||||
disabled={loading || formik.isSubmitting}
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | Sign In</title>
|
||||
</Helmet>
|
||||
<div className="card max-w-[390px] w-full">
|
||||
<form
|
||||
className="card-body flex flex-col gap-5 p-10"
|
||||
onSubmit={formik.handleSubmit}
|
||||
noValidate
|
||||
>
|
||||
{loading ? 'Please wait...' : 'Sign In'}
|
||||
</button>
|
||||
<div>
|
||||
<p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}>
|
||||
Copyright {moment().year()} © Telkomcel All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
|
||||
</div>
|
||||
{formik.status && <Alert variant="danger">{formik.status}</Alert>}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="form-label text-gray-900 ps-2.5">Login</label>
|
||||
<label className="input">
|
||||
<input
|
||||
placeholder="Enter username"
|
||||
autoComplete="off"
|
||||
{...formik.getFieldProps('username')}
|
||||
className={clsx('form-control', {
|
||||
'is-invalid': formik.touched.username && formik.errors.username
|
||||
})}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
</label>
|
||||
{formik.touched.username && formik.errors.username && (
|
||||
<span role="alert" className="text-danger text-xs mt-1">
|
||||
{formik.errors.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<label className="form-label text-gray-900 ps-2.5">Password</label>
|
||||
</div>
|
||||
<label className="input">
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Enter Password"
|
||||
autoComplete="off"
|
||||
{...formik.getFieldProps('password')}
|
||||
className={clsx('form-control', {
|
||||
'is-invalid': formik.touched.password && formik.errors.password
|
||||
})}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
<button className="btn btn-icon" onClick={togglePassword} type="button">
|
||||
<KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />
|
||||
<KeenIcon
|
||||
icon="eye-slash"
|
||||
className={clsx('text-gray-500', { hidden: !showPassword })}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
{formik.touched.password && formik.errors.password && (
|
||||
<span role="alert" className="text-danger text-xs mt-1">
|
||||
{formik.errors.password}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<label className="checkbox-group">
|
||||
<input
|
||||
className="checkbox checkbox-sm"
|
||||
type="checkbox"
|
||||
{...formik.getFieldProps('remember')}
|
||||
/>
|
||||
<span className="checkbox-label">Remember me</span>
|
||||
</label>
|
||||
<Link
|
||||
to={
|
||||
currentLayout?.name === 'auth-branded'
|
||||
? '/auth/reset-password'
|
||||
: '/auth/classic/reset-password'
|
||||
}
|
||||
className="text-2sm link shrink-0"
|
||||
>
|
||||
Forgot Password?
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary flex justify-center grow"
|
||||
disabled={loading || formik.isSubmitting}
|
||||
>
|
||||
{loading ? 'Please wait...' : 'Sign In'}
|
||||
</button>
|
||||
<div>
|
||||
<p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}>
|
||||
Copyright {moment().year()} © Telkomcel All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth/useAuthContext';
|
||||
import { Alert, KeenIcon } from '@/components';
|
||||
import { useLayout } from '@/providers';
|
||||
import { AxiosError } from 'axios';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
const initialValues = {
|
||||
email: ''
|
||||
@ -64,70 +65,75 @@ const ResetPassword = () => {
|
||||
}
|
||||
});
|
||||
return (
|
||||
<div className="card max-w-[370px] w-full">
|
||||
<form
|
||||
className="card-body flex flex-col gap-5 p-10"
|
||||
noValidate
|
||||
onSubmit={formik.handleSubmit}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Your Email</h3>
|
||||
<span className="text-2sm text-gray-600 font-medium">
|
||||
Enter your email to reset password
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{hasErrors && <Alert variant="danger">{formik.status}</Alert>}
|
||||
|
||||
{hasErrors === false && (
|
||||
<Alert variant="success">
|
||||
Password reset link sent. Please check your email to proceed
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="form-label text-gray-900">Email</label>
|
||||
<label className="input">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email@email.com"
|
||||
autoComplete="off"
|
||||
{...formik.getFieldProps('email')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{ 'is-invalid': formik.touched.email && formik.errors.email },
|
||||
{
|
||||
'is-valid': formik.touched.email && !formik.errors.email
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
{formik.touched.email && formik.errors.email && (
|
||||
<span role="alert" className="text-danger text-xs mt-1">
|
||||
{formik.errors.email}
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | Reset Password</title>
|
||||
</Helmet>
|
||||
<div className="card max-w-[370px] w-full">
|
||||
<form
|
||||
className="card-body flex flex-col gap-5 p-10"
|
||||
noValidate
|
||||
onSubmit={formik.handleSubmit}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Your Email</h3>
|
||||
<span className="text-2sm text-gray-600 font-medium">
|
||||
Enter your email to reset password
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{hasErrors && <Alert variant="danger">{formik.status}</Alert>}
|
||||
|
||||
{hasErrors === false && (
|
||||
<Alert variant="success">
|
||||
Password reset link sent. Please check your email to proceed
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-5 items-stretch">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary flex justify-center grow"
|
||||
disabled={loading || formik.isSubmitting}
|
||||
>
|
||||
{loading ? 'Please wait...' : 'Continue'}
|
||||
</button>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="form-label text-gray-900">Email</label>
|
||||
<label className="input">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email@email.com"
|
||||
autoComplete="off"
|
||||
{...formik.getFieldProps('email')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{ 'is-invalid': formik.touched.email && formik.errors.email },
|
||||
{
|
||||
'is-valid': formik.touched.email && !formik.errors.email
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
{formik.touched.email && formik.errors.email && (
|
||||
<span role="alert" className="text-danger text-xs mt-1">
|
||||
{formik.errors.email}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={currentLayout?.name === 'auth-branded' ? '/auth/login' : '/auth/classic/login'}
|
||||
className="flex items-center justify-center text-sm gap-2 text-gray-700 hover:text-primary"
|
||||
>
|
||||
<KeenIcon icon="black-left" />
|
||||
Back to Login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex flex-col gap-5 items-stretch">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary flex justify-center grow"
|
||||
disabled={loading || formik.isSubmitting}
|
||||
>
|
||||
{loading ? 'Please wait...' : 'Continue'}
|
||||
</button>
|
||||
|
||||
<Link
|
||||
to={currentLayout?.name === 'auth-branded' ? '/auth/login' : '/auth/classic/login'}
|
||||
className="flex items-center justify-center text-sm gap-2 text-gray-700 hover:text-primary"
|
||||
>
|
||||
<KeenIcon icon="black-left" />
|
||||
Back to Login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user