В этом посте мы сделаем форму аутентификации в 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;
Окончательный результат
Спасибо, что прочитали эту статью и счастливого кодинга ?