Skip to content
Snippets Groups Projects
Commit ae4e482f authored by Lene Wasskog's avatar Lene Wasskog
Browse files

feat: Use floating labels and style error messages in user registration form

parent 65b4c291
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/RegisterUserForm.vue
+ 132
− 141
View file @ ae4e482f
<!--
Copyright (c) 2023 NIBIO <http://www.nibio.no/>.
Copyright (c) 2023 NIBIO <http://www.nibio.no/>.
This file is part of VIPSObservationApp.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
......@@ -15,168 +15,159 @@
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
Author: Tor-Einar Skog <tor-einar.skog@nibio.no>
Created : 2023-04-18
-->
<template>
<div >
<div>
<form @submit="checkForm" v-if="step==1">
<h2>{{ $t("registeruser.button.label") }}</h2>
<p>{{ $t("registeruserform.description") }}</p>
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<div class="form-group">
<label for="firstName">{{ $t("registeruserform.firstName") }}</label>
<input type="text" class="form-control" v-model.trim.lazy="firstName" />
</div>
<div class="form-group">
<label for="lastName">{{ $t("registeruserform.lastName") }}</label>
<input type="text" class="form-control" v-model.trim.lazy="lastName" />
</div>
<div class="form-group">
<label for="email">{{ $t("registeruserform.email") }}</label>
<input type="email" class="form-control" v-model.trim.lazy="email" aria-describedby="emailHelp"/>
<small id="emailHelp" class="form-text text-muted">{{ $t("registeruserform.email.help") }}</small>
</div>
<div class="form-group">
<label for="username">{{ $t("registeruserform.username") }}</label>
<input type="text" class="form-control" v-model.trim.lazy="username" aria-describedby="usernameHelp"/>
<small id="usernameHelp" class="form-text text-muted">{{ $t("registeruserform.username.help") }}</small>
</div>
<div class="form-group">
<label for="password">{{ $t("registeruserform.password") }}</label>
<input type="password" class="form-control" v-model.trim="password" aria-describedby="passwordHelp"/>
<small id="passwordHelp" class="form-text text-muted">{{ $t("registeruserform.password.help") }}</small>
</div>
<div class="form-group">
<label for="password2">{{ $t("registeruserform.password2") }}</label>
<input type="password" id="password2" class="form-control" v-model="password2" aria-describedby="password2Help"/>
<small id="password2Help" class="form-text text-muted">{{ $t("registeruserform.password2.help") }}</small>
</div>
<button type="submit" class="btn btn-primary">{{ $t("registeruserform.submit.label") }}</button>
</form>
<h2>{{ $t("registeruser.button.label") }}</h2>
<p>{{ $t("registeruserform.description") }}</p>
<div class="alert alert-danger" v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" v-model.trim.lazy="firstName"/>
<label for="firstName">{{ $t("registeruserform.firstName") }}</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" v-model.trim.lazy="lastName"/>
<label for="lastName">{{ $t("registeruserform.lastName") }}</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" v-model.trim.lazy="email" aria-describedby="emailHelp"/>
<label for="email">{{ $t("registeruserform.email") }}</label>
<small id="emailHelp" class="form-text text-muted">{{ $t("registeruserform.email.help") }}</small>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" v-model.trim.lazy="username" aria-describedby="usernameHelp"/>
<label for="username">{{ $t("registeruserform.username") }}</label>
<small id="usernameHelp" class="form-text text-muted">{{ $t("registeruserform.username.help") }}</small>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" v-model.trim="password" aria-describedby="passwordHelp"/>
<label for="password">{{ $t("registeruserform.password") }}</label>
<small id="passwordHelp" class="form-text text-muted">{{ $t("registeruserform.password.help") }}</small>
</div>
<div class="form-floating mb-3">
<input type="password" id="password2" class="form-control" v-model="password2"
aria-describedby="password2Help"/>
<label for="password2">{{ $t("registeruserform.password2") }}</label>
<small id="password2Help" class="form-text text-muted">{{ $t("registeruserform.password2.help") }}</small>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t("registeruserform.submit.label") }}</button>
</form>
<div v-if="step==2">
<h2>{{ $t("registeruser.button.label") }}</h2>
<p>{{ $t("registeruserform.step_2.heading") }}</p>
<p>{{ $t("registeruserform.step_2.description") }}</p>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" v-model="emailIsConfirmed" id="emailIsConfirmed">
<label class="form-check-label" for="emailIsConfirmed">{{ $t("registeruserform.step_2.emailConfirmationDeclaration") }}</label>
<label class="form-check-label"
for="emailIsConfirmed">{{ $t("registeruserform.step_2.emailConfirmationDeclaration") }}</label>
</div>
<button type="submit" :disabled="!emailIsConfirmed" class="btn btn-primary" @click="autoLogin();">{{ $t("login.button.label") }}</button>
<button type="submit" :disabled="!emailIsConfirmed" class="btn btn-primary" @click="autoLogin();">
{{ $t("login.button.label") }}
</button>
</div>
</div>
</template>
<script>
import CommonUtil from '@/components/CommonUtil';
import CommonUtil from '@/components/CommonUtil';
export default {
name: 'RegisterUserForm',
data() {
return {
username: "",
password: "",
password2: "",
email: "",
firstName: "",
lastName: "",
preferredLocale: "nb",
phoneCountryCode: "47",
organizationId: 1,
errors: [],
step: 1,
emailIsConfirmed: false
};
export default {
name: 'RegisterUserForm',
data() {
return {
username: "",
password: "",
password2: "",
email: "",
firstName: "",
lastName: "",
preferredLocale: "nb",
phoneCountryCode: "47",
organizationId: 1,
errors: [],
step: 1,
emailIsConfirmed: false
};
},
methods: {
checkForm: function (e) {
e.preventDefault();
this.errors = [];
if (this.firstName == "") {
this.errors.push("First name must be set");
}
if (this.lastName == "") {
this.errors.push("Last name must be set");
}
if (this.email == "") {
this.errors.push("Email must be set");
}
if (this.username == "") {
this.errors.push("Username must be set");
}
if (this.password == "") {
this.errors.push("Password must be set");
}
if (this.password != this.password2) {
this.errors.push("The passwords do not match")
}
// Form OK. Submit
if (this.errors.length == 0) {
this.submitForm();
}
},
methods: {
checkForm: function(e) {
e.preventDefault();
this.errors=[];
if(this.firstName == "")
{
this.errors.push("First name must be set");
}
if(this.lastName == "")
{
this.errors.push("Last name must be set");
}
if(this.email == "")
{
this.errors.push("Email must be set");
}
if(this.username == "")
{
this.errors.push("Username must be set");
}
if(this.password == "")
{
this.errors.push("Password must be set");
}
if(this.password != this.password2)
submitForm: async function () {
const response = await fetch(
CommonUtil.CONST_URL_DOMAIN + CommonUtil.CONST_URL_REGISTER_NEW_USER,
{
this.errors.push("The passwords do not match")
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(
{
"firstName": this.firstName,
"lastName": this.lastName,
"email": this.email,
"username": this.username,
"password": this.password,
"organizationId": this.organizationId,
"preferredLocale": this.preferredLocale,
"phoneCountryCode": this.phoneCountryCode
}
)
}
);
// Form OK. Submit
if(this.errors.length == 0)
{
this.submitForm();
}
},
submitForm: async function(){
const response = await fetch(
CommonUtil.CONST_URL_DOMAIN + CommonUtil.CONST_URL_REGISTER_NEW_USER,
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(
{
"firstName": this.firstName,
"lastName": this.lastName,
"email": this.email,
"username": this.username,
"password": this.password,
"organizationId": this.organizationId,
"preferredLocale": this.preferredLocale,
"phoneCountryCode": this.phoneCountryCode
}
)
}
);
const data = await response.json();
const data = await response.json();
if(response.status != 200)
{
if(data["errorMessages"] != null)
{
this.errors = data["errorMessages"];
}
else
{
alert("Something went wrong. Status code = " + response.status + ". Please contact your system administrator");
}
return false;
if (response.status != 200) {
if (data["errorMessages"] != null) {
this.errors = data["errorMessages"];
} else {
alert("Something went wrong. Status code = " + response.status + ". Please contact your system administrator");
}
// Show message about confirming email
// Show button for auto login
this.step = 2;
},
autoLogin: function() {
this.$root.$emit("autoLogin", {"username":this.username, "password":this.password});
return false;
}
// Show message about confirming email
// Show button for auto login
this.step = 2;
},
autoLogin: function () {
this.$root.$emit("autoLogin", {"username": this.username, "password": this.password});
}
}
</script>
\ No newline at end of file
}
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment