Создайте форму React-Auth с помощью Bootstrap за несколько простых шагов!

В этом посте мы сделаем форму аутентификации в react, которая может переключаться между вкладками входа и регистрации.

Это то, что мы собираемся создать сегодня:

Мы не будем использовать никаких библиотек или внешних инструментов для создания формы и сделаем форму аутентификации очень простой.

Шаг 1: Создайте проект react и запустите его с помощью следующих команд.

npx create-react-app auth
Войти в полноэкранный режим Выйдите из полноэкранного режима

Затем откройте только что созданную папку проекта в вашем любимом редакторе, она должна выглядеть следующим образом.

npm start
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 2 : Теперь создайте файл и этот компонент в файл App.js.

Ваш новый файл должен выглядеть следующим образом. (Я назвал этот файл Auth.js).

import React from 'react'

const Auth = () => {
  return (
    <div>Auth</div>
  )
}

export default Auth
Вход в полноэкранный режим Выйти из полноэкранного режима

Добавьте этот компонент в App.js

import './App.css';
import Auth from './Auth';

function App() {
  return (
    <div className="App">
      <Auth />
   </div>
  );
}

export default App;
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Шаг 3 : Добавьте React-Bootstrap в ваш проект с помощью следующей команды

npm install react-bootstrap bootstrap@5.1.3
Войти в полноэкранный режим Выйти из полноэкранного режима

и теперь включите следующую строку в ваш файл src/index.js или App.js.

import 'bootstrap/dist/css/bootstrap.min.css';
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 4: Создайте форму.

Теперь давайте приступим к созданию формы.

  • Импортируйте следующее в ваш файл Auth.js. Мы собираемся обернуть нашу форму внутри карточки, а для центрирования карточки мы поместим ее в строку и столбец, используя систему сетки.
import { Card, Col, Row, Form } from "react-bootstrap";
Вход в полноэкранный режим Выйдите из полноэкранного режима

Теперь добавьте Row, Col и Card следующим образом:

 <Row className="justify-content-center">
    <Col xs={10} md={4}>
       <Card className="my-5 px-5 py-3">
          <h1 className="m-3 text-center">Sign up</h1>
       </Card>
    </Col>
</Row>
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы можете увидеть это в браузере.

(p.s. Я добавил background-color: #7c8baa; и min-height: 100vh; в App.css для App).

  • Теперь добавим состояние FormData.
const [formData, setFormData] = useState({
    email: "",
    name: "",
    password: "",
    password2 : ""
});
const { email, name, password, password2 } = formData;
Вход в полноэкранный режим Выход из полноэкранного режима

(Мы деструктурируем каждое поле, чтобы мы могли использовать их внутри наших полей ввода)

  • Теперь мы можем создать базовую форму, которая будет отображать все поля.
<Form.Group controlId="email" className="my-2">
    <Form.Label>Username</Form.Label>
    <Form.Control
      type="text"
      placeholder="enter name"
      name="name"
      value={name}
    />
  </Form.Group>
  <Form.Group className="my-2">
    <Form.Label>Email Address</Form.Label>
    <Form.Control
      type="email"
      placeholder="enter email"
      value={email}
      name="email"
    />
  </Form.Group>
  <Form.Group className="my-2">
    <Form.Label>Password</Form.Label>
    <Form.Control
      type="password"
      placeholder="enter password"
      value={password}
      name="password"
    />
  </Form.Group>
  <Form.Group className="my-2">
    <Form.Label>Confirm Password</Form.Label>
    <Form.Control
      type="password"
      placeholder="enter password again"
      value={password2}
      name="password"
    />
</Form.Group>
Вход в полноэкранный режим Выйти из полноэкранного режима

Должно отображаться что-то вроде этого:

  • Добавьте логику переключения

Поскольку в форме входа нам нужно отображать только поля email и пароль, а в форме регистрации мы отображаем все поля, мы можем использовать следующую логику для динамического переключения между формами входа и регистрации.

const [isLogin, setIsLogin] = useState(true);
Войти в полноэкранный режим Выйти из полноэкранного режима

Мы изменим поля имени пользователя и подтверждения пароля следующим образом:

 {!isLogin && (
    <Form.Group  className="my-2">
      <Form.Label>Username</Form.Label>
      <Form.Control
        type="text"
        placeholder="enter name"
        name="name"
        value={name}
      />
    </Form.Group>
  )}
  <Form.Group className="my-2">
    <Form.Label>Email Address</Form.Label>
    <Form.Control
      type="email"
      placeholder="enter email"
      value={email}
      name="email"
    />
  </Form.Group>

  <Form.Group className="my-2">
    <Form.Label>Password</Form.Label>
    <Form.Control
      type="password"
      placeholder="enter password"
      value={password}
      name="password"
    />
  </Form.Group>
  {!isLogin && (
    <Form.Group className="my-2">
      <Form.Label>Confirm Password</Form.Label>
      <Form.Control
        type="password"
        placeholder="enter password again"
        value={password2}
        name="password2"
      />
    </Form.Group>
)}
Вход в полноэкранный режим Выход из полноэкранного режима

Также нам нужно добавить функцию onChange в каждое поле ввода. Мы определяем функцию handleChange и запускаем ее каждый раз, когда поле ввода изменяется

const handleChange = (e) => {
    setFormData({...formData, [e.target.name] : e.target.value})
}
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Теперь для переключения между вкладками login и register мы создадим функцию и назовем ее handleToggle, и эта функция будет вызываться каждый раз, когда мы нажимаем на кнопку переключения. Также при переключении мы хотим очистить поля ввода.
 const handleToggle = () => {
    setIsLogin(prev => !prev)
    setFormData({ email: "", name: "", password: "", password2: "" });
 }
Вход в полноэкранный режим Выход из полноэкранного режима

Кнопки :

<div className="mt-3 text-center">
    <p>
      {isLogin ? "Don't" : "Already"} have an account ?{" "}
      <Button size="sm" variant="outline-primary" onClick={handleToggle}>
        Sign {isLogin ? "Up" : "In"}
      </Button>
    </p>
    <Button className="btn btn-block">Sign {isLogin ? "In" : "Up"}</Button>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Заключительный код :

import React, { useState } from "react";
import { Button, Card, Col, Form, Row } from "react-bootstrap";

const Auth = () => {
  const [formData, setFormData] = useState({
    email: "",
    name: "",
    password: "",
    password2: "",
  });
  const { email, name, password, password2 } = formData;
  const [isLogin, setIsLogin] = useState(true);
  const handleToggle = () => {
    setIsLogin((prev) => !prev);
  };
  return (
    <Row className="justify-content-center">
      <Col xs={10} md={4}>
        <Card className="my-5 px-5 py-3">
          <h1 className="m-3 text-center">Sign {isLogin ? "In" : "Up"}</h1>
          {!isLogin && (
            <Form.Group className="my-2">
              <Form.Label>Username</Form.Label>
              <Form.Control
                type="text"
                placeholder="enter name"
                name="name"
                value={name}
                onChange = {handleChange}
              />
            </Form.Group>
          )}
          <Form.Group className="my-2">
            <Form.Label>Email Address</Form.Label>
            <Form.Control
              type="email"
              placeholder="enter email"
              value={email}
              name="email"
              onChange = {handleChange}
            />
          </Form.Group>

          <Form.Group className="my-2">
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              placeholder="enter password"
              value={password}
              name="password"
              onChange = {handleChange}
            />
          </Form.Group>
          {!isLogin && (
            <Form.Group className="my-2">
              <Form.Label>Confirm Password</Form.Label>
              <Form.Control
                type="password"
                placeholder="enter password again"
                value={password2}
                name="password2"
                onChange = {handleChange}
              />
            </Form.Group>
          )}
          <div className="mt-3 text-center">
            <p>
              {isLogin ? "Don't" : "Already"} have an account ? {" "}
              <Button
                size="sm"
                variant="outline-primary"
                onClick={handleToggle}
              >
                Sign {isLogin ? "Up" : "In"}
              </Button>
            </p>
            <Button className="btn btn-block">
              Sign {isLogin ? "In" : "Up"}
            </Button>
          </div>
        </Card>
      </Col>
    </Row>
  );
};

export default Auth;
Войти в полноэкранный режим Выйти из полноэкранного режима

Окончательный результат

Спасибо, что прочитали эту статью и счастливого кодинга ?

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *