Skip to content

Commit

Permalink
modal UI + user birthdate
Browse files Browse the repository at this point in the history
  • Loading branch information
@quannguyen2724
quannguyen2724 committed Jul 24, 2024
1 parent e4a0c2f commit a5460ef
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 123 deletions.
8 changes: 4 additions & 4 deletions src/components/Modal/ConnectModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import MainButton from 'components/Button/MainButton'
import ChupButton from 'components/core/Button/ChupButton'
import Modal from 'components/Modal'
import Spinner from 'components/Spinner'
import CopySvg from 'images/icons/copy.svg'
Expand Down Expand Up @@ -262,14 +262,14 @@ export default function ConnectModal() {
</div>
</div>
))}
<MainButton
size='medium'
<ChupButton
size='md'
className='w-fit mx-auto mt-3'
onClick={() => {
setOpen(false)
}}>
{t('Close')}
</MainButton>
</ChupButton>
</div>
) : (
<div className='flex flex-col gap-6'>
Expand Down
147 changes: 83 additions & 64 deletions src/components/pages/profile/changingPasswordModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import FilledButton from 'components/Button/FilledButton'
import OutlineTextField from 'components/Input/TextField/Outline'
import Modal from 'components/Modal'
import Image from 'next/image'
import { useContext, useEffect, useRef, useState } from 'react'
import { Context } from 'src/context'
Expand All @@ -13,6 +12,7 @@ import Eye from 'assets/images/icons/eye.svg'
import EyeClosed from 'assets/images/icons/eye_closed.svg'
import MainButton from 'components/Button/MainButton'
import ChupButton from 'components/core/Button/ChupButton'
import { Box, Modal } from '@mui/material'
export default function ChangingPasswordModal({ open, setOpen }) {
const [success, setSuccess] = useState(false)
const [loading, setLoading] = useState(false)
Expand Down Expand Up @@ -94,81 +94,100 @@ export default function ChangingPasswordModal({ open, setOpen }) {
}

return (
<Modal open={open} setOpen={setOpen} hideClose={success} preventClickOutsideToClose>
<div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
<div className={` flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Change password')}</p>
<OutlineTextField
label={t('Old password')}
value={currentPassword}
onChange={setCurrentPassword}
placeholder={t('Enter current password')}
errorMsg={currentPasswordError}
onKeyDown={(e) => {
if (e.which == 13) {
r1.current?.focus()
}
}}
type='password'
/>
<div>
<Modal
open={open}
onClose={() => !success && setOpen(false)}
aria-labelledby="change-password-modal"
aria-describedby="modal-to-change-password"
>
<Box
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 'auto',
bgcolor: 'background.paper',
boxShadow: 24,
p: 1,
borderRadius: 2,
minHeight: '400px',
}}
>
<div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
<div className={`flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Change password')}</p>
<OutlineTextField
label={t('New password')}
value={newPassword}
onChange={setNewPassword}
type='password'
placeholder={t('Enter new password')}
inputRef={r1}
label={t('Old password')}
value={currentPassword}
onChange={setCurrentPassword}
placeholder={t('Enter current password')}
errorMsg={currentPasswordError}
onKeyDown={(e) => {
if (e.which == 13) {
r2.current?.focus()
r1.current?.focus()
}
}}
/>
<OutlineTextField
label={t('Confirm new password')}
value={rePassword}
onChange={setRePassword}
type='password'
trailingComponent={
<div className='flex items-center gap-[10px]'>
{repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
</div>
}
errorMsg={rePasswordError}
inputRef={r2}
placeholder={t('Re-enter new password')}
/>
</div>
<ChupButton
size='sm'
disabled={!newPassword || !rePassword || !currentPassword}
className='w-full'
loading={loading}
onClick={changePasswordHandler}>
{t('Confirm')}
</ChupButton>
</div>
<div
className={`absolute inset-0 py-6 px-4 flex flex-col gap-6 transition-all duration-300 ${
success ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Successful password change')}!</p>
<Image src={SuccessImg} alt='' className='w-[188px] mx-auto max-h-[188px]' />
<div className='flex flex-col gap-2'>
<p className='text-sm leading-[18px] font-semibold text-center w-[246px] mx-auto'>
{t('You can use the new password to log in Punkga now')}
</p>
<div>
<OutlineTextField
label={t('New password')}
value={newPassword}
onChange={setNewPassword}
type='password'
placeholder={t('Enter new password')}
inputRef={r1}
onKeyDown={(e) => {
if (e.which == 13) {
r2.current?.focus()
}
}}
/>
<OutlineTextField
label={t('Confirm new password')}
value={rePassword}
onChange={setRePassword}
type='password'
trailingComponent={
<div className='flex items-center gap-[10px]'>
{repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
</div>
}
errorMsg={rePasswordError}
inputRef={r2}
placeholder={t('Re-enter new password')}
/>
</div>
<ChupButton
size='sm'
disabled={!newPassword || !rePassword || !currentPassword}
className='w-full'
onClick={() => {
setOpen(false)
}}>
{t('Continue')}
loading={loading}
onClick={changePasswordHandler}>
{t('Confirm')}
</ChupButton>
</div>
<div
className={`absolute inset-0 py-6 px-4 flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Successful password change')}!</p>
<Image src={SuccessImg} alt='' className='w-[188px] mx-auto max-h-[188px]' />
<div className='flex flex-col gap-2'>
<p className='text-sm leading-[18px] font-semibold text-center w-[246px] mx-auto'>
{t('You can use the new password to log in Punkga now')}
</p>
<ChupButton
className='w-full'
onClick={() => {
setOpen(false)
}}>
{t('Continue')}
</ChupButton>
</div>
</div>
</div>
</div>
</Box>
</Modal>
)
}
9 changes: 8 additions & 1 deletion src/components/pages/profile/newInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
},
}));

function formatDate(dateString) {
if (!dateString) return '';

const [year, month, day] = dateString.split('/');
return `${day}/${month}/${year}`;
}

export default function NewInfo() {
const router = useRouter()
const { account, getProfile } = useContext(Context)
Expand Down Expand Up @@ -200,7 +207,7 @@ export default function NewInfo() {
<div>{t(account.gender)}</div>
<div>{account.gender ? '•' : ''}</div>
<div>
{account?.birthdate ? account.birthdate.replace(/-/g, '/') : ''}
{account?.birthdate ? formatDate(account.birthdate.replace(/-/g, '/')) : ''}
</div>

</div>
Expand Down
125 changes: 71 additions & 54 deletions src/components/pages/profile/settingPasswordModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import FilledButton from 'components/Button/FilledButton'
import MainButton from 'components/Button/MainButton'
import { Box, Modal } from '@mui/material'
import OutlineTextField from 'components/Input/TextField/Outline'
import Modal from 'components/Modal'
import ChupButton from 'components/core/Button/ChupButton'
import SuccessImg from 'images/Mascot2.png'
import CheckSquare from 'images/icons/check_square_fill.svg'
Expand Down Expand Up @@ -72,60 +70,79 @@ export default function SettingPasswordModal({ open, setOpen, profile }) {
}

return (
<Modal open={open} setOpen={setOpen} hideClose={success} preventClickOutsideToClose>
<div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
<div className={` flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Set password')}</p>
<div>
<OutlineTextField
label={t('New password')}
value={newPassword}
onChange={setNewPassword}
type='password'
placeholder={t('Enter new password')}
onKeyDown={(e) => {
if (e.which == 13) {
r1.current?.focus()
<Modal
open={open}
onClose={() => !success && setOpen(false)}
aria-labelledby="change-password-modal"
aria-describedby="modal-to-change-password"
>
<Box
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 'auto',
bgcolor: 'background.paper',
boxShadow: 24,
p: 1,
borderRadius: 2,
minHeight: '400px',
}}
>
<div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
<div className={` flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Set password')}</p>
<div>
<OutlineTextField
label={t('New password')}
value={newPassword}
onChange={setNewPassword}
type='password'
placeholder={t('Enter new password')}
onKeyDown={(e) => {
if (e.which == 13) {
r1.current?.focus()
}
}}
/>
<OutlineTextField
label={t('Confirm new password')}
value={rePassword}
onChange={setRePassword}
type='password'
trailingComponent={
<div className='flex items-center gap-[10px]'>
{repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
</div>
}
}}
/>
<OutlineTextField
label={t('Confirm new password')}
value={rePassword}
onChange={setRePassword}
type='password'
trailingComponent={
<div className='flex items-center gap-[10px]'>
{repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
</div>
}
errorMsg={rePasswordError}
placeholder={t('Re-enter new password')}
inputRef={r1}
/>
errorMsg={rePasswordError}
placeholder={t('Re-enter new password')}
inputRef={r1}
/>
</div>
<ChupButton size='sm' className='w-full' disabled={!newPassword || !rePassword} loading={loading} onClick={setPasswordHandler}>
{t('Confirm')}
</ChupButton>
</div>
<div
className={`absolute inset-0 py-6 px-4 flex flex-col gap-4 transition-all duration-300 ${success ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Password set')}!</p>
<Image src={SuccessImg} alt='' className='mx-auto max-h-[188px] w-[188px]' />
<p className='text-sm leading-[18px] font-semibold text-center w-[274px] mx-auto text-[#414141]'>
{t('You can use the new password to log in Punkga now')}
</p>
<ChupButton
className='w-full'
onClick={() => {
setOpen(false)
}}>
{t('Confirm')}
</ChupButton>
</div>
<ChupButton size='sm' className='w-full' disabled={!newPassword || !rePassword} loading={loading} onClick={setPasswordHandler}>
{t('Confirm')}
</ChupButton>
</div>
<div
className={`absolute inset-0 py-6 px-4 flex flex-col gap-4 transition-all duration-300 ${
success ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<p className='text-center text-xl leading-6 font-bold'>{t('Password set')}!</p>
<Image src={SuccessImg} alt='' className='mx-auto max-h-[188px] w-[188px]' />
<p className='text-sm leading-[18px] font-semibold text-center w-[274px] mx-auto text-[#414141]'>
{t('You can use the new password to log in Punkga now')}
</p>
<ChupButton
className='w-full'
onClick={() => {
setOpen(false)
}}>
{t('Confirm')}
</ChupButton>
</div>
</div>
</Box>
</Modal>
)
}

0 comments on commit a5460ef

Please sign in to comment.