feat(ui): unifica formulario com abas de admin e usuario

Author: Jovinull

frontend/src/components/login/RegisterSide.tsx

@@ -57,6 +57,7 @@ function StarsBackground() {
 }
 
 export default function RegisterSide() {
+  const [role, setRole] = useState<"user" | "admin">("user");
   const [showPassword, setShowPassword] = useState(false);
   const [nome, setNome] = useState("");
   const [email, setEmail] = useState("");
@@ -153,14 +154,16 @@ export default function RegisterSide() {
       isValid = false;
     }
 
-    if (!level) {
-      setLevelError("A seleção de nível é obrigatória.");
-      isValid = false;
-    }
+    if (role === "admin") {
+      if (!level) {
+        setLevelError("A seleção de nível é obrigatória.");
+        isValid = false;
+      }
 
-    if (selectedTechnologies.length === 0) {
-      setTechnologiesError("Selecione ao menos uma tecnologia.");
-      isValid = false;
+      if (selectedTechnologies.length === 0) {
+        setTechnologiesError("Selecione ao menos uma tecnologia.");
+        isValid = false;
+      }
     }
 
     if (isValid) {
@@ -172,8 +175,9 @@ export default function RegisterSide() {
           name: nome,
           phone: telefone,
           cpf: cpf,
-          level: level,
-          technologies: selectedTechnologies,
+          level: role === "admin" ? level : undefined,
+          technologies: role === "admin" ? selectedTechnologies : undefined,
+          role: role,
         });
         window.location.href = "/login?registered=true";
       } catch (error: any) {
@@ -213,6 +217,22 @@ export default function RegisterSide() {
         </div>
       </div>
       <form className="relative z-10 space-y-5 w-full max-w-2xl mx-auto my-8" onSubmit={handleSubmit}>
+        <div className="flex bg-gray-100 dark:bg-neutral-800/80 backdrop-blur-sm p-1.5 rounded-xl mb-4 border border-gray-200 dark:border-neutral-700">
+          <button
+            type="button"
+            onClick={() => { setRole("user"); setLevelError(""); setTechnologiesError(""); }}
+            className={`flex-1 py-3 text-sm font-semibold rounded-lg transition-all duration-200 ${role === "user" ? "bg-white dark:bg-neutral-700 text-blue-600 dark:text-blue-400 shadow-sm" : "text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"}`}
+          >
+            Sou Usuário
+          </button>
+          <button
+            type="button"
+            onClick={() => setRole("admin")}
+            className={`flex-1 py-3 text-sm font-semibold rounded-lg transition-all duration-200 ${role === "admin" ? "bg-white dark:bg-neutral-700 text-blue-600 dark:text-blue-400 shadow-sm" : "text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"}`}
+          >
+            Sou Admin
+          </button>
+        </div>
         {apiError && (
           <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
             <p className="text-sm text-red-600 dark:text-red-400 text-center">{apiError}</p>
@@ -250,37 +270,41 @@ export default function RegisterSide() {
           <input id="cpf" type="text" value={cpf} onChange={(e) => setCpf(formatCpf(e.target.value))} placeholder="091.000.000-00" disabled={isLoading} className={`w-full px-4 py-3.5 rounded-xl border bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 transition-all shadow-sm ${cpfError ? "border-red-500 focus:ring-red-500" : "border-gray-200 dark:border-neutral-700 focus:ring-blue-500 focus:border-transparent"} ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`} />
           {cpfError && <p className="mt-1.5 text-xs text-red-500 font-medium">{cpfError}</p>}
         </div>
-        <div>
-          <label htmlFor="level" className="block text-sm font-semibold text-gray-700 dark:text-neutral-300 mb-1.5">Nível Profissional</label>
-          <select id="level" value={level} onChange={(e) => setLevel(e.target.value)} disabled={isLoading} className={`w-full px-4 py-3.5 rounded-xl border bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 transition-all shadow-sm ${levelError ? "border-red-500 focus:ring-red-500" : "border-gray-200 dark:border-neutral-700 focus:ring-blue-500 focus:border-transparent"} ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}>
-            <option value="" disabled hidden>Selecione seu nível</option>
-            <option value="Estágio">Estágio</option>
-            <option value="Júnior">Júnior</option>
-            <option value="Pleno">Pleno</option>
-            <option value="Sênior">Sênior</option>
-            <option value="Especialista">Especialista</option>
-          </select>
-          {levelError && <p className="mt-1.5 text-xs text-red-500 font-medium">{levelError}</p>}
-        </div>
-        <div>
-          <label className="block text-sm font-semibold text-gray-700 dark:text-neutral-300 mb-1.5">Tecnologias que domina</label>
-          <div className={`flex flex-wrap gap-2.5 p-4 rounded-xl border bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm shadow-sm transition-all ${technologiesError ? "border-red-500" : "border-gray-200 dark:border-neutral-700"} ${isLoading ? "opacity-50" : ""}`}>
-            {POPULAR_TECHNOLOGIES.map((tech) => {
-              const isSelected = selectedTechnologies.includes(tech);
-              return (
-                <Badge
-                  key={tech}
-                  variant={isSelected ? "default" : "secondary"}
-                  className={`cursor-pointer text-sm py-1.5 px-3.5 transition-all duration-200 hover:scale-105 active:scale-95 border-0 ${isSelected ? "bg-gradient-to-r from-blue-600 to-purple-600 hover:opacity-90 text-white shadow-md shadow-blue-500/20" : "bg-gray-100 dark:bg-neutral-700 text-gray-700 dark:text-neutral-300 hover:bg-gray-200 dark:hover:bg-neutral-600"}`}
-                  onClick={() => toggleTechnology(tech)}
-                >
-                  {tech}
-                </Badge>
-              );
-            })}
-          </div>
-          {technologiesError && <p className="mt-1.5 text-xs text-red-500 font-medium">{technologiesError}</p>}
-        </div>
+        {role === "admin" && (
+          <>
+            <div>
+              <label htmlFor="level" className="block text-sm font-semibold text-gray-700 dark:text-neutral-300 mb-1.5">Nível Profissional</label>
+              <select id="level" value={level} onChange={(e) => setLevel(e.target.value)} disabled={isLoading} className={`w-full px-4 py-3.5 rounded-xl border bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 transition-all shadow-sm ${levelError ? "border-red-500 focus:ring-red-500" : "border-gray-200 dark:border-neutral-700 focus:ring-blue-500 focus:border-transparent"} ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}>
+                <option value="" disabled hidden>Selecione seu nível</option>
+                <option value="Estágio">Estágio</option>
+                <option value="Júnior">Júnior</option>
+                <option value="Pleno">Pleno</option>
+                <option value="Sênior">Sênior</option>
+                <option value="Especialista">Especialista</option>
+              </select>
+              {levelError && <p className="mt-1.5 text-xs text-red-500 font-medium">{levelError}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 dark:text-neutral-300 mb-1.5">Tecnologias que domina</label>
+              <div className={`flex flex-wrap gap-2.5 p-4 rounded-xl border bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm shadow-sm transition-all ${technologiesError ? "border-red-500" : "border-gray-200 dark:border-neutral-700"} ${isLoading ? "opacity-50" : ""}`}>
+                {POPULAR_TECHNOLOGIES.map((tech) => {
+                  const isSelected = selectedTechnologies.includes(tech);
+                  return (
+                    <Badge
+                      key={tech}
+                      variant={isSelected ? "default" : "secondary"}
+                      className={`cursor-pointer text-sm py-1.5 px-3.5 transition-all duration-200 hover:scale-105 active:scale-95 border-0 ${isSelected ? "bg-gradient-to-r from-blue-600 to-purple-600 hover:opacity-90 text-white shadow-md shadow-blue-500/20" : "bg-gray-100 dark:bg-neutral-700 text-gray-700 dark:text-neutral-300 hover:bg-gray-200 dark:hover:bg-neutral-600"}`}
+                      onClick={() => toggleTechnology(tech)}
+                    >
+                      {tech}
+                    </Badge>
+                  );
+                })}
+              </div>
+              {technologiesError && <p className="mt-1.5 text-xs text-red-500 font-medium">{technologiesError}</p>}
+            </div>
+          </>
+        )}
         <motion.button type="submit" disabled={isLoading} whileHover={{ scale: isLoading ? 1 : 1.01 }} whileTap={{ scale: isLoading ? 1 : 0.99 }} className="w-full bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:opacity-95 text-white py-3.5 px-4 rounded-xl font-bold text-base focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all shadow-md shadow-blue-500/10 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed">
           {isLoading ? "Cadastrando..." : "Cadastrar"}
         </motion.button>

frontend/src/services/authService.ts

@@ -55,6 +55,7 @@ export interface RegisterData {
   cpf?: string;
   technologies?: string[];
   level?: string;
+  role?: "user" | "admin";
 }
 
 export async function login(credentials: LoginCredentials) {
@@ -86,6 +87,7 @@ export async function register(userData: RegisterData) {
       cpf: userData.cpf,
       technologies: userData.technologies,
       level: userData.level,
+      role: userData.role,
     }),
     credentials: "include",
   });