dietpi/pocketbase-quasar-lista
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

registra y manda email

Browse Source
This commit is contained in:
clonbg
2023-02-28 11:39:28 +01:00
parent d8c0fec665
commit 585188cc14
2 changed files with 81 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/pages/RegisterPage.vue
View File

@@ -1,7 +1,5 @@
<template>
<div
class="bg-light-green window-height window-width row justify-center items-center"
>
<div class="bg-light-green window-height window-width row justify-center items-center">
<div class="column">
<div class="row">
<h5 class="text-h5 text-white q-my-md">Mis listas</h5>
@@ -10,86 +8,38 @@
<q-card square bordered class="q-pa-lg shadow-1">
<q-card-section>
<q-form class="q-gutter-md" @click.once="recibeDatos()">
<q-input
square
filled
clearable
v-model="username"
type="text"
label="username"
:rules="[
(val) =>
(val != null && val.length >= 3) || 'Mínimo 3 caracteres',
(val) => comprobarUsername || 'Ya existe en la BD',
]"
/>
<q-input
square
filled
clearable
v-model="nombre"
type="text"
label="nombre completo"
:rules="[
(val) =>
(val != null && val.length >= 3) || 'Mínimo 3 caracteres',
]"
/>
<q-input
square
filled
clearable
v-model="email"
type="email"
label="email"
:rules="[
(val) =>
(val != null && val.length >= 7) || 'Mínimo 7 caracteres',
(val) =>
comprobarEmail ||
'No es un email válido o ya existe en la BD',
]"
/>
<q-input
square
filled
clearable
v-model="password"
type="password"
label="password"
:rules="[
(val) =>
(val != null && val.trim().length >= 8) ||
'Mínimo 8 caracteres',
]"
/>
<q-input
square
filled
clearable
v-model="confirmpassword"
type="password"
label="repite password"
error-message="No coinciden"
:error="comprobarConfirmPassword"
/>
<q-input square filled clearable v-model="username" type="text" label="username" :rules="[
(val) =>
(val != null && val.length >= 3) || 'Mínimo 3 caracteres',
(val) => comprobarUsername || 'Ya existe en la BD',
]" />
<q-input square filled clearable v-model="nombre" type="text" label="nombre completo" :rules="[
(val) =>
(val != null && val.length >= 3) || 'Mínimo 3 caracteres',
]" />
<q-input square filled clearable v-model="email" type="email" label="email" :rules="[
(val) =>
(val != null && val.length >= 7) || 'Mínimo 7 caracteres',
(val) =>
comprobarEmail ||
'No es un email válido o ya existe en la BD',
]" />
<q-input square filled clearable v-model="password" type="password" label="password" :rules="[
(val) =>
(val != null && val.trim().length >= 8) ||
'Mínimo 8 caracteres',
]" />
<q-input square filled clearable v-model="confirmpassword" type="password" label="repite password"
error-message="No coinciden" :error="comprobarConfirmPassword" />
</q-form>
</q-card-section>
<q-card-actions class="q-px-md">
<q-btn
:disable="btnRegisterDisable()"
unelevated
color="light-green-7"
size="lg"
class="full-width"
label="Register"
/>
<q-btn :disable="btnRegisterDisable()" unelevated color="light-green-7" size="lg" class="full-width"
label="Register" @click="registrar()" />
</q-card-actions>
<q-card-section class="text-center q-pa-none">
<p class="text-grey-6">
<router-link to="/login"
>Are you registered? Go to Login</router-link
>
<router-link to="/login">Are you registered? Go to Login</router-link>
</p>
</q-card-section>
</q-card>
@@ -108,6 +58,7 @@ const username = ref(""); //No exista en la bd, tamaño mínimo
const confirmpassword = ref("");
const nombre = ref("");
const usuarios = ref([]);
const recibeDatos = () => {
listaStore.getUsers().then(function (item) {
usuarios.value = item;
@@ -156,12 +107,33 @@ const btnRegisterDisable = () => {
}
return false;
};
const registrar = () => {
const data = {
'username': username.value,
'email': email.value,
'emailVisibility': true,
'password': password.value,
'passwordConfirm': confirmpassword.value,
'name': nombre.value
}
/* const data = {
"username": "test_username",
"email": "test@example.com",
"emailVisibility": true,
"password": "12345678",
"passwordConfirm": "12345678",
"name": "test"
}; */
listaStore.register(data)
}
</script>
<style>
.q-card {
width: 360px;
}
a:link,
a:visited,
a:active {