DEV Community

Cover image for React js UI Chakra Login
Andi Ismail
Andi Ismail

Posted on

React js UI Chakra Login

Buat Login page dengan react js menggunakan UI Chakra :
import React from "react";
import { Center, Heading, Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, FormHelperText } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { ChakraProvider } from "@chakra-ui/react";
import { BrowserRouter } from "react-router-dom";
regex email dan password
https://chakra-ui.com/docs/components/form-control/usage

Image chakra ui

pnpm create vite react_chakra_ui React > Javascript pnpm install pnpm install ract-router-dom pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion seharusya pilih pakai framework vite js
Enter fullscreen mode Exit fullscreen mode

Image vite

//main.jsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./index.css"; import { ChakraProvider } from "@chakra-ui/react"; import { BrowserRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <BrowserRouter> <ChakraProvider> <App /> </ChakraProvider> </BrowserRouter> </React.StrictMode> );
Enter fullscreen mode Exit fullscreen mode 
//vite.config.js import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { watch: { usePolling: true, }, }, });
Enter fullscreen mode Exit fullscreen mode 
//App.jsx import React from 'react' import {Routes, Route} from "react-router-dom" export default function App() { return ( <Routes> <Route path='/' element={<h1>Hello</h1>} /> <Route path='/dashboard' element={<h1>Dashboard</h1>} /> </Routes> ) }
Enter fullscreen mode Exit fullscreen mode

selanjutnya kita akan buat file login.jsx

//login.jsx import React from 'react' import { Center } from "@chakra-ui/react" export default function Login() { return ( <Center> <h1>Login page</h1> </Center> ) }
Enter fullscreen mode Exit fullscreen mode

selanjutnya

//index.js ||Login.jsx import Login from "./Login"; export {Login}
Enter fullscreen mode Exit fullscreen mode 
//index.js || auth || dashboar export * from "./authentication"
Enter fullscreen mode Exit fullscreen mode

Image login

Login.jsx import React from 'react' import { Center } from "@chakra-ui/react" export default function Login() { return ( <Center backgroundColor={"tomato"} color= "white" minH={"100vh"} > <h1>Login page</h1> </Center> ) }
Enter fullscreen mode Exit fullscreen mode

Image login merah

//Login.jsx import React from 'react' import { Center, Heading, Button } from "@chakra-ui/react" export default function Login() { return ( <Center backgroundColor={"teal.500"} color= "white" minH={"100vh"} flexDirection="column" gap={"4"} > <Heading>Login page</Heading> <Button bg={"blue.500"}>Hello</Button> </Center> ) }
Enter fullscreen mode Exit fullscreen mode

pnpm install react-hook-form dan pnpm install install @babel/core@">=7.0.0 <8.0.0"

//package.json { "name": "react_chakra_ui", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "@babel/core": ">=7.0.0 <8.0.0", "@chakra-ui/react": "^2.4.0", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "framer-motion": "^7.6.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.39.3", "react-router-dom": "^6.4.3" }, "devDependencies": { "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", "@vitejs/plugin-react": "^2.2.0", "vite": "^3.2.3" } }
Enter fullscreen mode Exit fullscreen mode

kita bisa menggunakan ibput group untuk memasukkan mata mata disebelahkan label

Image input

//login.jsx import React from "react"; import { Center, Heading, Button, FormControl, FormLabel, Input, InputGroup, InputRightElement } from "@chakra-ui/react"; export default function Login() { return ( <Center backgroundColor={"teal.500"} color="white" minH={"100vh"} flexDirection="column" gap={"4"}> <Heading>Login page</Heading> <form action="" autoComplete="off"> <FormControl mb={4}> <FormLabel htmlFor="email">Email</FormLabel> <input id="email" /> </FormControl> <FormControl mb={4}> <FormLabel htmlFor="password">password</FormLabel> <InputGroup> <Input id="password" type={"password"} /> <InputRightElement children={<> o </>} /> </InputGroup> </FormControl> </form> <Button bg={"white"} color={"teal"} type={"submit"}> Hello </Button> </Center> ); }
Enter fullscreen mode Exit fullscreen mode

Image Login form

selanutnya kita import useform

Login.jsx import React from "react"; import { Center, Heading, Button, FormControl, FormLabel, Input, InputGroup, InputRightElement } from "@chakra-ui/react"; import { useForm } from "react-hook-form"; export default function Login() { //react hook form const { register, handleSubmit, watch, formState: { errors }, } = useForm(); //handle login const handleLogin = (input) => { console.info(input); }; return ( <Center backgroundColor={"teal.500"} color="white" minH={"100vh"} flexDirection="column" gap={"4"}> <Heading>Login page</Heading> <form action="" autoComplete="off" onSubmit={handleSubmit(handleLogin)}> <FormControl mb={4}> <FormLabel htmlFor="email">Email</FormLabel> <Input id="email" {...register("email")} /> </FormControl> <FormControl mb={4}> <FormLabel htmlFor="password">password</FormLabel> <InputGroup> <Input id="password" type={"password"} {...register("password")} /> <InputRightElement children={<> o </>} /> </InputGroup> </FormControl> <Button bg={"white"} color={"teal"} type={"submit"}> Hello </Button> </form> </Center> ); }
Enter fullscreen mode Exit fullscreen mode

Image berhaisl di console

sudah berhasil menerima inputan walaupun data kosong tetap masuk, maka kita butuh validasi agar tidak kosong inputan kita. selanjuntya kita kasih object di input parameter

//Login.jsx import React from "react"; import { Center, Heading, Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, FormHelperText } from "@chakra-ui/react"; import { useForm } from "react-hook-form"; export default function Login() { //react hook form const { register, handleSubmit, watch, formState: { errors }, } = useForm(); //handle login const handleLogin = (input) => { console.info(input); }; return ( <Center backgroundColor={"teal.500"} color="white" minH={"100vh"} flexDirection="column" gap={"4"}> <Heading>Login page</Heading> <form action="" autoComplete="off" onSubmit={handleSubmit(handleLogin)}> <FormControl mb={4}> <FormLabel htmlFor="email">Email</FormLabel> <Input id="email" {...register("email", { required : {value : true, message : 'email harus diisi'} })} /> {errors.email && <FormHelperText>{errors.email.message}</FormHelperText>} </FormControl> <FormControl mb={4}> <FormLabel htmlFor="password">password</FormLabel> <InputGroup> <Input id="password" type={"password"} {...register("password", { required : {value:true, message : "password harus diisi"} })} /> <InputRightElement children={<> o </>} /> </InputGroup> {errors.password && <FormHelperText>{errors.password.message}</FormHelperText>} </FormControl> <Button bg={"white"} color={"teal"} type={"submit"}> Hello </Button> </form> </Center> ); }
Enter fullscreen mode Exit fullscreen mode

Image validasi

kita masih membutuhkan validasi untuk. pattern kita menggunakan regex password

Image regex

Image password

//Login.jsx import React from "react"; import { Center, Heading, Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, FormHelperText } from "@chakra-ui/react"; import { useForm } from "react-hook-form"; export default function Login() { //react hook form const { register, handleSubmit, watch, formState: { errors }, } = useForm(); //handle login const handleLogin = (input) => { console.info(input); }; return ( <Center backgroundColor={"teal.500"} color="white" minH={"100vh"} flexDirection="column" gap={"4"}> <Heading>Login page</Heading> <form action="" autoComplete="off" onSubmit={handleSubmit(handleLogin)}> <FormControl mb={4}> <FormLabel htmlFor="email">Email</FormLabel> <Input id="email" {...register("email", { required : {value : true, message : 'email harus diisi'}, pattern : { value : /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,63})$/, message : "email kurang lengkap" } })} /> {errors.email && <FormHelperText>{errors.email.message}</FormHelperText>} </FormControl> <FormControl mb={4}> <FormLabel htmlFor="password">password</FormLabel> <InputGroup> <Input id="password" type={"password"} {...register("password", { required : {value:true, message : "password harus diisi"}, pattern : { value : /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message : "Minimum eight characters, at least one letter and one number" } })} /> <InputRightElement children={<> o </>} /> </InputGroup> {errors.password && <FormHelperText>{errors.password.message}</FormHelperText>} </FormControl> <Button bg={"white"} color={"teal"} type={"submit"}> Hello </Button> </form> </Center> ); }
Enter fullscreen mode Exit fullscreen mode

Image password

Image emailpassword

Image description

berhasil menambahkan pattern validasi regex,

Terimakasih.
https://github.com/andiks2018/JvalleyReact-ChakraLogin.git

Top comments (0)