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

Loginup Component Frontend

parent f3c89861
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 Login = () => { const Login = () => {
const [show, setShow] = useState(false);
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const handleClick = () => setShow(!show);
const submitHandler = () => { };
return ( return (
<div> //Use vstack to allign verticaly
Login <VStack spacing="5px" color="black">
</div>
<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>
<Button
colorScheme="blue"
width="100%"
style={{ marginTop: 15 }}
onClick={submitHandler}
>
Login
</Button>
<Button
variant="solid"
colorScheme="red"
width="100%"
onClick={() => {
setEmail("guest@example.com");
setPassword("123456");
}}
>
Get Guest User Credentials
</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