Merge pull request #79 from FGA0138-MDS-Ajax/homol

Homol

frontend/.eslintrc.cjs

@@ -20,7 +20,8 @@ module.exports = {
     ],
     "linebreak-style": [
       "error",
-      "unix"
+      "unix",
+      "windows"
     ],
     "quotes": [
       "error",

frontend/package.json

@@ -39,6 +39,7 @@
     "jest": "^29.7.0",
     "json-server": "^0.17.4",
     "postcss": "^8.4.31",
+    "react-icons": "^4.12.0",
     "react-spinners": "^0.13.8",
     "tailwind-scrollbar": "^3.0.5",
     "tailwindcss": "^3.3.5",

frontend/src/App.tsx

@@ -4,7 +4,6 @@ import {
   Route,
 } from 'react-router-dom'
 
-import Layout from './components/Layout'
 import CSVUpload from './pages/CSVUpload'
 import Home from './pages/Home'
 import Login from './pages/Login'
@@ -13,13 +12,13 @@ const App = () => {
 
   return (
     <Router>
-      <Layout>
+      <div className='bg-[#353535] background'>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/csvuploader" element={<CSVUpload />} />
           <Route path="/login" element={<Login />} />
         </Routes >
-      </Layout>
+      </div>
     </Router>
   )
 }

frontend/src/components/Header/index.tsx

@@ -8,6 +8,7 @@ import { Menu, X } from 'lucide-react'
 
 import Logo from '../Logo'
 import MenuNavLink from '../MenuNavLink'
+import { IHeader } from './type'
 
 const navLinks = [
   { title: 'Sobre', to: '/sobre' },
@@ -16,7 +17,7 @@ const navLinks = [
   { title: 'Contato', to: '/contato' },
 ]
 
-const Header = () => {
+const Header = ({ autenticado }: IHeader) => {
   const [open, setOpen] = useState(false)
   const toggleMenu = () => {
     setOpen((prevOpen) => !prevOpen)
@@ -93,13 +94,21 @@ const Header = () => {
             ))}
           </div>
         </motion.div>
-
-        <motion.div
-          variants={reveal}
-          className="mx-12 md:mx-4 md:flex text-lg items-center hidden"
-        >
-          <Link to={'/login'} className='inline-block lg:py-3 lg:px-8 md:py-2 md:px-6 rounded-lg shadow-xl text-2xl btn-gradient text-[#C5C5C5] text-center font-caustenBd hover:scale-105 duration-300 ease-in-out'>Login</Link>
-        </motion.div>
+        {autenticado ? (
+          <motion.div
+            variants={reveal}
+            className="mx-12 md:flex gap-6 text-lg items-center cursor-pointer hidden text-[#C5C5C5]"
+          >
+            <Link to={'/'} className='inline-block lg:py-3 lg:px-8 md:py-2 md:px-6 rounded-lg shadow-xl text-2xl btn-gradient text-[#C5C5C5] text-center font-caustenBd hover:scale-105 duration-300 ease-in-out'>Sair</Link>
+          </motion.div>
+        ) :
+          <motion.div
+            variants={reveal}
+            className="mx-12 md:mx-4 md:flex text-lg items-center hidden"
+          >
+            <Link to={'/login'} className='inline-block lg:py-3 lg:px-8 md:py-2 md:px-6 rounded-lg shadow-xl text-2xl btn-gradient text-[#C5C5C5] text-center font-caustenBd hover:scale-105 duration-300 ease-in-out'>Login</Link>
+          </motion.div>
+        }
         <div
           className="cursor-pointer md:hidden text-lg mx-6 text-[#C5C5C5]"
           onClick={toggleMenu}
@@ -126,7 +135,7 @@ const Header = () => {
                     className="cursor-pointer text-lg mt-12 text-[#C5C5C5]"
                     onClick={toggleMenu}
                   >
-                    <X size={30} color='#C5C5C5'/>
+                    <X size={30} color='#C5C5C5' />
                   </div>
                 </div>
                 <motion.div
@@ -146,7 +155,11 @@ const Header = () => {
                       </div>
                     )
                   })}
-                  <Link to={'/login'} className='mt-4 inline-block lg:py-4 lg:px-12 md:py-4 md:px-12 py-4 px-16 bg-[#C5C5C5] rounded-lg shadow-xl text-2xl text-[#383E4A] text-center font-caustenBd hover:scale-110 duration-300 ease-in-out'>Login</Link>
+                  {autenticado ? (
+                    <Link to={'/'} className='mt-4 inline-block lg:py-4 lg:px-12 md:py-4 md:px-12 py-4 px-16 bg-[#C5C5C5] rounded-lg shadow-xl text-2xl text-[#383E4A] text-center font-caustenBd hover:scale-110 duration-300 ease-in-out'>Sair</Link>
+                  ) :
+                    <Link to={'/login'} className='mt-4 inline-block lg:py-4 lg:px-12 md:py-4 md:px-12 py-4 px-16 bg-[#C5C5C5] rounded-lg shadow-xl text-2xl text-[#383E4A] text-center font-caustenBd hover:scale-110 duration-300 ease-in-out'>Login</Link>
+                  }
                 </motion.div>
               </div>
             </motion.div>

frontend/src/components/Header/type.ts

@@ -0,0 +1,3 @@
+export interface IHeader {
+    autenticado?: boolean
+}

frontend/src/pages/CSVUpload/index.tsx

@@ -1,9 +1,13 @@
+import Footer from '../../components/Footer'
+import Header from '../../components/Header'
 import InputCSV from '../../components/InputCSV'
 
 const CSVUpload = () => {
   return (
     <>
+      <Header autenticado={true} />
       <InputCSV />
+      <Footer />
     </>
   )
 }

frontend/src/pages/Home/index.tsx

@@ -1,12 +1,15 @@
+import Footer from '../../components/Footer'
+import Header from '../../components/Header'
 import Hero from '../../components/Hero'
 import InputHome from '../../components/InputHome'
 
 const Home = () => {
-  return (
-    <>
+  return (<>
+    <Header autenticado={false} />
       <Hero />
       <InputHome />
-    </>
+    <Footer />
+  </>
   )
 }
 

frontend/src/pages/Login/index.tsx

@@ -7,6 +7,8 @@ import { yupResolver } from '@hookform/resolvers/yup'
 import { IFormData } from './type'
 import { useState } from 'react'
 import { API } from '../../server/api'
+import Header from '../../components/Header'
+import Footer from '../../components/Footer'
 
 
 const Login = () => {
@@ -51,62 +53,66 @@ const Login = () => {
   const ErrorDisplayPassword = () => errors && <p className="text-red-500 mt-1 text-left font-bold text-xl">{errors.password?.message}</p>
 
   return (
-    <main className="w-full h-screen flex flex-col items-center justify-center px-4 lg:-mt-12">
-      <div className="max-w-md w-full text-gray-600">
-        <div className="text-center">
-          <div className='flex items-center justify-center'>
-            <Logo />
-          </div>
-          <div className="mt-6 space-y-4">
-            <h3 className="text-gray-200 text-4xl font-bold sm:text-5xl">Faça login na sua Conta!</h3>
-            <p className="text-gray-400 text-lg">Não possui uma conta? <Link to="/suporte" className="font-medium text-xl gradientText">Falar com Suporte</Link></p>
-          </div>
-        </div>
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          className="mt-10 space-y-6"
-        >
-          <div>
-            <label className="text-gray-200 mb-4 text-xl">
-              Email
-            </label>
-            <input
-              type="email"
-              required
-              className="w-full mt-2 px-5 py-4 text-gray-500 inputLogin outline-none shadow-sm rounded-lg"
-              placeholder='Digite seu email'
-              {...register('email')}
-            />
-            <ErrorDisplayEmail />
-          </div>
-          <div>
-            <label className="text-gray-200 mb-4 text-xl">
-              Senha
-            </label>
-            <input
-              type="password"
-              required
-              className="w-full my-2 px-5 py-4 text-gray-500 inputLogin outline-none shadow-sm rounded-lg"
-              placeholder='Digite sua senha'
-              {...register('password')}
-            />
-            <ErrorDisplayPassword />
-            {loginNotSuccess && (
-              <ErrorDisplayLogin />
-            )}
-          </div>
-          <button 
-            className="w-full px-6 py-4 text-gray-200 btn-gradient2 rounded-3xl hover:scale-105 duration-300 ease-in-out"
-            type="submit"
-          >
-            Entrar
-          </button>
+    <>
+      <Header autenticado={false} />
+      <main className="w-full h-screen flex flex-col items-center justify-center px-4 lg:-mt-12">
+        <div className="max-w-md w-full text-gray-600">
           <div className="text-center">
-            <Link to="/suporte" className="text-lg gradientText">Esqueceu a Senha?</Link>
+            <div className='flex items-center justify-center'>
+              <Logo />
+            </div>
+            <div className="mt-6 space-y-4">
+              <h3 className="text-gray-200 text-4xl font-bold sm:text-5xl">Faça login na sua Conta!</h3>
+              <p className="text-gray-400 text-lg">Não possui uma conta? <Link to="/suporte" className="font-medium text-xl gradientText">Falar com Suporte</Link></p>
+            </div>
           </div>
-        </form>
-      </div>
-    </main>
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="mt-10 space-y-6"
+          >
+            <div>
+              <label className="text-gray-200 mb-4 text-xl">
+                Email
+              </label>
+              <input
+                type="email"
+                required
+                className="w-full mt-2 px-5 py-4 text-gray-500 inputLogin outline-none shadow-sm rounded-lg"
+                placeholder='Digite seu email'
+                {...register('email')}
+              />
+              <ErrorDisplayEmail />
+            </div>
+            <div>
+              <label className="text-gray-200 mb-4 text-xl">
+                Senha
+              </label>
+              <input
+                type="password"
+                required
+                className="w-full my-2 px-5 py-4 text-gray-500 inputLogin outline-none shadow-sm rounded-lg"
+                placeholder='Digite sua senha'
+                {...register('password')}
+              />
+              <ErrorDisplayPassword />
+              {loginNotSuccess && (
+                <ErrorDisplayLogin />
+              )}
+            </div>
+            <button
+              className="w-full px-6 py-4 text-gray-200 btn-gradient2 rounded-3xl hover:scale-105 duration-300 ease-in-out"
+              type="submit"
+            >
+              Entrar
+            </button>
+            <div className="text-center">
+              <Link to="/suporte" className="text-lg gradientText">Esqueceu a Senha?</Link>
+            </div>
+          </form>
+        </div>
+      </main>
+      <Footer />
+    </>
   )
 }
 

frontend/tsconfig.json

@@ -2,24 +2,32 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

frontend/yarn.lock

@@ -3645,6 +3645,11 @@ react-hook-form@^7.48.2:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.48.2.tgz#01150354d2be61412ff56a030b62a119283b9935"
   integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
 
+react-icons@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
+  integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
+
 react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"