DEV Community

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

Posted on

1

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

profile
AWS
 Promoted

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

profile
Coherence
 Promoted

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Read next

radzion profile image

How to Build a Secure ENS Domain Registration App with React and Wagmi

Radzion Chachura -

laetitiaperraut profile image

Spring Boot Unveiled: Innovation through Collaboration and Open Source Funding

Laetitia Perraut -

bobcars profile image

Unveiling the Success Behind Spring Security: Open Source Business Models, Funding, and Community

Bob Cars(on) -

vitalisorenko profile image

Exploring GSON: A Model of Innovation Through Community, Licensing, and Corporate Support

Vitali Sorenko -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay