lfk
/
selfservice
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Register - basic form validations

This commit is contained in:
Philipp Dormann 2021-02-27 15:32:43 +01:00
parent 94f5787988
commit 2b303ac9b2
4 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -3,7 +3,5 @@
</template>
<script setup>
// import HelloWorld from "./components/HelloWorld.vue";
// import LoginForm from "./components/LoginForm.vue";
// import Footer from "./components/Footer.vue";
//
</script>

82
src/components/Register.vue
View File

@ -18,8 +18,10 @@
autocomplete="off"
:placeholder="[[$t('vorname')]]"
type="text"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
:class="{ 'border-red-500': (!userdetails.firstname.trim()), 'border-green-300': (userdetails.firstname.trim()) }"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
<!-- -->
<label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label>
<input
v-model="userdetails.middlename"
@ -28,8 +30,9 @@
autocomplete="off"
:placeholder="[[$t('mittelname')]]"
type="text"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
<!-- -->
<label for="last_name" class="block font-medium">
{{ $t('nachname') }}
<span class="font-bold">*</span>
@ -41,8 +44,10 @@
autocomplete="off"
:placeholder="[[$t('nachname')]]"
type="text"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
:class="{ 'border-red-500': (!userdetails.lastname.trim()), 'border-green-300': (userdetails.lastname.trim()) }"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
<!-- -->
<label for="email_address" class="block font-medium">
E-Mail Adresse
<span class="font-bold">*</span>
@ -54,10 +59,23 @@
autocomplete="off"
placeholder="E-Mail Adresse"
type="email"
:class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-gray-300': (isEmail(userdetails.mail)) }"
class="dark:bg-gray-800 mt-1 block w-full shadow-sm rounded-l-md sm:text-sm border bg-gray-50 text-gray-100 rounded-md p-2"
:class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }"
class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border bg-gray-50 text-gray-500 rounded-md p-2"
/>
<p class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
<p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
<!-- -->
<label for="phone" class="block font-medium">{{ $t('phone_number') }}</label>
<input
v-model="userdetails.phone"
name="phone"
id="phone"
autocomplete="off"
:placeholder="[[$t('phone_number')]]"
type="tel"
:class="{ 'border-red-500': (!phone_valid), 'border-green-300': (phone_valid) }"
class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border bg-gray-50 text-gray-500 rounded-md p-2"
/>
<!-- -->
<div class="grid grid-cols-6 mt-6">
<div class="col-span-6"></div>
<div class="flex items-start col-span-6">
@ -86,7 +104,7 @@
:placeholder="[[$t('strasse')]]"
id="street"
autocomplete="street-address"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
</div>
<div class="col-span-6 sm:col-span-6 lg:col-span-2">
@ -96,7 +114,7 @@
name="city"
:placeholder="[[$t('ort')]]"
id="city"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
</div>
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
@ -107,7 +125,7 @@
:placeholder="[[$t('plz')]]"
id="postal_code"
autocomplete="postal-code"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
</div>
</div>
@ -163,30 +181,38 @@ import { ref } from "vue";
import axios from "redaxios";
import Toastify from "toastify-js";
import isEmail from 'validator/es/lib/isEmail';
import isMobilePhone from 'validator/es/lib/isMobilePhone';
let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "" });
let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "" });
let phone_valid = ref(!userdetails.value.phone.trim() || isMobilePhone(userdetails.value.phone));
let provide_address = ref(false);
let agb_accepted = ref(false);
function login() {
userdetails = userdetails.value;
if (isEmail(userdetails.mail)) {
axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', {
"email": userdetails.mail,
"firstname": userdetails.firstname,
"middlename": userdetails.middlename,
"lastname": userdetails.lastname,
"address": {}
})
.then(function(response) {
response = response.data;
const token = response.token;
const userid = JSON.parse(atob(token.split(".")[1])).id;
console.log({ token });
console.log({ userid });
})
.catch(function(error) {
console.log(error);
});
if (userdetails.phone === "" || isMobilePhone(userdetails.phone)) {
if (isEmail(userdetails.mail)) {
let postdata = {
"email": userdetails.mail,
"firstname": userdetails.firstname,
"middlename": userdetails.middlename,
"lastname": userdetails.lastname,
"address": {}
}
if (isMobilePhone(userdetails.phone)) {
postdata.phone = userdetails.phone;
}
axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register',)
.then(function(response) {
response = response.data;
const token = response.token;
const userid = JSON.parse(atob(token.split(".")[1])).id;
console.log({ token });
console.log({ userid });
})
.catch(function(error) {
console.log(error);
});
}
}
// console.log(agb_accepted.value);
// alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted"));

1
src/locales/de.json
View File

@ -4,6 +4,7 @@
"mittelname": "Mittelname",
"nachname": "Nachname",
"ort": "Ort",
"phone_number": "Telefonnummer",
"please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
"plz": "PLZ",
"provide_address": "Adresse angeben?",

1
src/locales/en.json
View File

@ -4,6 +4,7 @@
"mittelname": "Middlename",
"nachname": "Lastname",
"ort": "City",
"phone_number": "Phone Number",
"please_provide_valid_mail": "Please provide a valid mail address.",
"plz": "zipcode",
"provide_address": "Provide a postal address?",