Formulare înregistrare și autentificare utilizatori

1. Configurarea fișierului `index.html` pentru formularele TailwindCSS

Pentru a utiliza componentele TailwindCSS, cum ar fi formularele de sign in, este recomandat să aplicăm câteva ajustări în fișierul index.html:

Clasa h-full pe <html> și <body>
- Asigură ca înălțimea paginii să ocupe întreg viewport-ul, necesar pentru centrare verticală a componentelor de tip formular.
Fundal global (bg-gray-900) pe <html>
- Setează o culoare de fundal uniformă pentru întreaga pagină, conform design-ului Tailwind.
Div-ul root (<div id="root"></div>)
- Punctul de montare al aplicației React; toate componentele React vor fi redate în acest element.
Scriptul principal (main.jsx)
- Încarcă aplicația React în div-ul root, permițând utilizarea TailwindCSS și a componentelor sale în aplicație.

// client/index.html

<!doctype html>
<html lang="en" class="h-full bg-gray-900">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>client</title>
  </head>
  <body class="h-full">
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

2. Crearea API-uri pentru înregistrare și autentificare

2.1. Înregistrarea utilizatorilor

Fișierul user.routes.js definește funcțiile pentru interacțiunea cu endpoint-urile publice legate de utilizatori.

// client/src/api/user.routes.js
import { axiosNoAuth } from "../axios/axiosNoAuth";

export const registerUser = async (userData) => {
  try {
    const response = await axiosNoAuth.post('/users', userData);
    return response.data;
  } catch (error) {
    console.error("Error registering user:", error);
    return error.response?.data;
  }
};

Explicație tehnică:

Folosește instanța axiosNoAuth deoarece înregistrarea nu necesită token.
Trimite un POST către /users cu datele din formular (name, email, password).
Returnează datele răspunsului sau eroarea primită de la API.
Este compatibilă cu componentele Register.jsx pentru fluxul de înregistrare.

2.2. Autentificarea utilizatorilor

Fișierul auth.routes.js definește funcția pentru login:

// client/src/api/auth.routes.js
import axiosNoAuth from "../axios/axiosNoAuth";

export const loginUser = async (credentials) => {
  try {
    const response = await axiosNoAuth.post('/auth/login', credentials);
    return response.data;
  } catch (error) {
    console.error("Error logging in user:", error);
    return error.response?.data;
  }
};

Explicație tehnică:

Folosește tot axiosNoAuth deoarece autentificarea inițială nu necesită token.
Trimite un POST către /auth/login cu obiectul credentials (email, password).
Returnează datele răspunsului sau eroarea API-ului.
Funcția poate fi integrată în componenta Login.jsx pentru autentificarea utilizatorului.

3. Formularul de înregistrare utilizator cu TailwindCSS

Componenta Register reprezintă formularul de înregistrare al utilizatorilor, implementat cu React, stilizat cu TailwindCSS, și integrat cu API-ul backend.

Principalele caracteristici:

Gestionarea stării formularului
- useState pentru câmpurile email și password.
- Input-uri controlate prin value + onChange.
Tratarea evenimentului submit
- handleSubmit previne comportamentul default al browser-ului.
- Apelează funcția loginUser din auth.routes pentru a trimite datele către API.
Stocarea token-ului
- La succes, token-ul JWT primit de la API este salvat:
  - În Redux store (setToken).
  - În localStorage, pentru persistenta între sesiuni.
Feedback vizual cu notificări
- toast.success pentru login reușit.
- toast.error pentru erori sau date incorecte.
Navigare automată după login
- După succes, utilizatorul este redirecționat către pagina principală (/) cu un mic delay (setTimeout).
- Navigarea este realizată cu useNavigate din React Router.
Design responsive și accesibil
- Layout centrat vertical și orizontal (flex, min-h-full, justify-center).
- Input-uri și butoane cu hover și focus states consistente.
- Legătura către pagina de înregistrare cu <Link> din React Router pentru SPA navigation.

// client/src/pages/Register.jsx
import { useState } from "react"
import { Link, useNavigate } from "react-router"
import { toast } from "sonner"
import { registerUser } from "../api/user.routes"

export default function Register() {
  const navigate = useNavigate()
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
  })

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    
    const response = await registerUser(formData);

    if (response.success) {
      toast.success("Registration successful! Redirecting to login...")
      setTimeout(() => {
        navigate("/login")
      }, 1500)
    } else {
      toast.error(response.message || "Registration failed")
    }
  }

  return (
      <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
          <img
            alt="Your Company"
            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
            className="mx-auto h-10 w-auto"
          />
          <h2 className="mt-10 text-center text-2xl/9 font-bold tracking-tight text-white">Create an account</h2>
        </div>

        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="name" className="block text-sm/6 font-medium text-gray-100">
                Name
              </label>
              <div className="mt-2">
                <input
                  id="name"
                  name="name"
                  type="text"
                  value={formData.name}
                  onChange={handleChange}
                  required
                  autoComplete="name"
                  className="block w-full rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6"
                />
              </div>
            </div>
            <div>
              <label htmlFor="email" className="block text-sm/6 font-medium text-gray-100">
                Email address
              </label>
              <div className="mt-2">
                <input
                  id="email"
                  name="email"
                  type="email"
                  value={formData.email}
                  onChange={handleChange}
                  required
                  autoComplete="email"
                  className="block w-full rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6"
                />
              </div>
            </div>

            <div>
              <div className="flex items-center justify-between">
                <label htmlFor="password" className="block text-sm/6 font-medium text-gray-100">
                  Password
                </label>
              </div>
              <div className="mt-2">
                <input
                  id="password"
                  name="password"
                  type="password"
                  value={formData.password}
                  onChange={handleChange}
                  required
                  autoComplete="current-password"
                  className="block w-full rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6"
                />
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
              >
                Register
              </button>
            </div>
          </form>

          <p className="mt-10 text-center text-sm/6 text-gray-400">
            Already have an account?{' '}
            <Link to="/login" className="font-semibold text-indigo-400 hover:text-indigo-300">
              Sign in
            </Link>
          </p>
        </div>
      </div>
  )
}

Aspecte tehnice importante

Integrare API: registerUser(formData) trebuie să returneze un obiect { success: boolean, message?: string, data: objcet }.
Navigare: useNavigate permite SPA navigation fără reload.
Notificări: sonner furnizează feedback instant, îmbunătățind UX-ul.
TailwindCSS: simplifică stilizarea și păstrează consistența UI-ului.

4. Formularul de autentificare utilizator cu TailwindCSS

Componenta Login reprezintă un formular de autentificare, implementat cu React și stilizat cu TailwindCSS. Aceasta gestionează valorile câmpurilor cu useState și permite navigarea internă între pagini folosind React Router (<Link>).

Caracteristici principale:

Gestionarea stării formularului cu useState pentru câmpurile email și password.
Tratarea evenimentului submit prin handleSubmit pentru prevenirea reload-ului și procesarea datelor (ex.: apel API pentru login).
Navigare internă: <Link to="/register"> permite trecerea la pagina de înregistrare fără reîncărcarea întregii aplicații (SPA).
Design modern și responsive folosind TailwindCSS:
- Input-uri cu focus vizibil și fundal semi-transparent (bg-white/5)
- Buton de submit cu hover și focus states vizibile (bg-indigo-500, hover:bg-indigo-400, focus-visible:outline-indigo-500)
- Layout centrat vertical și orizontal cu Flexbox (flex, justify-center, min-h-full)

// client/src/pages/Login.jsx
import { useState } from "react"
import { Link, useNavigate } from "react-router"
import { useDispatch } from "react-redux"
import { toast } from "sonner"
import { loginUser } from "../api/auth.routes"
import { setToken } from "../store/slices/userSlice"

export default function Login() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  })
  
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    
    const response = await loginUser(formData)
    
    if (response?.success) {
      // Save token to Redux store and localStorage
      dispatch(setToken(response.data))
      toast.success("Login successful! Redirecting...")
      setTimeout(() => {
        navigate("/")
      }, 1500)
    } else {
      toast.error(response?.message || "Login failed")
    }
  }

  return (
      <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
          <img
            alt="Your Company"
            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
            className="mx-auto h-10 w-auto"
          />
          <h2 className="mt-10 text-center text-2xl/9 font-bold tracking-tight text-white">Sign in to your account</h2>
        </div>

        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="email" className="block text-sm/6 font-medium text-gray-100">
                Email address
              </label>
              <div className="mt-2">
                <input
                  id="email"
                  name="email"
                  type="email"
                  value={formData.email}
                  onChange={handleChange}
                  required
                  autoComplete="email"
                  className="block w-full rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6"
                />
              </div>
            </div>

            <div>
              <div className="flex items-center justify-between">
                <label htmlFor="password" className="block text-sm/6 font-medium text-gray-100">
                  Password
                </label>
              </div>
              <div className="mt-2">
                <input
                  id="password"
                  name="password"
                  type="password"
                  value={formData.password}
                  onChange={handleChange}
                  required
                  autoComplete="current-password"
                  className="block w-full rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6"
                />
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
              >
                Sign in
              </button>
            </div>
          </form>

          <p className="mt-10 text-center text-sm/6 text-gray-400">
            Don't have an account?{' '}
            <Link to="/register" className="font-semibold text-indigo-400 hover:text-indigo-300">
              Register
            </Link>
          </p>
        </div>
      </div>
  )
}

Aspecte tehnice cheie în Login.jsx

Integrare API: loginUser(formData) trebuie să returneze un obiect { success: boolean, data?: string, message?: string, data: object }.
Redux: setToken actualizează starea globală, astfel încât token-ul poate fi folosit ulterior pentru cereri autentificate.
Toast notifications: oferă feedback instant și îmbunătățește UX-ul.
TailwindCSS: simplifică stilizarea și păstrează consistența UI-ului.
SPA navigation: useNavigate permite redirecționarea fără refresh al paginii.

5. Actualizare router

După ce am creat pagina de înregistrare și autentificare, este nevoie să le facem vizibile către restul aplicației.

Așadar, mergem în fișierul router.jsx și adăugăm rutele pentru înregistrare și autentificare:

// client/src/router.jsx
import { createBrowserRouter } from 'react-router-dom'
import App from './App'
import HomePage from './pages/HomePage'
import ProductsPage from './pages/ProductsPage'
import Register from './pages/Register'
import Login from './pages/Login'

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: 'products',
        element: <ProductsPage />,
      },
      {
        path: 'register',
        element: <Register />
      },
      {
        path: 'login',
        element: <Login />
      }
    ],
  },
])

PreviousConfigurare Axios NextVerificare token

Last updated 4 months ago

hashtag1. Configurarea fișierului index.html pentru formularele TailwindCSS

hashtag2. Crearea API-uri pentru înregistrare și autentificare

hashtag2.1. Înregistrarea utilizatorilor

hashtag2.2. Autentificarea utilizatorilor

hashtag3. Formularul de înregistrare utilizator cu TailwindCSS

hashtag4. Formularul de autentificare utilizator cu TailwindCSS

hashtag5. Actualizare router