Mastering ReactJS - Bài 22: Cài đặt luồng xác thực - Phần 4 - Cài đặt trang xác nhận, đăng nhập và trang chủ

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useParams, useLocation } from 'react-router-dom';
import { SERVER_URL } from './configs/Config';
import './ActivateAccount.css';

const ActivateAccount: React.FC = () => {
  const { username } = useParams<{ username: string }>();
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const token = queryParams.get('token');

  const [message, setMessage] = useState<string | null>(null);
  const [isSuccess, setIsSuccess] = useState<boolean | null>(null);

  useEffect(() => {
    const activateAccount = async () => {
      if (!token) {
        setMessage('Token is missing.');
        setIsSuccess(false);
        return;
      }

      try {
        const response = await axios.post(`${SERVER_URL}/users/${username}/activate?token=${token}`);
        setMessage(response.data.message || 'Account activated successfully!');
        setIsSuccess(true);
      } catch (error) {
        if (axios.isAxiosError(error) && error.response) {
          setMessage(error.response.data.message || 'Activation failed.');
        } else {
          setMessage('An unknown error occurred.');
        }
        setIsSuccess(false);
      }
    };

    activateAccount();
  }, [username, token]);

  return (
    <div className="activate-account-container">
      <h2>Activate Account</h2>
      {message && (
        <p className={isSuccess === true ? 'success-message' : 'error-message'}>
          {message}
        </p>
      )}
    </div>
  );
};

export default ActivateAccount;

.activate-account-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    flex-direction: column;
  }
  
  h2 {
    margin-bottom: 20px;
  }
  
  .success-message, .error-message {
    font-size: 18px;
    margin-top: 20px;
  }

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faLock } from '@fortawesome/free-solid-svg-icons';
import axios from 'axios';
import { Link, useNavigate } from 'react-router-dom';
import { SERVER_URL } from './configs/Config';

interface LoginFormState {
  username: string;
  password: string;
}

const Login: React.FC = () => {
  const [formState, setFormState] = useState<LoginFormState>({
    username: '',
    password: '',
  });

  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  const navigate = useNavigate();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormState({
      ...formState,
      [name]: value,
    });
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrorMessage(null);
    setSuccessMessage(null);

    try {
      const response = await axios.post(`${SERVER_URL}/users/login`, formState);
      localStorage.setItem('accessToken', response.data.accessToken);
      setSuccessMessage('Login successful!');
      navigate('/');

    } catch (error) {
      if (axios.isAxiosError(error) && error.response) {
        setErrorMessage(error.response.data.message || 'Login failed.');
      } else {
        setErrorMessage('An unknown error occurred.');
      }
      console.error('Login failed', error);
    }
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit} className="register-form">
        <div className="input-group">
          <FontAwesomeIcon icon={faUser} className="icon" />
          <input
            type="text"
            name="username"
            placeholder="Username"
            value={formState.username}
            onChange={handleChange}
            required
          />
        </div>
        <div className="input-group">
          <FontAwesomeIcon icon={faLock} className="icon" />
          <input
            type="password"
            name="password"
            placeholder="Password"
            value={formState.password}
            onChange={handleChange}
            required
          />
        </div>
        <button type="submit">Login</button>

        {errorMessage && <p className="error-message">{errorMessage}</p>}
        {successMessage && <p className="success-message">{successMessage}</p>}

        <p className="register-link">
          Don't have an account? <Link to="/register">Register</Link>
        </p>
      </form>
    </div>
  );
};

export default Login;

import React from 'react';
import './Home.css';

const Home: React.FC = () => {
  return (
    <div className="home-container">
      <h1>Welcome to the Home Page</h1>
    </div>
  );
};

export default Home;

.home-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    flex-direction: column;
}

h1 {
    margin-bottom: 20px;
}

import React, { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';
import axios from 'axios';
import { SERVER_URL } from './configs/Config';

interface ProtectedRouteProps {
  children: React.ReactNode;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);

  useEffect(() => {
    const validateToken = async () => {
      try {
        await axios.post(`${SERVER_URL}/users/validate-access-token`, {}, {
            headers: {
                'X-AccessToken': localStorage.getItem('accessToken')
            }
        });
        setIsAuthenticated(true);
      } catch (error) {
        setIsAuthenticated(false);
      }
    };

    validateToken();
  }, []);

  if (isAuthenticated === null) {
    return <div className="loading">Loading...</div>;
  }

  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
};

export default ProtectedRoute;

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Register from './Register';
import ActivateAccount from './ActivateAccount';
import Login from './Login';
import Home from './Home';
import ProtectedRoute from './ProtectedRoute';

function App() {
  return (
    <Router>
        <Routes>
          <Route path="/register" element={<Register />} />
          <Route path="/activate/:username" element={<ActivateAccount />} />
          <Route path="/login" element={<Login />} />
          <Route
            path="/"
            element={
              <ProtectedRoute>
                <Home />
              </ProtectedRoute>
            }
        />
        </Routes>
    </Router>
  );
}

export default App