diff options
Diffstat (limited to 'app/assets/javascripts/profile/account')
-rw-r--r-- | app/assets/javascripts/profile/account/components/delete_account_modal.vue | 61 | ||||
-rw-r--r-- | app/assets/javascripts/profile/account/components/update_username.vue | 11 |
2 files changed, 35 insertions, 37 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 2336cb18cb5..17cbcabeedb 100644 --- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue +++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue @@ -1,12 +1,12 @@ <script> -/* eslint-disable vue/no-v-html */ -import { GlModal } from '@gitlab/ui'; +import { GlModal, GlSprintf } from '@gitlab/ui'; import csrf from '~/lib/utils/csrf'; -import { __, s__, sprintf } from '~/locale'; +import { __, s__ } from '~/locale'; export default { components: { GlModal, + GlSprintf, }, props: { actionUrl: { @@ -32,33 +32,8 @@ export default { csrfToken() { return csrf.token; }, - inputLabel() { - let confirmationValue; - if (this.confirmWithPassword) { - confirmationValue = __('password'); - } else { - confirmationValue = __('username'); - } - - confirmationValue = `<code>${confirmationValue}</code>`; - - return sprintf( - s__('Profiles|Type your %{confirmationValue} to confirm:'), - { confirmationValue }, - false, - ); - }, - text() { - return sprintf( - s__(`Profiles| -You are about to permanently delete %{yourAccount}, and all of the issues, merge requests, and groups linked to your account. -Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), - { - yourAccount: `<strong>${s__('Profiles|your account')}</strong>`, - deleteAccount: `<strong>${s__('Profiles|Delete account')}</strong>`, - }, - false, - ); + confirmationValue() { + return this.confirmWithPassword ? __('password') : __('username'); }, primaryProps() { return { @@ -90,6 +65,12 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), this.$refs.form.submit(); }, }, + i18n: { + text: s__(`Profiles| +You are about to permanently delete %{yourAccount}, and all of the issues, merge requests, and groups linked to your account. +Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), + inputLabel: s__('Profiles|Type your %{confirmationValue} to confirm:'), + }, }; </script> @@ -102,13 +83,29 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), :ok-disabled="!canSubmit" @primary="onSubmit" > - <p v-html="text"></p> + <p> + <gl-sprintf :message="$options.i18n.text"> + <template #yourAccount> + <strong>{{ s__('Profiles|your account') }}</strong> + </template> + + <template #deleteAccount> + <strong>{{ s__('Profiles|Delete account') }}</strong> + </template> + </gl-sprintf> + </p> <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"> + <gl-sprintf :message="$options.i18n.inputLabel"> + <template #confirmationValue> + <code>{{ confirmationValue }}</code> + </template> + </gl-sprintf> + </p> <input v-if="confirmWithPassword" diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index f18c4d8f03e..7917a9a75e0 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -1,7 +1,7 @@ <script> import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import { escape } from 'lodash'; -import { deprecatedCreateFlash as Flash } from '~/flash'; +import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { s__, sprintf } from '~/locale'; @@ -85,15 +85,16 @@ Please update your Git repository remotes as soon as possible.`), return axios .put(this.actionUrl, putData) .then((result) => { - Flash(result.data.message, 'notice'); + createFlash({ message: result.data.message, type: 'notice' }); this.username = username; this.isRequestPending = false; }) .catch((error) => { - Flash( - error?.response?.data?.message || + createFlash({ + message: + error?.response?.data?.message || s__('Profiles|An error occurred while updating your username, please try again.'), - ); + }); this.isRequestPending = false; throw error; }); |