diff --git a/src/components/RegisterUserForm.vue b/src/components/RegisterUserForm.vue
index 16119c14882b8f0be5040367ccfe21701afd32ed..c48bb7a358c2d676d0349aba9779c600dc0df4f9 100644
--- a/src/components/RegisterUserForm.vue
+++ b/src/components/RegisterUserForm.vue
@@ -1,7 +1,7 @@
<!--
-
- 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>