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 { useLayout } from '@/providers';
|
||||||
import { Alert } from '@/components';
|
import { Alert } from '@/components';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
const loginSchema = Yup.object().shape({
|
const loginSchema = Yup.object().shape({
|
||||||
username: Yup.string().required('Username is required'),
|
username: Yup.string().required('Username is required'),
|
||||||
@ -76,101 +77,106 @@ const Login = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card max-w-[390px] w-full">
|
<>
|
||||||
<form
|
<Helmet>
|
||||||
className="card-body flex flex-col gap-5 p-10"
|
<title>TPAY | Sign In</title>
|
||||||
onSubmit={formik.handleSubmit}
|
</Helmet>
|
||||||
noValidate
|
<div className="card max-w-[390px] w-full">
|
||||||
>
|
<form
|
||||||
<div className="text-center">
|
className="card-body flex flex-col gap-5 p-10"
|
||||||
<h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
|
onSubmit={formik.handleSubmit}
|
||||||
</div>
|
noValidate
|
||||||
{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'}
|
<div className="text-center">
|
||||||
</button>
|
<h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
|
||||||
<div>
|
</div>
|
||||||
<p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}>
|
{formik.status && <Alert variant="danger">{formik.status}</Alert>}
|
||||||
Copyright {moment().year()} © Telkomcel All rights reserved.
|
<div className="flex flex-col gap-1">
|
||||||
</p>
|
<label className="form-label text-gray-900 ps-2.5">Login</label>
|
||||||
</div>
|
<label className="input">
|
||||||
</form>
|
<input
|
||||||
</div>
|
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 { Alert, KeenIcon } from '@/components';
|
||||||
import { useLayout } from '@/providers';
|
import { useLayout } from '@/providers';
|
||||||
import { AxiosError } from 'axios';
|
import { AxiosError } from 'axios';
|
||||||
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
const initialValues = {
|
const initialValues = {
|
||||||
email: ''
|
email: ''
|
||||||
@ -64,70 +65,75 @@ const ResetPassword = () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div className="card max-w-[370px] w-full">
|
<>
|
||||||
<form
|
<Helmet>
|
||||||
className="card-body flex flex-col gap-5 p-10"
|
<title>TPAY | Reset Password</title>
|
||||||
noValidate
|
</Helmet>
|
||||||
onSubmit={formik.handleSubmit}
|
<div className="card max-w-[370px] w-full">
|
||||||
>
|
<form
|
||||||
<div className="text-center">
|
className="card-body flex flex-col gap-5 p-10"
|
||||||
<h3 className="text-lg font-semibold text-gray-900">Your Email</h3>
|
noValidate
|
||||||
<span className="text-2sm text-gray-600 font-medium">
|
onSubmit={formik.handleSubmit}
|
||||||
Enter your email to reset password
|
>
|
||||||
</span>
|
<div className="text-center">
|
||||||
</div>
|
<h3 className="text-lg font-semibold text-gray-900">Your Email</h3>
|
||||||
|
<span className="text-2sm text-gray-600 font-medium">
|
||||||
{hasErrors && <Alert variant="danger">{formik.status}</Alert>}
|
Enter your email to reset password
|
||||||
|
|
||||||
{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}
|
|
||||||
</span>
|
</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">
|
<div className="flex flex-col gap-1">
|
||||||
<button
|
<label className="form-label text-gray-900">Email</label>
|
||||||
type="submit"
|
<label className="input">
|
||||||
className="btn btn-primary flex justify-center grow"
|
<input
|
||||||
disabled={loading || formik.isSubmitting}
|
type="email"
|
||||||
>
|
placeholder="email@email.com"
|
||||||
{loading ? 'Please wait...' : 'Continue'}
|
autoComplete="off"
|
||||||
</button>
|
{...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
|
<div className="flex flex-col gap-5 items-stretch">
|
||||||
to={currentLayout?.name === 'auth-branded' ? '/auth/login' : '/auth/classic/login'}
|
<button
|
||||||
className="flex items-center justify-center text-sm gap-2 text-gray-700 hover:text-primary"
|
type="submit"
|
||||||
>
|
className="btn btn-primary flex justify-center grow"
|
||||||
<KeenIcon icon="black-left" />
|
disabled={loading || formik.isSubmitting}
|
||||||
Back to Login
|
>
|
||||||
</Link>
|
{loading ? 'Please wait...' : 'Continue'}
|
||||||
</div>
|
</button>
|
||||||
</form>
|
|
||||||
</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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -155,7 +155,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'type.name',
|
accessorKey: 'type.name',
|
||||||
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
|
header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
|
||||||
enableSorting: false,
|
enableSorting: false,
|
||||||
enableHiding: false,
|
enableHiding: false,
|
||||||
meta: {
|
meta: {
|
||||||
|
|||||||
@ -157,7 +157,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'type.name',
|
accessorKey: 'type.name',
|
||||||
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
|
header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
|
||||||
enableSorting: false,
|
enableSorting: false,
|
||||||
enableHiding: false,
|
enableHiding: false,
|
||||||
meta: {
|
meta: {
|
||||||
|
|||||||
Reference in New Issue
Block a user