Página (Admin) - Recuperar senha

components/Admin/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import axios from "axios"
+import AdminHeader from "../commons/AdminHeader";
+import { AdminQuickAccessSection } from "../commons/AdminQuickAccessSection";
+import AdminSidebar from "../commons/AdminSidebar";
+import { AdminModal } from "../commons/AdminModal";
+import { useEffect, useState } from "react";
+import { AdminNewsSection } from "../commons/AdminNewsSection";
+import o from "react-lazy-load-image-component";
+
+export const Admin = () => {
+  const [news, setNews] = useState([])
+  const [refetch, setRefetch] = useState(false)
+
+  //Fetch News Mock com JSON Server
+  // useEffect(() => {
+  //     const fetchNews = async () => {
+  //         const response = await axios.get("http://localhost:5000/news");
+  //         setNews(response.data);
+  //     }
+  //     fetchNews();
+  // }, [refetch]);
+
+  return (
+    <div className="h-screen w-screen bg-white flex flex-col">
+      <AdminHeader />
+      <div className="flex">
+        <AdminSidebar />
+        <div className="flex flex-col items-center w-screen">
+          <AdminQuickAccessSection />
+          <div>
+            <AdminModal setRefetch={setRefetch} />
+            <AdminNewsSection news={news} setRefetch={setRefetch} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/AdminForgotPassword/components/Modal/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import * as Dialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { Politicas } from "../../../Politicas";
+
+type ModalProps =  {
+    messages: string[]
+    setOpen: (open) => void
+}
+
+export const Modal = ({ messages, setOpen }: ModalProps) => {
+    return (
+        <Dialog.Portal>
+            <Dialog.Overlay className='inset-0 fixed bg-black/60'>
+                <Dialog.Content className='fixed bg-admin-login bg-cover bg-adminLogin overflow-hidden inset-0 md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:max-w-[420px] md:h-[200px] w-full md:rounded-3xl flex flex-col outline-none'>
+                    <Dialog.Close onClick={() => setOpen(false)} className='p-4 text-slate-400 hover:text-slate-100 absolute top-0 right-0'>
+                        <X className='size-8'/>
+                    </Dialog.Close>
+                    <div className="h-full w-full px-8 flex justify-center items-center flex-col">
+                        {
+                            messages.map(message => <span className="text-primary font-medium text-2xl text-center">{message}</span>)
+                        }
+                    </div>
+                </Dialog.Content>
+            </Dialog.Overlay>
+        </Dialog.Portal>
+    )
+}

components/AdminForgotPassword/index.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import { ErrorMessage, Formik, Field, Form } from 'formik';
+import * as Dialog from '@radix-ui/react-dialog';
+import { initialValues, validationSchema } from './structure';
+import { Modal } from './components/Modal';
+
+export const AdminForgotPassword = () => {
+    const [open, setOpen] = useState(false);
+
+    const handleSubmit = async (values) => {
+        // window.location.href = "/admin-login"
+    };
+
+    return (
+        <Dialog.Root open={open}>
+            <div className="h-screen w-screen bg-adminLogin grid grid-cols-1 lg:grid-cols-2">
+                {/* Div de background visível apenas em telas lg ou maiores */}
+                <div className="hidden lg:block bg-admin-login bg-right-top" />
+                <Formik
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                    validateOnChange={true}
+                    validationSchema={validationSchema}
+                >
+                    {({ errors, isValid, values }) => {
+                        return (
+                            <Form>
+                                <div className="flex justify-center items-center h-screen m-auto text-start bg-admin-login lg:bg-none">
+                                    <div className="flex flex-col w-[90%] md:w-[70%] lg:w-[60%]">
+                                        <h1 className="text-primary text-4xl lg:text-6xl font-medium text-center mb-8">
+                                            Redefinição de Senha
+                                        </h1>
+                                        <p className="text-primary text-lg lg:text-xl w-[90%] lg:w-[80%] m-auto text-center">
+                                            Para redefinir sua senha, nos informe o seu e-mail.
+                                        </p>
+                                        <p className="text-primary text-lg lg:text-xl w-[90%] lg:w-[80%] m-auto text-center mb-8 lg:mb-16">
+                                            Você irá receber um e-mail com as instruções necessárias.
+                                        </p>
+                                        <div className="mb-8 lg:mb-12">
+                                            <label htmlFor="email" className="text-primary font-semibold text-lg lg:text-xl">
+                                                E-MAIL
+                                            </label>
+                                            <Field
+                                                id="email"
+                                                name="email"
+                                                type="email"
+                                                className="border-b-2 bg-transparent h-14 lg:h-16 w-full text-slate-400 text-lg lg:text-xl outline-none"
+                                            />
+                                        </div>
+                                        {errors.email && (
+                                            <ul className="text-base lg:text-lg border-l-2 border-l-red-500 pl-4 flex flex-col mb-6 lg:mb-8">
+                                                <li className="list-disc ml-4 text-red-500">{errors?.email as string}</li>
+                                            </ul>
+                                        )}
+                                        <button
+                                            className={`flex items-center gap-2 h-14 lg:h-16 mt-8 ${
+                                                !isValid || values.email === ''
+                                                    ? 'bg-slate-500'
+                                                    : 'bg-primary hover:bg-primaryHover'
+                                            } rounded-lg px-12 lg:px-24 w-fit text-xl lg:text-2xl m-auto`}
+                                            type="submit"
+                                            disabled={!isValid || values.email === ''}
+                                        >
+                                            Enviar
+                                        </button>
+                                    </div>
+                                </div>
+                            </Form>
+                        );
+                    }}
+                </Formik>
+            </div>
+            <Modal setOpen={setOpen} messages={["Limite de tentativas excedida.", "Tente novamente em algumas horas."]} />
+        </Dialog.Root>
+    );
+};

components/AdminForgotPassword/structure.ts

@@ -0,0 +1,9 @@
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object().shape({
+    email: Yup.string().email('Email digitado não é válido').required('Email é obrigatório'),
+});
+
+export const initialValues = {
+    email: ''
+};

components/AdminLogin/index.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from 'react';
+import { ErrorMessage, Formik, Field, Form } from 'formik';
+import * as Yup from 'yup';
+import axios from 'axios';
+import Cookies from 'js-cookie';
+
+export const AdminLogin = () => {
+    const [error, setError] = useState(false)
+
+    useEffect(() => {
+        if (Cookies.get("name")) {
+            window.location.href = "/admin"
+        }
+    })
+
+    const initialValues = {
+        email: '',
+        password: ''
+    };
+
+    const validationSchema = Yup.object().shape({
+        email: Yup.string()
+            .required('Email é obrigatório'),
+        password: Yup.string()
+            .required('Senha é obrigatória')
+    });
+
+    // Login Mock com JSON Server
+    const login = async (values) => {
+        window.location.href = "/admin"
+
+        // try {
+        //     const users = await axios.get("http://localhost:5000/users")
+        //     const user = users.data.find(user =>
+        //         user.email === values.email &&
+        //         user.password === values.password
+        //     )
+
+
+        //     if (user) {
+        //         Cookies.set('name', user.name, {
+        //             secure: true,
+        //             sameSite: 'strict'
+        //         });
+        //         Cookies.set('email', user.email, {
+        //             secure: true,
+        //             sameSite: 'strict'
+        //         });
+
+        //         window.location.href = "/admin"
+        //     } else {
+        //         setError(true)
+        //         setTimeout(() => {
+        //             setError(false)
+        //         }, 3000)
+        //     }
+        // } catch (e) {
+        //     console.error(e)
+        //     setError(true)
+        //     setTimeout(() => {
+        //         setError(false)
+        //     }, 3000)
+        // }
+    }
+
+  return (
+    <div className="h-screen w-screen bg-adminLogin flex flex-col bg-admin-login">
+        <Formik
+          onSubmit={login}
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          validateOnBlur={true}
+        >
+          {({ touched, errors }) => (
+            <Form>
+                <div className="flex justify-center items-center h-screen m-auto text-start">
+                    <div className='flex flex-col w-[30%]'>
+                        <h1 className="text-primary text-8xl font-bold text-center mb-2">INICIAR SESSÃO</h1>
+                        <h2 className="text-primary text-6xl font-semibold text-center mb-16">ADMINISTRAÇÃO</h2>
+                        <div className='mb-8'>
+                            <label htmlFor="email" className="text-primary font-semibold text-xl">E-MAIL</label>
+                            <Field
+                                id="email"
+                                name="email"
+                                type="email"
+                                className={`border-b-2 bg-transparent ${touched.email && errors.email && "border-red-500 text-red-500"} h-16 w-full text-black text-xl outline-none`}
+                            />
+                        </div>
+                        <div className='mb-8'>
+                            <label htmlFor="password" className="text-primary font-semibold text-xl">SENHA</label>
+                            <Field
+                                id="password"
+                                name="password"
+                                type="password"
+                                className={`border-b-2 bg-transparent ${touched.password && errors.password && "border-red-500 text-red-500"} h-16 w-full text-black text-xl outline-none`}
+                            />
+                        </div>
+                        <a href="#" className="underline text-blue-500 text-end text-lg">Esqueceu a senha?</a>
+                        <ul className='text-red-500 text-lg border-l-2 border-l-red-400 pl-4 flex flex-col'>
+                            {
+                                errors.email &&
+                                <ErrorMessage name="email" component="li" className='list-disc ml-4' />
+                            }
+                            {
+                                errors.password &&
+                                <ErrorMessage name="password" component="li" className='list-disc ml-4' />
+                            }
+                            {
+                                error &&
+                                <li className='list-disc ml-4'>
+                                    E-mail ou senha incorreto
+                                </li>
+                            }
+                        </ul>
+                        <button type="submit" className="h-16 mt-8 bg-primary rounded-lg px-24 w-fit text-xl m-auto hover:bg-primaryHover">
+                            ENTRAR
+                        </button>
+                    </div>
+                </div>
+            </Form>
+          )}
+        </Formik>
+    </div>
+  );
+};