Skip to content

Commit

Permalink
keep data
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arejula11
Arejula11 committed Apr 3, 2024
1 parent b90e178 commit ef747e4
Showing 1 changed file with 45 additions and 29 deletions.
74 changes: 45 additions & 29 deletions playbeat/src/pages/register.astro
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
---
import NormalLayout from '../layouts/NormalLayout.astro'
const errors = { username: "", email: "", password: "" };
const values = { username: "", email: "", password: "", password2:"" };
async function registerUser(data: { name: FormDataEntryValue | null; email: FormDataEntryValue | null; password: FormDataEntryValue | null; }) {
try {
console.log(data);
const response = await fetch('/api/register', {
const response = await fetch('', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
Expand All @@ -25,39 +23,50 @@ async function registerUser(data: { name: FormDataEntryValue | null; email: Form
if (Astro.request.method === "post") {
if (Astro.request.method === "POST") {
try {
console.log("entra");
const data = await Astro.request.formData();
const name = data.get("username");
values.username = name as string;
const email = data.get("email");
values.email = email as string;
const password = data.get("password");
values.password = password as string;
const secondPassword = data.get("second-password");
values.password2 = secondPassword as string;
if (typeof name !== "string" || name.length < 1) {
errors.username += "Please enter a username. ";
console.log(errors.username);
errors.username += "Introduzca un nombre de usuario. ";
}
if (typeof email !== "string" || email.length < 1) {
errors.email += "Email no valido.";
}
if(email && !String(email).includes("@")){
errors.email += "Email no valido.";
}
if (typeof email !== "string") {
errors.email += "Email is not valid. ";
console.log(errors.email);
if(email && !String(email).includes(".")){
errors.email += "Email no valido.";
}
if (typeof password !== "string" || password.length < 6) {
errors.password += "Password must be at least 6 characters. ";
console.log(errors.password);
errors.password += "La contraseña debe tener seis caracteres o más.";
}
else if (password !== secondPassword) {
errors.password += "Passwords do not match. ";
console.log(errors.password);
errors.password += "Las contraseñas no coinciden.";
}
// Do something with the data
const hasErrors = Object.values(errors).some(msg => msg)
if (!hasErrors) {
await registerUser({name, email, password});
console.log("Usuario registrado");
return Astro.redirect("/");
}
} catch (error) {
if (error instanceof Error) {
console.error(error.message);
}
}
}
Expand All @@ -71,27 +80,34 @@ if (Astro.request.method === "post") {
<h1 class=" font-bold text-6xl text-[#6985C0]">PlayBeat</h1>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-background -rotate-45 " width="60" height="60" viewBox="0 0 24 24" stroke-width="2" stroke="#6985C0" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l4 -4" /><path d="M14 4l-10 10" /><path d="M4 20l16 -16" /><path d="M20 10l-10 10" /><path d="M20 16l-4 4" /></svg>
<div class="flex flex-col gap-3">
<form method="post" class="flex flex-col mt-2 mx-10 w-96 text-white" >
<form method="POST" class="flex flex-col mt-2 mx-10 w-96 text-white" novalidate >
<label class="mt-3">Nombre usuario:</label>
<input type="text" class="border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Introduce tu nombre de usuario" name="username" required />
{errors.username && <p>{errors.username}</p>}
<input type="text" class="border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Introduce tu nombre de usuario" name="username" required value={values.username}/>


<label class="mt-3">Correo electrónico:</label>
<input type="email" class=" border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Introduce tu correo electrónico" name="email" required/>
{errors.email && <p>{errors.email}</p>}
<input type="email" class=" border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Introduce tu correo electrónico" name="email" required value={values.email}/>


<label class="mt-4">Contraseña:</label>
<input type="password" class=" border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Introduce tu contraseña" name="password" required minlength="6"/>
<input type="password" class=" border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Introduce tu contraseña" name="password" required minlength="6" value={values.password}/>

<label class="mt-4">Repite tu contraseña:</label>
<input type="password" class=" border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Repite tu contraseña" name="second-password" required minlength="6"/>
{errors.password && <p>{errors.password}</p>}

<button type="submit" class="bg-[#6985C0] p-2 rounded-md mt-8 font-semibold">REGISTRATE</button>
<input type="password" class=" border-2 border-white bg-transparent h-10 rounded-md p-2 outline-none" placeholder="Repite tu contraseña" name="second-password" required minlength="6" value={values.password2}/>
{
(errors.password || errors.email || errors.username )
&&
<div class=" bg-[#ee4a4a] bg-opacity-85 border-[#ff2626] border-3 p-3 mt-4 rounded-md">
<p class="text-white font-semibold">Corrige los siguientes errores:</p>
<p class="text-white ">{errors.username}</p>
<p class="text-white ">{errors.email}</p>
<p class="text-white ">{errors.password}</p>
</div>
}

<input type="submit" class="bg-[#6985C0] p-2 rounded-md mt-8 font-semibold" value="REGISTRATE" />
</form>
<script>

</script>

</div>
</div>

Expand Down

0 comments on commit ef747e4

Please sign in to comment.