1st push

components/signupcomponent.js

@@ -0,0 +1,125 @@
+import {
+  Box,
+  Button,
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Link,
+  Stack,
+} from "@chakra-ui/react"
+import { useRouter } from "next/router"
+import React, { useState } from "react"
+import FormLabelInput from "./formlabelinput"
+import { geturlFormdata, siterooturl } from "../constants"
+
+export default function Signupcomponent(props) {
+  const [email, setEmail] = React.useState("")
+  const [phone, setPhone] = React.useState("")
+  const [password, setPassword] = React.useState("")
+  const [confirm_password, setConfirmPassword] = React.useState("")
+  const router = useRouter()
+
+  const [show, setShow] = useState(true)
+
+  const validateForm = () => {
+    return email.length > 0 && (phone.length >= 10 || phone.length == 0) && password.length > 0
+  }
+
+  const handleSubmit = (event) => {
+    console.log(email, password, confirm_password, phone)
+    if (phone.length > 0 && phone.length < 10) {
+      //popup
+    }
+    event.preventDefault()
+    var urlForm
+    if (email.length == 0) {
+      urlForm = geturlFormdata("user", "signup", {}, { phone: phone, password: password })
+    } else if (phone.length == 0) {
+      urlForm = geturlFormdata("user", "signup", {}, { mail: email, password: password })
+    } else {
+      urlForm = geturlFormdata("user", "signup", {}, { mail: email, phone: phone, password: password })
+    }
+
+    if (password !== confirm_password) {
+      setShow(true)
+      return
+    }
+    try {
+      // postsignup(urlForm.url, urlForm.formdata).then(() => {
+      //   router.push("/info")
+      // })
+    } catch (e) {}
+  }
+
+  const handleEmailChange = (val) => {
+    setEmail(val)
+  }
+  const handlePhoneChange = (val) => {
+    setPhone(val)
+  }
+  const handlePasswordChange = (val) => {
+    setPassword(val)
+  }
+  const handleConfirmPasswordChange = (val) => {
+    setConfirmPassword(val)
+  }
+
+  return (
+    <Box
+      w="50%"
+      align="center"
+      bgGradient="linear(to-b, blue.200, blue.500)"
+      padding={10}
+      borderRadius={10}
+      margin="auto"
+    >
+      <FormControl onSubmit={handleSubmit} align="center">
+        <FormLabel margin={"auto"} padding={"auto"} textAlign={"center"}>
+          Register
+        </FormLabel>
+
+        <FormLabelInput
+          inputtype="email"
+          label="Email*"
+          placeholder="abc@xyz.uvw"
+          onChange={(e) => handleEmailChange(e)}
+        />
+
+        <FormLabelInput
+          inputtype="number"
+          label="Phone"
+          placeholder="XXXXXXXXXX"
+          onChange={(e) => handlePhoneChange(e)}
+        />
+
+        <FormLabelInput
+          inputtype="password"
+          label="Password"
+          placeholder="type your password"
+          onChange={(e) => handlePasswordChange(e)}
+        />
+
+        <FormLabelInput
+          inputtype="password"
+          label="Confirm Password"
+          placeholder="type your password again"
+          onChange={(e) => handleConfirmPasswordChange(e)}
+        />
+
+        <Button type="submit" margin="auto" marginY="10px" disabled={!validateForm()} onClick={handleSubmit}>
+          Register
+        </Button>
+
+        <FormLabel margin={"auto"} align="center" textAlign={"center"}>
+          Already registered?{" "}
+          <Link href={`${siterooturl}login`} color="black.500" _hover={{ color: "blue.800", fontSize: "130%" }}>
+            log in
+          </Link>
+        </FormLabel>
+      </FormControl>
+    </Box>
+  )
+}