refactor(auth): change upload image so dont need auth

Author: brunooomelo

Diff for: package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@tailwindcss/forms": "^0.5.6",
     "@types/node": "20.6.2",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
@@ -21,6 +22,7 @@
     "google-libphonenumber": "^3.2.33",
     "lucide-react": "^0.279.0",
     "next": "13.4.19",
+    "nookies": "^2.5.2",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",

Diff for: pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import { environment } from "@/utils/environment";
+import { setCookie, parseCookies } from "nookies";
 import {
   ReactNode,
   createContext,
@@ -13,15 +14,19 @@ type User = {
   whatsapp: string;
   isAuthenticated: boolean;
 };
+type IOpenLogin = {
+  status?: boolean;
+  reset?: boolean;
+};
 type IContext = {
   user: User | null;
   isLogged: boolean;
   isOpen: boolean;
-  openLogin: (status?: boolean) => Promise<void>;
+  openLogin: (data?: IOpenLogin) => Promise<void>;
+  changeNumber: () => Promise<void>;
   logout: () => Promise<void>;
   setPin: (token: string) => Promise<void>;
   login: ({ whatsapp }: { whatsapp: string }) => Promise<void>;
-  token: string | null;
 };
 
 const Context = createContext({ user: null } as IContext);
@@ -31,16 +36,22 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);
   const [isLogged, setIsLogged] = useState(false);
   const [isOpen, setOpen] = useState(false);
-  const [token, setToken] = useState(null);
 
   const getSession = useCallback(async () => {
+    const cookies = parseCookies();
+    const token = cookies.phone_token;
+
     if (!token) return;
-    const session = await fetch("/session", {
+    const session = await fetch(`${environment.APIURL}/session`, {
       headers: {
         "x-auth-token": token,
       },
     }).then((res) => res.json());
 
+    if (session.error) {
+      alert(session.error);
+      return;
+    }
     setUser(session.data);
     setIsLogged(true);
   }, []);
@@ -50,17 +61,23 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     setUser(null);
   }, []);
 
-  const openLogin = useCallback(async (status = true) => {
-    setOpen(status);
-  }, []);
+  const openLogin = useCallback(
+    async ({ status = true, reset = false } = {} as IOpenLogin) => {
+      if (reset) {
+        setUser(null);
+        setIsLogged(false);
+      }
+      setOpen(status);
+    },
+    []
+  );
 
   const login = async ({ whatsapp }: { whatsapp: string }) => {
     try {
       const response = await fetch(`${environment.APIURL}/login`, {
         method: "POST",
         body: JSON.stringify({
-          name,
-          whatsapp: `55${whatsapp}@c.us`,
+          whatsapp,
         }),
         headers: {
           "Content-Type": "application/json",
@@ -109,16 +126,25 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
       alert(response.message);
       const { id, isAuthenticated, whatsapp } = response.data;
       setUser({ id, isAuthenticated, whatsapp });
-      setToken(response.token);
+
+      setCookie(null, "phone_token", response.token, {
+        maxAge: 86400 * 7,
+        path: "/",
+      });
     } catch (error) {
       console.log(error);
       alert("Ocorreu um erro, tente mais tarde");
     }
   };
 
+  const changeNumber = async () => {
+    setUser(null);
+    setIsLogged(false);
+  };
+
   useEffect(() => {
     getSession();
-  }, []);
+  }, [getSession]);
 
   return (
     <Context.Provider
@@ -130,7 +156,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         isOpen,
         login,
         setPin,
-        token,
+        changeNumber,
       }}
     >
       {children}

Diff for: src/components/AuthContext.tsx

@@ -1,6 +1,6 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { useState } from "react";
 import { useAuth } from "./AuthContext";
+import { hiddenPhone } from "@/utils/hiddenNumber";
 
 export const LoginButton = () => {
   const { isLogged, openLogin, user, logout } = useAuth();
@@ -16,7 +16,7 @@ export const LoginButton = () => {
             }
           }}
         >
-          {isLogged && user?.whatsapp ? user?.whatsapp : "Entrar"}
+          {isLogged && user?.whatsapp ? hiddenPhone(user?.whatsapp) : "Entrar"}
         </button>
       </DropdownMenu.Trigger>
 

Diff for: src/components/LoginButton.tsx

@@ -2,6 +2,8 @@ import * as Dialog from "@radix-ui/react-dialog";
 
 import { Controller, useForm } from "react-hook-form";
 import { useAuth } from "./AuthContext";
+import { DDI } from "@/utils/DDI";
+import { useEffect } from "react";
 
 export const LoginForm = () => {
   const { isLogged, openLogin, user, login, isOpen } = useAuth();
@@ -10,22 +12,35 @@ export const LoginForm = () => {
     control,
     handleSubmit,
     formState: { isSubmitting },
+    watch,
+    reset,
   } = useForm({
     defaultValues: {
       whatsapp: "",
+      country: "+55",
     },
   });
 
   const onSubmit = async (data: any) => {
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-    login({ whatsapp: data.whatsapp });
+    try {
+      const whatsapp = [data.country, data.whatsapp].join("");
+      login({ whatsapp });
+    } catch (error) {
+      console.log(error);
+    }
   };
+
+  useEffect(() => {
+    if (!isOpen) {
+      reset();
+    }
+  }, [isOpen, reset]);
   return (
     <Dialog.Root
       open={isOpen}
       onOpenChange={(state) => {
         if (!isSubmitting) {
-          openLogin(state);
+          openLogin({ status: state });
         }
       }}
     >
@@ -38,32 +53,68 @@ export const LoginForm = () => {
         >
           <form noValidate onSubmit={handleSubmit(onSubmit)}>
             <Dialog.Title className="text-zinc-900 m-0 text-[17px] font-medium">
-              Acesso ao Sistema
+              Bem-vindo ao nosso gerador
             </Dialog.Title>
             <Dialog.Description className="text-zinc-600 mt-[10px] mb-5 text-[15px] leading-normal">
-              Bem-vindo ao nosso sistema! Para proporcionar uma experiência
-              personalizada e segura, solicitamos seu nome e número de contato.
+              Para proporcionar uma experiência personalizada e segura,
+              solicitamos seu número de whatsapp{" "}
+              <strong>apenas para te enviar a figurinha</strong>.
             </Dialog.Description>
 
             <Controller
               control={control}
               name="whatsapp"
-              render={(props) => (
-                <fieldset className="mb-[15px] flex items-center gap-5">
-                  <label
-                    className="text-violet11 w-[90px] text-right text-[15px]"
-                    htmlFor={props.field.name}
-                  >
-                    Whatsapp
-                  </label>
-                  <input
-                    id={props.field.name}
-                    className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
-                    disabled={!user?.isAuthenticated && isLogged}
-                    {...props.field}
-                  />
-                </fieldset>
-              )}
+              render={(props) => {
+                const country = watch("country");
+                const placeholder = DDI.find((ddi) => ddi.ddi === country);
+                return (
+                  <div>
+                    <label
+                      className="block text-sm font-medium leading-6 text-gray-900"
+                      htmlFor={props.field.name}
+                    >
+                      Whatsapp
+                    </label>
+                    <div className="relative mt-2 rounded-md shadow-sm">
+                      <Controller
+                        control={control}
+                        name="country"
+                        render={(selectProps) => {
+                          return (
+                            <div className="absolute inset-y-0 left-0 flex items-center">
+                              <label htmlFor="country" className="sr-only">
+                                Country
+                              </label>
+                              <select
+                                id="country"
+                                autoComplete="country"
+                                className="h-full rounded-md border-0 bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
+                                disabled={!user?.isAuthenticated && isLogged}
+                                {...selectProps.field}
+                              >
+                                {DDI.map(({ ddi, sigla }) => (
+                                  <option value={ddi} key={ddi}>
+                                    {sigla}
+                                  </option>
+                                ))}
+                              </select>
+                            </div>
+                          );
+                        }}
+                      />
+
+                      <input
+                        type="text"
+                        id={props.field.name}
+                        className="block w-full rounded-md border-0 py-1.5 pl-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                        placeholder={placeholder?.placeholder}
+                        disabled={!user?.isAuthenticated && isLogged}
+                        {...props.field}
+                      />
+                    </div>
+                  </div>
+                );
+              }}
             />
 
             <span className="text-xs text-zinc-400 leading-none">
@@ -76,7 +127,7 @@ export const LoginForm = () => {
                 data-loading={isSubmitting}
                 type="button"
                 className="inline-flex h-[35px] border items-center justify-center rounded-[4px] px-[15px] font-medium leading-none focus:shadow-[0_0_0_2px] focus:outline-none data-[loading=true]:cursor-not-allowed"
-                onClick={() => openLogin(false)}
+                onClick={() => openLogin({ status: false })}
                 disabled={isSubmitting}
               >
                 Voltar
@@ -87,7 +138,7 @@ export const LoginForm = () => {
                 className="bg-indigo-600 text-white hover:bg-indigo-400 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none focus:shadow-[0_0_0_2px] focus:outline-none data-[loading=true]:cursor-not-allowed"
                 disabled={isSubmitting}
               >
-                {isSubmitting ? "Enviando...." : "Cadastrar"}
+                {isSubmitting ? "Enviando...." : "Próximo"}
               </button>
             </div>
             <Dialog.Close asChild>