| | |
| | | return ( |
| | | <div className={ |
| | | cn( |
| | | 'flex w-full grow flex-col items-center justify-center', |
| | | 'flex flex-col items-center w-full grow justify-center', |
| | | 'px-6', |
| | | 'md:px-[108px]', |
| | | ) |
| | | }> |
| | | {!showSuccess && ( |
| | | <div className='flex flex-col md:w-[400px]'> |
| | | <div className="mx-auto w-full"> |
| | | <div className="w-full mx-auto"> |
| | | <h2 className="title-4xl-semi-bold text-text-primary"> |
| | | {t('login.changePassword')} |
| | | </h2> |
| | | <p className='body-md-regular mt-2 text-text-secondary'> |
| | | <p className='mt-2 body-md-regular text-text-secondary'> |
| | | {t('login.changePasswordTip')} |
| | | </p> |
| | | </div> |
| | | |
| | | <div className="mx-auto mt-6 w-full"> |
| | | <div className="w-full mx-auto mt-6"> |
| | | <div className="bg-white"> |
| | | {/* Password */} |
| | | <div className='mb-5'> |
| | | <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary"> |
| | | <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary"> |
| | | {t('common.account.newPassword')} |
| | | </label> |
| | | <div className='relative mt-1'> |
| | |
| | | </Button> |
| | | </div> |
| | | </div> |
| | | <div className='body-xs-regular mt-1 text-text-secondary'>{t('login.error.passwordInvalid')}</div> |
| | | <div className='mt-1 body-xs-regular text-text-secondary'>{t('login.error.passwordInvalid')}</div> |
| | | </div> |
| | | {/* Confirm Password */} |
| | | <div className='mb-5'> |
| | | <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary"> |
| | | <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary"> |
| | | {t('common.account.confirmPassword')} |
| | | </label> |
| | | <div className='relative mt-1'> |
| | |
| | | )} |
| | | {showSuccess && ( |
| | | <div className="flex flex-col md:w-[400px]"> |
| | | <div className="mx-auto w-full"> |
| | | <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg"> |
| | | <RiCheckboxCircleFill className='h-6 w-6 text-text-success' /> |
| | | <div className="w-full mx-auto"> |
| | | <div className="mb-3 flex justify-center items-center w-14 h-14 rounded-2xl border border-components-panel-border-subtle shadow-lg font-bold"> |
| | | <RiCheckboxCircleFill className='w-6 h-6 text-text-success' /> |
| | | </div> |
| | | <h2 className="title-4xl-semi-bold text-text-primary"> |
| | | {t('login.passwordChangedTip')} |
| | | </h2> |
| | | </div> |
| | | <div className="mx-auto mt-6 w-full"> |
| | | <div className="w-full mx-auto mt-6"> |
| | | <Button variant='primary' className='w-full' onClick={() => { |
| | | setLeftTime(undefined) |
| | | router.replace(getSignInUrl()) |