diff options
Diffstat (limited to 'src-migrate/modules/register')
| -rw-r--r-- | src-migrate/modules/register/components/Form.tsx | 53 | ||||
| -rw-r--r-- | src-migrate/modules/register/components/FormCaptcha.tsx | 14 | ||||
| -rw-r--r-- | src-migrate/modules/register/components/Register.tsx | 39 | ||||
| -rw-r--r-- | src-migrate/modules/register/components/TermCondition.tsx | 26 | ||||
| -rw-r--r-- | src-migrate/modules/register/index.tsx | 46 |
5 files changed, 113 insertions, 65 deletions
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index ac194b46..fc1567ab 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -3,9 +3,17 @@ import { useMutation } from "react-query"; import { useRegisterStore } from "~/common/stores/useRegisterStore"; import { RegisterProps } from "~/common/types/auth"; import { registerUser } from "~/services/auth"; +import TermCondition from "./TermCondition"; +import FormCaptcha from "./FormCaptcha"; const Form = () => { - const { form, isValid, isCheckedTNC, updateForm, toggleCheckTNC, openTNC } = useRegisterStore() + const { + form, + isValid, + isCheckedTNC, + isValidCaptcha, + updateForm, + } = useRegisterStore() const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { const { name, value } = event.target; @@ -20,8 +28,10 @@ const Form = () => { e.preventDefault() const response = await mutation.mutateAsync(form) - console.log(response); + if (response?.register === true) { + + } } return ( @@ -58,6 +68,20 @@ const Form = () => { </div> <div> + <label htmlFor='phone'>No Handphone</label> + + <input + type='tel' + id='phone' + name='phone' + className='form-input mt-3' + placeholder='08xxxxxxxx' + value={form.phone} + onChange={handleInputChange} + /> + </div> + + <div> <label htmlFor='email'>Alamat Email</label> <input @@ -68,6 +92,7 @@ const Form = () => { placeholder='Masukan alamat email anda' value={form.email} onChange={handleInputChange} + autoComplete="username" /> </div> @@ -81,32 +106,18 @@ const Form = () => { placeholder='••••••••••••' value={form.password} onChange={handleInputChange} + autoComplete="current-password" /> </div> - <div className="mt-4"> - <input - type="checkbox" - name="tnc" - id="tnc" - checked={isCheckedTNC} - onClick={toggleCheckTNC} - /> - <label htmlFor="tnc" className="ml-2 cursor-pointer">Dengan ini saya menyetujui</label> - {' '} - <span - className="font-medium text-danger-500 cursor-pointer" - onClick={openTNC} - > - syarat dan ketentuan - </span> - <label htmlFor="tnc" className="ml-2 cursor-pointer">yang berlaku</label> - </div> + <FormCaptcha /> + + <TermCondition /> <button type="submit" className="btn-yellow w-full mt-2" - disabled={!isValid || !isCheckedTNC || mutation.isLoading} + disabled={!isValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha} > {mutation.isLoading ? 'Loading...' : 'Daftar'} </button> diff --git a/src-migrate/modules/register/components/FormCaptcha.tsx b/src-migrate/modules/register/components/FormCaptcha.tsx new file mode 100644 index 00000000..967be017 --- /dev/null +++ b/src-migrate/modules/register/components/FormCaptcha.tsx @@ -0,0 +1,14 @@ +import ReCaptcha from '~/common/components/elements/ReCaptcha' +import { useRegisterStore } from '~/common/stores/useRegisterStore' + +const FormCaptcha = () => { + const { updateValidCaptcha } = useRegisterStore() + + const handleCaptchaChange = (value: string | null) => { + updateValidCaptcha(value !== null) + } + + return <ReCaptcha onChange={handleCaptchaChange} /> +} + +export default FormCaptcha
\ No newline at end of file diff --git a/src-migrate/modules/register/components/Register.tsx b/src-migrate/modules/register/components/Register.tsx deleted file mode 100644 index e3e29b9f..00000000 --- a/src-migrate/modules/register/components/Register.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import PageContent from "~/modules/page-content" -import Form from "./Form" -import Link from "next/link" -import Modal from "~/common/components/elements/Modal" -import TermCondition from "./TermCondition" - -const Register = () => { - return ( - <div className="container"> - <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-16"> - <section> - <h1 className="text-2xl font-semibold"> - Daftar Akun Indoteknik - </h1> - <h2 className="text-gray_r-11 mt-1 mb-4"> - Buat akun sekarang lebih mudah dan terverifikasi - </h2> - - <Form /> - - <div className='text-gray_r-11 mt-10'> - Sudah punya akun Indoteknik?{' '} - <Link href='/login' className='inline font-medium text-danger-500'> - Masuk - </Link> - </div> - </section> - - <section className="my-10 md:my-0"> - <PageContent path="/register" /> - </section> - </div> - - <TermCondition /> - </div> - ) -} - -export default Register
\ No newline at end of file diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx index 304ffd69..aaba6604 100644 --- a/src-migrate/modules/register/components/TermCondition.tsx +++ b/src-migrate/modules/register/components/TermCondition.tsx @@ -1,15 +1,33 @@ +import { Checkbox } from '@chakra-ui/react' import React from 'react' import Modal from '~/common/components/elements/Modal' import { useRegisterStore } from '~/common/stores/useRegisterStore' import PageContent from '~/modules/page-content' const TermCondition = () => { - const { isOpenTNC, closeTNC } = useRegisterStore() + const { isOpenTNC, closeTNC, isCheckedTNC, toggleCheckTNC, openTNC } = useRegisterStore() return ( - <Modal active={isOpenTNC} close={closeTNC} > - <PageContent path='/register#tnd' /> - </Modal> + <> + <div className="mt-4 flex items-center gap-x-2"> + <Checkbox id='tnc' name='tnc' checked={isCheckedTNC} onChange={toggleCheckTNC} /> + <div> + <label htmlFor="tnc" className="cursor-pointer">Dengan ini saya menyetujui</label> + {' '} + <span + className="font-medium text-danger-500 cursor-pointer" + onClick={openTNC} + > + syarat dan ketentuan + </span> + <label htmlFor="tnc" className="ml-2 cursor-pointer">yang berlaku</label> + </div> + </div> + + <Modal active={isOpenTNC} close={closeTNC} > + <PageContent path='/register#tnd' /> + </Modal> + </> ) } diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index ba5efa3a..6325ee09 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,3 +1,47 @@ -import Register from "./components/Register"; +import PageContent from "~/modules/page-content" +import Form from "./components/Form" +import Link from "next/link" +import Image from "next/image" +import IndoteknikLogo from "~/images/logo.png" +import AccountActivation from "../account-activation" + +const LOGO_WIDTH = 150; +const LOGO_HEIGHT = LOGO_WIDTH / 3; + +const Register = () => { + return ( + <div className="container"> + <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-10 px-2 md:pt-16"> + <section> + <Link href='/' className="block md:hidden"> + <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={LOGO_WIDTH} height={LOGO_HEIGHT} className="mx-auto mb-4 w-auto h-auto" priority /> + </Link> + + <h1 className="text-2xl font-semibold text-center md:text-left"> + Daftar Akun Indoteknik + </h1> + <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left"> + Buat akun sekarang lebih mudah dan terverifikasi + </h2> + + <Form /> + + <div className='text-gray_r-11 mt-4 text-center md:text-left'> + Sudah punya akun Indoteknik?{' '} + <Link href='/login' className='inline font-medium text-danger-500'> + Masuk + </Link> + </div> + </section> + + <section className="my-10 md:my-0"> + <PageContent path="/register" /> + </section> + </div> + + <AccountActivation /> + </div> + ) +} export default Register
\ No newline at end of file |