This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch AIRAVATA-3319-handle-missing-name-and-email-attributes-from-cilo in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 125fd07daf33219ac37daec086089aa54e3e9901 Author: Marcus Christie <[email protected]> AuthorDate: Tue Jun 8 17:06:16 2021 -0400 AIRAVATA-3455 user profile editor form validation --- django_airavata/apps/auth/package.json | 3 +- .../js/components/UserProfileEditor.vue | 51 +++++++++++++++++++--- django_airavata/apps/auth/yarn.lock | 5 +++ .../static/common/js/errors/vuelidateHelpers.js | 4 ++ django_airavata/static/common/js/index.js | 4 +- 5 files changed, 60 insertions(+), 7 deletions(-) diff --git a/django_airavata/apps/auth/package.json b/django_airavata/apps/auth/package.json index 35f28ac..ad7b2fe 100644 --- a/django_airavata/apps/auth/package.json +++ b/django_airavata/apps/auth/package.json @@ -15,7 +15,8 @@ "bootstrap-vue": "2.0.0-rc.26", "django-airavata-api": "link:../api/", "django-airavata-common-ui": "link:../../static/common/", - "vue": "^2.5.21" + "vue": "^2.5.21", + "vuelidate": "^0.7.6" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.1.1", diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue index 55eca90..506114c 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue @@ -4,13 +4,28 @@ <b-form-input disabled :value="user.username" /> </b-form-group> <b-form-group label="First Name"> - <b-form-input v-model="user.first_name" @keydown.native.enter="save" /> + <b-form-input + v-model="$v.user.first_name.$model" + @keydown.native.enter="save" + :state="validateState($v.user.first_name)" + /> </b-form-group> <b-form-group label="Last Name"> - <b-form-input v-model="user.last_name" @keydown.native.enter="save" /> + <b-form-input + v-model="$v.user.last_name.$model" + @keydown.native.enter="save" + :state="validateState($v.user.last_name)" + /> </b-form-group> <b-form-group label="Email"> - <b-form-input v-model="user.email" @keydown.native.enter="save" /> + <b-form-input + v-model="$v.user.email.$model" + @keydown.native.enter="save" + :state="validateState($v.user.email)" + /> + <b-form-invalid-feedback v-if="!$v.user.email.email"> + {{ user.email }} is not a valid email address. + </b-form-invalid-feedback> <b-alert class="mt-1" show v-if="user.pending_email_change" >Once you verify your email address at <strong>{{ user.pending_email_change.email_address }}</strong @@ -21,14 +36,21 @@ ></b-alert > </b-form-group> - <b-button variant="primary" @click="save">Save</b-button> + <b-button variant="primary" @click="save" :disabled="$v.$invalid" + >Save</b-button + > </b-card> </template> <script> import { models } from "django-airavata-api"; +import { errors } from "django-airavata-common-ui"; +import { validationMixin } from "vuelidate"; +import { email, required } from "vuelidate/lib/validators"; + export default { name: "user-profile-editor", + mixins: [validationMixin], props: { value: { type: models.User, @@ -40,13 +62,32 @@ export default { user: this.cloneValue(), }; }, + validations() { + return { + user: { + first_name: { + required, + }, + last_name: { + required, + }, + email: { + required, + email, + }, + }, + }; + }, methods: { cloneValue() { return JSON.parse(JSON.stringify(this.value)); }, save() { - this.$emit("save", this.user); + if (!this.$v.$invalid) { + this.$emit("save", this.user); + } }, + validateState: errors.vuelidateHelpers.validateState, }, watch: { value() { diff --git a/django_airavata/apps/auth/yarn.lock b/django_airavata/apps/auth/yarn.lock index 8631cdf..f24af85 100644 --- a/django_airavata/apps/auth/yarn.lock +++ b/django_airavata/apps/auth/yarn.lock @@ -8361,6 +8361,11 @@ vue@^2.5.21, vue@^2.5.22: resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"; integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg== +vuelidate@^0.7.6: + version "0.7.6" + resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.6.tgz#84100c13b943470660d0416642845cd2a1edf4b2"; + integrity sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g== + watchpack-chokidar2@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"; diff --git a/django_airavata/static/common/js/errors/vuelidateHelpers.js b/django_airavata/static/common/js/errors/vuelidateHelpers.js new file mode 100644 index 0000000..3f43183 --- /dev/null +++ b/django_airavata/static/common/js/errors/vuelidateHelpers.js @@ -0,0 +1,4 @@ +export function validateState(validation) { + const { $dirty, $error } = validation; + return $dirty ? !$error : null; +} diff --git a/django_airavata/static/common/js/index.js b/django_airavata/static/common/js/index.js index 0e69a1b..ac905a9 100644 --- a/django_airavata/static/common/js/index.js +++ b/django_airavata/static/common/js/index.js @@ -26,6 +26,7 @@ import ValidatedFormGroup from "./components/ValidatedFormGroup"; import GlobalErrorHandler from "./errors/GlobalErrorHandler"; import ValidationErrors from "./errors/ValidationErrors"; +import * as vuelidateHelpers from "./errors/vuelidateHelpers.js"; import ListLayout from "./layouts/ListLayout.vue"; @@ -63,12 +64,13 @@ const components = { UnsavedChangesGuard, Uppy, ValidatedForm, - ValidatedFormGroup + ValidatedFormGroup, }; const errors = { GlobalErrorHandler, ValidationErrors, + vuelidateHelpers, }; const layouts = {
