Commit f3c89861 authored by Balasuriya D.A.M.'s avatar Balasuriya D.A.M.

Sign up Component Frontend

parent 4a3542a7
...@@ -6,4 +6,5 @@ ...@@ -6,4 +6,5 @@
background-image: url("./background.jpg"); background-image: url("./background.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
color:black;
} }
\ No newline at end of file
import React from "react"; //Formercontrol,formerlabel from form-control
//Input,InputGroup from input
//VStack from layout
//everything import from react
import { Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, VStack } from "@chakra-ui/react";
import React, { useState } from "react";
const Signup = () => { const Signup = () => {
return (
<div> const [show, setShow] = useState(false);
Signup const [name, setName] = useState();
</div> const [email, setEmail] = useState();
const [confirmpassword, setConfirmpassword] = useState();
const [password, setPassword] = useState();
const [pic, setPic] = useState();
const handleClick = () => setShow(!show);
const postDetails = (pics) => { };
const submitHandler = () => { };
return (
//Use vstack to allign verticaly
<VStack spacing="5px" color="black">
<FormControl id="first-name" isRequired>
<FormLabel>Name</FormLabel>
<Input
placeholder="Enter Your Name"
onChange={(e)=>setName(e.target.value)}
/>
</FormControl>
<FormControl id="email" isRequired>
<FormLabel>Email</FormLabel>
<Input
placeholder="Enter Your Email"
onChange={(e)=>setEmail(e.target.value)}
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<InputGroup>
<Input
type={show?"text":"password"}
placeholder="Enter Your Password"
onChange={(e)=>setPassword(e.target.value)}
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={handleClick}>
{show ? "Hide" : "Show"}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Confirm Password</FormLabel>
<InputGroup size="md">
<Input
type={show?"text":"password"}
placeholder="Confirm Password"
onChange={(e)=>setConfirmpassword(e.target.value)}
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={handleClick}>
{show ? "Hide" : "Show"}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<FormControl id="pic" isRequired>
<FormLabel>Upload your Picture</FormLabel>
<Input
type="file"
p={.5}
accept="image/*"
onChange={(e)=>postDetails(e.target.files[0])}
/>
</FormControl>
<Button
colorScheme="blue"
width="100%"
style={{ marginTop: 15 }}
onClick={submitHandler}
>
Sign Up
</Button>
</VStack>
); );
} }
......
Markdown is supported
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