Fakultas Ilmu Komputer UI

Commit 33df3f9b authored by Nabila Febri Viola's avatar Nabila Febri Viola
Browse files

[GREEN] Integrates login modals with backend

parent 0f4e86f5
Pipeline #38647 failed with stages
in 3 minutes and 35 seconds
This diff is collapsed.
import React from "react"
import { Modal, Button, Form } from "react-bootstrap"
import { Form } from "react-bootstrap"
import { useForm } from "react-hook-form"
import * as yup from "yup"
import ModalRegisterAccount from "./register-account"
const ModalRegister = ({ show, handleClose }) => {
const schema = yup.object().shape({
email: yup
......@@ -21,117 +23,94 @@ const ModalRegister = ({ show, handleClose }) => {
.string()
.oneOf([yup.ref("password"), null], "Password harus sama.")
.required("Masukkan konfirmasi password."),
first_name: yup
.string()
.matches(
/^(?=^.{5,70}$)^[A-Za-z]+([\ A-Za-z]+)*$/,
"Masukkan nama yang valid."
)
.required("Masukkan nama."),
body_weight: yup
.number()
.positive("Masukkan berat badan yang valid.")
.moreThan(1, "Masukkan berat badan yang valid.")
.lessThan(200, "Masukkan berat badan yang valid.")
.required("Masukkan berat badan."),
id_card_no: yup
.string()
.matches(/^\d{16}$/, "Masukkan nomor kartu pengenal yang valid.")
.required("Masukkan nomor kartu pengenal."),
birthplace: yup.string().required("Masukkan tempat kelahiran."),
// birthdate: yup.date().required("Masukkan tanggal lahir"),
sex: yup.string().required("Pilih jenis kelamin."),
address: yup.string().required("Masukkan alamat."),
city: yup.string().required("Masukkan nama kota."),
district: yup.string().required("Masukkan nama kecamatan."),
village: yup.string().required("Masukkan nama kelurahan."),
phone_no: yup.number().required("Masukkan nomor telepon."),
work_address: yup.string().required("Masukkan alamat kantor."),
work_email: yup
.string()
.email()
.required("Masukkan email kantor."),
work_phone_no: yup.number().required("Masukkan nomor telepon kantor."),
})
const { register, handleSubmit, errors } = useForm({
const {
control,
register,
handleSubmit,
errors,
triggerValidation,
} = useForm({
mode: "onChange",
validationSchema: schema,
})
const onSubmit = async data => {
data =
'{"email": "' +
data.email +
'", "password": "' +
data.password +
'", "first_name": "' +
data.first_name +
'", "profile": ' +
JSON.stringify(data) +
"}"
console.log(data)
const onSubmit = data => {}
await fetch("https://dblood-staging.netlify.com/auth/register-full/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: data,
})
.then(async response => {
return await response.json()
})
.then(async data => {
await window.alert(
"Silakan verifikasi email terlebih dahulu di" +
data.email +
" untuk login."
),
await location.reload()
})
}
return (
<Modal
aria-labelledby="contained-modal-title-vcenter"
centered
show={show}
onHide={handleClose}
>
<Modal.Header
bsPrefix="border-0 d-flex flex-row justify-content-end mt-2 mr-3"
closeButton
onClick={handleClose}
></Modal.Header>
<Modal.Body>
<h2 className="text-center text-red mb-5 mt-2">
<b>
<b>Daftar Akun</b>
</b>
</h2>
<Form onSubmit={handleSubmit(onSubmit)} noValidate>
<Form.Group controlId="formRegEmail">
<div className="row d-flex flex-row justify-content-center">
<div className="col-md-3">
<Form.Label className="text-red">
<b>Email</b>
</Form.Label>
</div>
<div className="col-md-8 justify-content-center align-items-center d-flex flex-column">
<Form.Control
name="email"
size="lg"
type="email"
ref={register}
/>
{errors.email && (
<Form.Control.Feedback type="invalid">
{errors.email.message}
</Form.Control.Feedback>
)}
</div>
</div>
</Form.Group>
<Form.Group controlId="formRegPassword">
<div className="row d-flex flex-row justify-content-center">
<div className="col-md-3">
<Form.Label className="text-red">
<b>Password</b>
</Form.Label>
</div>
<div className="col-md-8 justify-content-center align-items-center d-flex flex-column">
<Form.Control
name="password"
size="lg"
type="password"
ref={register}
/>
{errors.password && (
<Form.Control.Feedback type="invalid">
{errors.password.message}
</Form.Control.Feedback>
)}
</div>
</div>
</Form.Group>
<Form.Group controlId="formRegConfirmPassword">
<div className="row d-flex flex-row justify-content-center">
<div className="col-md-3">
<Form.Label className="text-red">
<b>Konfirmasi Password</b>
</Form.Label>
</div>
<div className="col-md-8 justify-content-center align-items-center d-flex flex-column">
<Form.Control
name="passwordConfirmation"
size="lg"
type="password"
ref={register}
/>
{errors.passwordConfirmation && (
<Form.Control.Feedback type="invalid">
{errors.passwordConfirmation.message}
</Form.Control.Feedback>
)}
</div>
</div>
</Form.Group>
<div className="row px-5 mt-5 mb-3">
<div className="text-right col-md-12 mr-3 ml-4">
<Button
type="submit"
data-testid="btn-register"
variant="btn btn-red shadow"
>
Daftar
</Button>
</div>
</div>
</Form>
</Modal.Body>
</Modal>
<>
<ModalRegisterAccount
show={show}
handleClose={handleClose}
register={register}
errors={errors}
control={control}
triggerValidation={triggerValidation}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
/>
</>
)
}
......
import React, { useState } from "react"
import { Modal, Button, Form } from "react-bootstrap"
import ModalCompleteProfile from "./complete-profile"
const ModalRegisterAccount = ({
show,
handleClose,
register,
errors,
control,
triggerValidation,
handleSubmit,
onSubmit,
}) => {
const [showModalCompleteProfile, setShowModalCompleteProfile] = useState(
false
)
return (
<>
<Modal
aria-labelledby="contained-modal-title-vcenter"
centered
show={show}
onHide={handleClose}
>
<Modal.Header
bsPrefix="border-0 d-flex flex-row justify-content-end mt-2 mr-3"
closeButton
onClick={handleClose}
></Modal.Header>
<Modal.Body>
<h2 className="text-center text-red mb-5 mt-2">
<b>
<b>Daftar Akun</b>
</b>
</h2>
<Form.Group controlId="formRegEmail">
<div className="row d-flex flex-row justify-content-center">
<div className="col-md-3">
<Form.Label className="text-red">
<b>Email</b>
</Form.Label>
</div>
<div className="col-md-8 justify-content-center align-items-center d-flex flex-column">
<Form.Control
name="email"
size="lg"
type="email"
ref={register}
/>
{errors.email && (
<Form.Control.Feedback type="invalid">
{errors.email.message}
</Form.Control.Feedback>
)}
</div>
</div>
</Form.Group>
<Form.Group controlId="formRegPassword">
<div className="row d-flex flex-row justify-content-center">
<div className="col-md-3">
<Form.Label className="text-red">
<b>Password</b>
</Form.Label>
</div>
<div className="col-md-8 justify-content-center align-items-center d-flex flex-column">
<Form.Control
name="password"
size="lg"
type="password"
ref={register}
/>
{errors.password && (
<Form.Control.Feedback type="invalid">
{errors.password.message}
</Form.Control.Feedback>
)}
</div>
</div>
</Form.Group>
<Form.Group controlId="formRegConfirmPassword">
<div className="row d-flex flex-row justify-content-center">
<div className="col-md-3">
<Form.Label className="text-red">
<b>Konfirmasi Password</b>
</Form.Label>
</div>
<div className="col-md-8 justify-content-center align-items-center d-flex flex-column">
<Form.Control
name="passwordConfirmation"
size="lg"
type="password"
ref={register}
/>
{errors.passwordConfirmation && (
<Form.Control.Feedback type="invalid">
{errors.passwordConfirmation.message}
</Form.Control.Feedback>
)}
</div>
</div>
</Form.Group>
<div className="row px-5 mt-5 mb-3">
<div className="text-right col-md-12 mr-3 ml-4">
<Button
className="btn btn-red shadow"
onClick={async () => {
await triggerValidation()
if (!errors.email && !errors.passwordConfirmation) {
setShowModalCompleteProfile(true)
handleClose
}
}}
>
Daftar
</Button>
</div>
</div>
</Modal.Body>
</Modal>
<ModalCompleteProfile
show={showModalCompleteProfile}
handleClose={() => setShowModalCompleteProfile(false)}
register={register}
errors={errors}
control={control}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
/>
</>
)
}
export default ModalRegisterAccount
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment