add funcionalidade de upload foto usuario no cadastro

BookHive-ufcg · Dec 10, 2024 · c7714ce · c7714ce
1 parent a874685
commit c7714ce
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 1 deletion.
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -5,12 +5,14 @@ import styles from "./signup.module.css";
 import Button from "@/components/Button";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import Image from "next/image";  // Importando o componente Image
 
 const url = String(process.env.NEXT_PUBLIC_BACK_END_URL);
 
 export default function Signup() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [image, setImage] = useState<string | null>(null);  // Adiciona o estado para a imagem
   const router = useRouter();
 
   if (
@@ -21,6 +23,18 @@ export default function Signup() {
     return null;
   }
 
+  // Função para lidar com o upload da imagem
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]; // Verifica se um arquivo foi selecionado
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result as string);  // Armazena a URL da imagem no estado
+      };
+      reader.readAsDataURL(file);  // Lê o arquivo como Data URL
+    }
+  };
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setLoading(true);
@@ -83,7 +97,7 @@ export default function Signup() {
             type="date"
             id="dateOfBirth"
             name="dateOfBirth"
-            placeholder="Data de nasscimento"
+            placeholder="Data de nascimento"
             label="Data de nascimento"
             required
           />
@@ -103,6 +117,32 @@ export default function Signup() {
             label="Senha"
             required
           />
+
+
+          <div className={styles.profilephoto}>
+            {image ? (
+              <Image 
+                src={image} 
+                alt="Profile" 
+                width={100} 
+                height={100} 
+                className={styles.profileimage} 
+              />
+            ) : (
+              <div className={styles.placeholder}>Upload Photo</div>
+            )}
+            <label htmlFor="profilephoto" className={styles.photolabel}>
+              <Input
+                type="file"
+                id="profilephoto"
+                name="profilephoto"
+                className={styles.fileinput}
+                label=""
+                onChange={handleFileChange}  
+              />
+            </label>
+          </div>
+
           <Button type="submit" className={styles.button}>
             {loading ? "Loading" : "Junte-se a nós"}
           </Button>

diff --git a/src/app/signup/signup.module.css b/src/app/signup/signup.module.css
@@ -1,3 +1,48 @@
+.profilephoto {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background-color: #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  top: -350px;
+  left: 250px;
+
+}
+
+.fileinput {
+  display: none;
+}
+
+.placeholder {
+  font-size: 14px;
+  color: #555;
+  text-align: center;
+}
+
+.photolabel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.profilephoto img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+
 .signup {
   width: 100%;
   padding: 4rem;
@@ -55,3 +100,4 @@
     height: 3.5rem; /* Ajusta altura */
   }
 }
+