-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14109 from jmchilton/user_preferences_decompose
Decompose UserPreferences for reuse.
- Loading branch information
Showing
4 changed files
with
165 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { mount } from "@vue/test-utils"; | ||
| import { getLocalVue } from "jest/helpers"; | ||
| import UserDeletion from "./UserDeletion"; | ||
|
|
||
| const localVue = getLocalVue(true); | ||
|
|
||
| const TEST_USER_ID = "myTestUserId"; | ||
| const TEST_EMAIL = `${TEST_USER_ID}@test.com`; | ||
| const TEST_ROOT = "/"; | ||
|
|
||
| function mountComponent() { | ||
| const wrapper = mount(UserDeletion, { | ||
| propsData: { userId: TEST_USER_ID, root: TEST_ROOT, email: TEST_EMAIL }, | ||
| localVue, | ||
| }); | ||
| return wrapper; | ||
| } | ||
|
|
||
| import { ROOT_COMPONENT } from "utils/navigation"; | ||
|
|
||
| describe("UserDeletion.vue", () => { | ||
| it("contains a localized link", async () => { | ||
| const wrapper = mountComponent(); | ||
| const el = await wrapper.find(ROOT_COMPONENT.preferences.delete_account.selector); | ||
| expect(el.text()).toBeLocalizationOf("Delete Account"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| <template> | ||
| <b-row class="ml-3 mb-1"> | ||
| <i class="pref-icon pt-1 fa fa-lg fa-radiation" /> | ||
| <div class="pref-content pr-1"> | ||
| <a id="delete-account" href="javascript:void(0)" | ||
| ><b v-b-modal.modal-prevent-closing v-localize>Delete Account</b></a | ||
| > | ||
| <div v-localize class="form-text text-muted">Delete your account on this Galaxy server.</div> | ||
| <b-modal | ||
| id="modal-prevent-closing" | ||
| ref="modal" | ||
| centered | ||
| title="Account Deletion" | ||
| title-tag="h2" | ||
| @show="resetModal" | ||
| @hidden="resetModal" | ||
| @ok="handleOk"> | ||
| <p> | ||
| <b-alert variant="danger" :show="showDeleteError">{{ deleteError }}</b-alert> | ||
| <b> | ||
| This action cannot be undone. Your account will be permanently deleted, along with the data | ||
| contained in it. | ||
| </b> | ||
| </p> | ||
| <b-form ref="form" @submit.prevent="handleSubmit"> | ||
| <b-form-group | ||
| :state="nameState" | ||
| label="Enter your user email for this account as confirmation." | ||
| label-for="Email" | ||
| invalid-feedback="Incorrect email"> | ||
| <b-form-input id="name-input" v-model="name" :state="nameState" required></b-form-input> | ||
| </b-form-group> | ||
| </b-form> | ||
| </b-modal> | ||
| </div> | ||
| </b-row> | ||
| </template> | ||
|
|
||
| <script> | ||
| import axios from "axios"; | ||
| import Vue from "vue"; | ||
| import BootstrapVue from "bootstrap-vue"; | ||
| import { userLogoutClient } from "layout/menu"; | ||
| Vue.use(BootstrapVue); | ||
| export default { | ||
| props: { | ||
| root: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| userId: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| email: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| }, | ||
| data() { | ||
| return { | ||
| name: "", | ||
| nameState: null, | ||
| deleteError: "", | ||
| }; | ||
| }, | ||
| computed: { | ||
| showDeleteError() { | ||
| return this.deleteError !== ""; | ||
| }, | ||
| }, | ||
| methods: { | ||
| checkFormValidity() { | ||
| const valid = this.$refs.form.checkValidity(); | ||
| this.nameState = valid; | ||
| return valid; | ||
| }, | ||
| resetModal() { | ||
| this.name = ""; | ||
| this.nameState = null; | ||
| }, | ||
| handleOk(bvModalEvt) { | ||
| // Prevent modal from closing | ||
| bvModalEvt.preventDefault(); | ||
| // Trigger submit handler | ||
| this.handleSubmit(); | ||
| }, | ||
| async handleSubmit() { | ||
| if (!this.checkFormValidity()) { | ||
| return false; | ||
| } | ||
| if (this.email === this.name) { | ||
| this.nameState = true; | ||
| try { | ||
| await axios.delete(`${this.root}api/users/${this.userId}`); | ||
| } catch (e) { | ||
| if (e.response.status === 403) { | ||
| this.deleteError = | ||
| "User deletion must be configured on this instance in order to allow user self-deletion. Please contact an administrator for assistance."; | ||
| return false; | ||
| } | ||
| } | ||
| userLogoutClient(); | ||
| } else { | ||
| this.nameState = false; | ||
| return false; | ||
| } | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| @import "user-styles.scss"; | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .pref-content { | ||
| width: calc(100% - 3rem); | ||
| } | ||
| .pref-icon { | ||
| width: 3rem; | ||
| } |