| <template> |
| <div> |
| <h1 class="h4 mb-4">User Profile Editor</h1> |
| <b-alert v-if="user && !user.username_valid" show variant="danger"> |
| <p> |
| Unfortunately the username on your profile is invalid, which prevents |
| creating or updating your user profile. The administrators have been |
| notified and will be able to update your user account with a valid |
| username. An administrator will notify you once your username has been |
| updated to a valid value. |
| </p> |
| <p> |
| In the meantime, please complete as much of your profile as possible. |
| </p> |
| </b-alert> |
| <b-alert v-else-if="user && !user.complete" show> |
| >Please complete your user profile before continuing.</b-alert |
| > |
| <b-card> |
| <user-profile-editor |
| ref="userProfileEditor" |
| @save="onSave" |
| @resend-email-verification="handleResendEmailVerification" |
| /> |
| <!-- include extended-user-profile-editor if there are extendedUserProfileFields --> |
| <template |
| v-if="extendedUserProfileFields && extendedUserProfileFields.length > 0" |
| > |
| <hr /> |
| <extended-user-profile-editor ref="extendedUserProfileEditor" /> |
| </template> |
| |
| <b-button variant="primary" @click="onSave">Save</b-button> |
| </b-card> |
| <b-link |
| v-if="user && user.complete" |
| class="text-muted small" |
| href="/workspace/dashboard" |
| >Return to Dashboard</b-link |
| > |
| </div> |
| </template> |
| |
| <script> |
| import UserProfileEditor from "../components/UserProfileEditor.vue"; |
| import { notifications } from "django-airavata-common-ui"; |
| import { mapActions, mapGetters } from "vuex"; |
| import ExtendedUserProfileEditor from "../components/ExtendedUserProfileEditor.vue"; |
| |
| export default { |
| components: { UserProfileEditor, ExtendedUserProfileEditor }, |
| name: "user-profile-container", |
| async created() { |
| await this.loadCurrentUser(); |
| await this.loadExtendedUserProfileFields(); |
| await this.loadExtendedUserProfileValues(); |
| |
| const queryParams = new URLSearchParams(window.location.search); |
| if (queryParams.has("code")) { |
| await this.verifyEmailChange({ code: queryParams.get("code") }); |
| notifications.NotificationList.add( |
| new notifications.Notification({ |
| type: "SUCCESS", |
| message: "Email address verified and updated", |
| duration: 5, |
| }) |
| ); |
| // Update URL, removing the code from the query string |
| window.history.replaceState({}, "", "/auth/user-profile/"); |
| } |
| }, |
| data() { |
| return { |
| invalidForm: false, |
| }; |
| }, |
| computed: { |
| ...mapGetters("userProfile", ["user"]), |
| ...mapGetters("extendedUserProfile", ["extendedUserProfileFields"]), |
| }, |
| methods: { |
| ...mapActions("userProfile", [ |
| "loadCurrentUser", |
| "verifyEmailChange", |
| "updateUser", |
| "resendEmailVerification", |
| ]), |
| ...mapActions("extendedUserProfile", [ |
| "loadExtendedUserProfileFields", |
| "loadExtendedUserProfileValues", |
| "saveExtendedUserProfileValues", |
| ]), |
| async onSave() { |
| if ( |
| this.$refs.userProfileEditor.valid && |
| this.$refs.extendedUserProfileEditor.valid |
| ) { |
| await this.updateUser(); |
| await this.saveExtendedUserProfileValues(); |
| notifications.NotificationList.add( |
| new notifications.Notification({ |
| type: "SUCCESS", |
| message: "User profile saved", |
| duration: 5, |
| }) |
| ); |
| } else { |
| // TODO: make sure to highlight which fields are invalid |
| notifications.NotificationList.add( |
| new notifications.Notification({ |
| type: "WARNING", |
| message: "The form is invalid. Please fix and try again.", |
| duration: 5, |
| }) |
| ); |
| } |
| }, |
| async handleResendEmailVerification() { |
| await this.resendEmailVerification(); |
| notifications.NotificationList.add( |
| new notifications.Notification({ |
| type: "SUCCESS", |
| message: "Verification link sent", |
| duration: 5, |
| }) |
| ); |
| }, |
| }, |
| }; |
| </script> |
| |
| <style></style> |