diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /app/assets/javascripts/profile/account/components | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/profile/account/components')
-rw-r--r-- | app/assets/javascripts/profile/account/components/delete_account_modal.vue | 95 | ||||
-rw-r--r-- | app/assets/javascripts/profile/account/components/update_username.vue | 1 |
2 files changed, 56 insertions, 40 deletions
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue index 605859cfb6a..f06dc72d365 100644 --- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue +++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue @@ -1,11 +1,12 @@ <script> -import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; +/* eslint-disable vue/no-v-html */ +import { GlModal } from '@gitlab/ui'; import { __, s__, sprintf } from '~/locale'; import csrf from '~/lib/utils/csrf'; export default { components: { - DeprecatedModal, + GlModal, }, props: { actionUrl: { @@ -54,21 +55,38 @@ You are about to permanently delete %{yourAccount}, and all of the issues, merge Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), { yourAccount: `<strong>${s__('Profiles|your account')}</strong>`, - deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`, + deleteAccount: `<strong>${s__('Profiles|Delete account')}</strong>`, }, false, ); }, - }, - methods: { + primaryProps() { + return { + text: s__('Delete account'), + attributes: [ + { variant: 'danger', 'data-qa-selector': 'confirm_delete_account_button' }, + { category: 'primary' }, + { disabled: !this.canSubmit }, + ], + }; + }, + cancelProps() { + return { + text: s__('Cancel'), + }; + }, canSubmit() { if (this.confirmWithPassword) { return this.enteredPassword !== ''; } - return this.enteredUsername === this.username; }, + }, + methods: { onSubmit() { + if (!this.canSubmit) { + return; + } this.$refs.form.submit(); }, }, @@ -76,42 +94,39 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), </script> <template> - <deprecated-modal - id="delete-account-modal" - :title="s__('Profiles|Delete your account?')" - :text="text" - :primary-button-label="s__('Profiles|Delete account')" - :submit-disabled="!canSubmit()" - kind="danger" - @submit="onSubmit" + <gl-modal + modal-id="delete-account-modal" + title="Profiles" + :action-primary="primaryProps" + :action-cancel="cancelProps" + :ok-disabled="!canSubmit" + @primary="onSubmit" > - <template #body="props"> - <p v-html="props.text"></p> + <p v-html="text"></p> - <form ref="form" :action="actionUrl" method="post"> - <input type="hidden" name="_method" value="delete" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> + <form ref="form" :action="actionUrl" method="post"> + <input type="hidden" name="_method" value="delete" /> + <input :value="csrfToken" type="hidden" name="authenticity_token" /> - <p id="input-label" v-html="inputLabel"></p> + <p id="input-label" v-html="inputLabel"></p> - <input - v-if="confirmWithPassword" - v-model="enteredPassword" - name="password" - class="form-control" - type="password" - data-qa-selector="password_confirmation_field" - aria-labelledby="input-label" - /> - <input - v-else - v-model="enteredUsername" - name="username" - class="form-control" - type="text" - aria-labelledby="input-label" - /> - </form> - </template> - </deprecated-modal> + <input + v-if="confirmWithPassword" + v-model="enteredPassword" + name="password" + class="form-control" + type="password" + data-qa-selector="password_confirmation_field" + aria-labelledby="input-label" + /> + <input + v-else + v-model="enteredUsername" + name="username" + class="form-control" + type="text" + aria-labelledby="input-label" + /> + </form> + </gl-modal> </template> diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index 58025381cb2..4aaa2cff2ac 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { escape } from 'lodash'; import axios from '~/lib/utils/axios_utils'; import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; |