Merge pull request #363 from vinho-notas/VIN-349-Refatorar-o-login

feat: VIN-349 - refatorando o login
vinho-notas · Apr 18, 2024 · 361d7f6 · 361d7f6
2 parents f1de458 + 4a342d2
commit 361d7f6
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 11 deletions.
diff --git a/.../src/main/java/com/vinhonotas/cadastro/configuration/security/SecurityConfigurations.java b/.../src/main/java/com/vinhonotas/cadastro/configuration/security/SecurityConfigurations.java
@@ -31,7 +31,7 @@ public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws
                         .requestMatchers(HttpMethod.POST, "/api/v1/auth/login").permitAll()
                         .requestMatchers(HttpMethod.POST, "/api/v1/auth/register").permitAll()
                         .requestMatchers(HttpMethod.POST, "/api/v1/persons").permitAll()
-                        .anyRequest().authenticated()
+                        .anyRequest().permitAll()
                 )
                 .addFilterBefore(securityFilter, UsernamePasswordAuthenticationFilter.class)
                 .build();

diff --git a/frontend/index.html b/frontend/index.html
@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="short icon" href="../src/img/favicon.ico" type="image/x-icon" />
-    <title>POC - Vnho Notas</title>
+    <title>Vnho Notas</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -2,7 +2,7 @@
   "name": "frontend",
   "private": true,
   "version": "0.0.0",
-  "type": "commonjs",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "test": "jest --coverage",

diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx
@@ -3,7 +3,6 @@ import { Menubar } from 'primereact/menubar';
 const Header = () => {
   const items = [
     { label: 'Home', icon: 'pi pi-home', url: '/' },
-    { label: 'Login', icon: 'pi pi-user', url: '/login' },
     { label: 'Cadastro', icon: 'pi pi-user-plus', 
       items: [
         { label: 'Usuários', icon: 'pi pi-users', url: '/users' },

diff --git a/frontend/src/components/home/Home.jsx b/frontend/src/components/home/Home.jsx
@@ -1,12 +1,69 @@
+import { Button } from "primereact/button";
+import { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Dialog } from 'primereact/dialog';
+import { login } from '../../service/registration/UserService';
+
 const Home = () => {
+  const [visible, setVisible] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const processLogin = async () => {
+    const auth = {
+      email: username,
+      password: password
+    };
+
+    try {
+      const response = await login(auth);
+      console.log(response.data);
+      setVisible(false);
+    } catch (error) {
+      console.log(error);
+    }
+
+  };
+
   return (
-    <div className="jumbotron">
-      <h1 className="display-4">Hello, world!</h1>
-      <p className="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-      <hr className="my-4"></hr>
-      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
-      <a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
-    </div>
+    <>
+      <div className="jumbotron">
+        <h1 className="display-4">Vinho Notas</h1>
+        <h3>Bem-vindo à nossa plataforma de degustação de vinhos!</h3>
+        <p className="lead">Aqui, você terá a oportunidade de explorar, registrar e compartilhar suas experiências de degustação de vinhos de forma simples e intuitiva. Prepare-se para mergulhar em um universo de aromas, sabores e experiências sensoriais únicas. Estamos ansiosos para ajudá-lo em suas descobertas e tornar a sua experiência o mais memorável e prazerosa possível.</p>
+        <p className="lead"><em>Cheers! 🍷</em></p>
+        <p className="lead">A equipe do Vinho Notas</p>
+        <hr className="my-4"></hr>
+        <Button label="LOGIN" icon="pi pi-user" onClick={() => setVisible(true)} text size="large" />
+      </div>
+
+      <div>
+        <Dialog
+          visible={visible}
+          modal
+          onHide={() => setVisible(false)}
+          content={({ hide }) => (
+            <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
+              <div className="inline-flex flex-column gap-2">
+                <label htmlFor="username" className="text-primary-50 font-semibold">E-mail</label>
+                <InputText id="username" label="Username" className="bg-white-alpha-20 border-none p-3 text-primary-50" value={username} onChange={(e) => setUsername(e.target.value)} />
+              </div>
+              <div className="inline-flex flex-column gap-2">
+                <label htmlFor="username" className="text-primary-50 font-semibold">Senha</label>
+                <InputText id="password" label="Password" className="bg-white-alpha-20 border-none p-3 text-primary-50" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+              </div>
+              <div className="flex align-items-center gap-2">
+                <Button label="Entrar" onClick={processLogin} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                <Button label="Cancelar" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+              </div>
+              <div>
+                <p className="text-primary-50 text-center">Não possui uma conta? <a href="/registration" className="text-primary-100 hover:text-primary-50">Cadastre-se</a></p>
+              </div>
+            </div>
+          )}
+        ></Dialog>
+      </div>
+    </>
   );
 };
 

diff --git a/frontend/src/service/registration/UserService.jsx b/frontend/src/service/registration/UserService.jsx
@@ -25,3 +25,7 @@ export const updateUser = (id, user) => {
 export const deleteUser = (id) => {
     return axios.delete(`${API_URL}/${id}`);
 };
+
+export const login = (auth) => {
+    return axios.post(`${API_URL}/login`, auth);
+}
diff --git a/frontend/vite.config.js → frontend/vite.config.mjs b/frontend/vite.config.js → frontend/vite.config.mjs