Implement user authentication functionality

.gitignore

@@ -8,7 +8,11 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+package.json
+package-lock.json
 app/node_modules
+backend/node_modules
+backend/.env
 dist
 dist-ssr
 *.local

app/package.json

@@ -16,6 +16,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@iconscout/react-unicons": "^2.0.2",
+    "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "dompurify": "^3.1.0",
     "emoji-mart": "^5.5.2",

app/src/components/LoginPage.jsx

@@ -1,14 +1,32 @@
-import React from "react";
+import { useState } from "react";
 import style from "./LoginPage.module.css";
 import astronauta from "../assets/astronauta.svg";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
 const LoginPage = ({ acao }) => {
+  const [email, setEmail] = useState("");
+  const [senha, setSenha] = useState("");
+
+  const handleLogin = async () => {
+    try {
+      const user = { email, senha };
+      const response = await fetch("http://localhost:4000/api/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(user),
+      });
+      response.ok ? window.location.replace("/app") : alert("Erro ao logar");
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    window.location.href = "/app";
+    handleLogin();
   };
 
   const login = (
@@ -28,7 +46,11 @@ const LoginPage = ({ acao }) => {
           <h2 className={style.title}>Entrar</h2>
           <h1 className={style.frase}>Bem-vindo de volta!</h1>
         </div>
-        <form action="" className={style.form}>
+        <form
+          action=""
+          className={style.form}
+          onSubmit={(e) => handleSubmit(e)}
+        >
           <div className={style.inputGroup}>
             <label htmlFor="email" className={style.label}>
               Email
@@ -39,6 +61,8 @@ const LoginPage = ({ acao }) => {
               name="email"
               className={style.input}
               placeholder="exemplo@gmail.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
             />
           </div>
           <div className={style.inputGroup}>
@@ -51,16 +75,19 @@ const LoginPage = ({ acao }) => {
               name="password"
               className={style.input}
               placeholder="Insira sua senha"
+              value={senha}
+              onChange={(e) => setSenha(e.target.value)}
             />
           </div>
           <a href="/forgot-password" className={style.forgotPassword}>
             Esqueceu a senha?
           </a>
-          <button type="submit" onClick={handleSubmit} className={`${style.submit} ${style.disabled}`}>
+          <button type="submit" className={`${style.submit} ${style.disabled}`}>
             Entrar
           </button>
           <p className={style.textSignup}>
-            Ainda não possui uma conta? <Link to={`/cadastro`}>Cadastre-se</Link>
+            Ainda não possui uma conta?{" "}
+            <Link to={`/cadastro`}>Cadastre-se</Link>
           </p>
         </form>
       </div>
@@ -99,7 +126,11 @@ const LoginPage = ({ acao }) => {
               placeholder="Crie uma senha forte"
             />
           </div>
-          <button type="submit" onClick={handleSubmit} className={`${style.submit} ${style.disabled}`}>
+          <button
+            type="submit"
+            onClick={handleSubmit}
+            className={`${style.submit} ${style.disabled}`}
+          >
             Cadastrar
           </button>
           <p className={style.textSignup}>

backend/controllers/loginController.js

@@ -0,0 +1,20 @@
+const User = require("../models/userModel");
+const mongoose = require("mongoose");
+
+const userLogin = async (req, res) => {
+  try {
+    const { email, senha } = req.body;
+    const user = await User.findOne({ email: email});
+    if (!user) {
+      return res.status(404).json({ error: "Usuario não encontrado" });
+    }
+    if (user.senha !== senha) {
+      return res.status(401).json({ error: "Senha inválida" });
+    }
+    res.status(200).json(user);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+}
+
+module.exports = { userLogin };

backend/controllers/userControllers.js

@@ -0,0 +1,79 @@
+const User = require("../models/userModel");
+const mongoose = require("mongoose");
+
+// GET todos os usuarios
+const getUsers = async (req, res) => {
+  try {
+    const users = await User.find({}).sort({ createdAt: -1 });
+    res.status(200).json(users);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+};
+
+// GET um usuario
+const getUser = async (req, res) => {
+  const { id } = req.params;
+
+  if (!mongoose.Types.ObjectId.isValid(id)) {
+    return res.status(404).json({ error: "Usuario não encontrado" });
+  }
+
+  const user = await User.findById(id);
+
+  if (!user) {
+    return res.status(404).json({ error: "Usuario não encontrado" });
+  }
+
+  res.status(200).json(user);
+};
+
+// POST um novo usuario
+const createUser = async (req, res) => {
+  const user = req.body;
+
+  try {
+    const novoUser = await User.create(user);
+    res.status(201).json(novoUser);
+  } catch (error) {
+    res.status(409).json({ error: error.message });
+  }
+};
+
+// DELETE um usuario
+const deleteUser = async (req, res) => {
+  const { id } = req.params;
+
+  if (!mongoose.Types.ObjectId.isValid(id)) {
+    return res.status(404).json({ error: "Usuario não encontrado" });
+  }
+
+  const user = await User.findByIdAndDelete(id);
+
+  if (!user) {
+    return res.status(404).json({ error: "Usuario não encontrado" });
+  }
+
+  res.status(200).json(user);
+};
+
+// UPDATE um usuario
+const updateUser = async (req, res) => {
+  const { id } = req.params;
+
+  if (!mongoose.Types.ObjectId.isValid(id)) {
+    return res.status(404).json({ error: "Usuario não encontrado" });
+  }
+
+  const user = await User.findByIdAndUpdate(id, {
+    ...req.body,
+  });
+
+  if (!user) {
+    return res.status(404).json({ error: "Usuario não encontrado" });
+  }
+
+  res.status(200).json(user);
+};
+
+module.exports = { getUsers, getUser, createUser, deleteUser, updateUser };

backend/models/userModel.js

@@ -0,0 +1,22 @@
+const mongoose = require("mongoose");
+
+const userSchema = new mongoose.Schema({
+  nome: {
+    type: String,
+    required: true,
+  },
+  email: {
+    type: String,
+    required: true,
+  },
+  senha: {
+    type: String,
+    required: true,
+  },
+  configuracoes: {
+    type: Object,
+    required: true,
+  },
+}, { timestamps: true });
+
+module.exports = mongoose.model("User", userSchema);