Sign up Component Frontend

IT18021080/Telemedicine-Chat-App/frontend/src/App.css

@@ -6,4 +6,5 @@
     background-image: url("./background.jpg");
     background-size: cover;
     background-position: center;
+    color:black;
 }
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/components/Authentication/Signup.js

-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 [show, setShow] = useState(false);
+  const [name, setName] = useState();
+  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 (
-        <div>
-          Signup
-        </div>
+      //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>
     );
 }