|
| 1 | +<script> |
| 2 | +import { GlAlert, GlSprintf } from '@gitlab/ui'; |
| 3 | +
|
| 4 | +import { s__ } from '~/locale'; |
| 5 | +import ResetApplicationSettingsModal from './reset_application_settings_modal.vue'; |
| 6 | +
|
| 7 | +export const I18N_WEB_IDE_OAUTH_APPLICATION_CALLOUT = { |
| 8 | + alertTitle: s__( |
| 9 | + 'IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:', |
| 10 | + ), |
| 11 | + alertButtonText: s__('IDE|Restore to default'), |
| 12 | + configurations: [ |
| 13 | + s__( |
| 14 | + 'IDE|The redirect URI path is %{codeBlockStart}%{pathFormat}%{codeBlockEnd}. An example of a valid redirect URI is %{codeBlockStart}%{example}%{codeBlockEnd}.', |
| 15 | + ), |
| 16 | + s__('IDE|The %{boldStart}Trusted%{boldEnd} checkbox is selected.'), |
| 17 | + s__('IDE|The %{boldStart}Confidential%{boldEnd} checkbox is cleared.'), |
| 18 | + s__('IDE|The %{boldStart}api%{boldEnd} scope is selected.'), |
| 19 | + ], |
| 20 | +}; |
| 21 | +
|
| 22 | +export default { |
| 23 | + name: 'WebIdeOAuthApplicationCallout', |
| 24 | + components: { |
| 25 | + GlAlert, |
| 26 | + GlSprintf, |
| 27 | + ResetApplicationSettingsModal, |
| 28 | + }, |
| 29 | + props: { |
| 30 | + redirectUrlPath: { |
| 31 | + type: String, |
| 32 | + required: true, |
| 33 | + }, |
| 34 | + resetApplicationSettingsPath: { |
| 35 | + type: String, |
| 36 | + required: true, |
| 37 | + }, |
| 38 | + }, |
| 39 | + data() { |
| 40 | + return { |
| 41 | + isModalVisible: false, |
| 42 | + }; |
| 43 | + }, |
| 44 | + methods: { |
| 45 | + displayModal() { |
| 46 | + this.isModalVisible = true; |
| 47 | + }, |
| 48 | + hideModal() { |
| 49 | + this.isModalVisible = false; |
| 50 | + }, |
| 51 | + getRedirectUrl() { |
| 52 | + return new URL(this.redirectUrlPath, window.location.origin); |
| 53 | + }, |
| 54 | + }, |
| 55 | + i18n: I18N_WEB_IDE_OAUTH_APPLICATION_CALLOUT, |
| 56 | +}; |
| 57 | +</script> |
| 58 | +<template> |
| 59 | + <div> |
| 60 | + <reset-application-settings-modal |
| 61 | + :visible="isModalVisible" |
| 62 | + :reset-application-settings-path="resetApplicationSettingsPath" |
| 63 | + @cancel="hideModal" |
| 64 | + @close="hideModal" |
| 65 | + /> |
| 66 | + <gl-alert |
| 67 | + variant="info" |
| 68 | + class="gl-my-5" |
| 69 | + :dismissible="false" |
| 70 | + :primary-button-text="$options.i18n.alertButtonText" |
| 71 | + @primaryAction="displayModal" |
| 72 | + > |
| 73 | + <p>{{ $options.i18n.alertTitle }}</p> |
| 74 | + <ul class="gl-m-0"> |
| 75 | + <li v-for="(message, index) in $options.i18n.configurations" :key="index"> |
| 76 | + <gl-sprintf :message="message"> |
| 77 | + <template #bold="{ content }"> |
| 78 | + <strong>{{ content }}</strong> |
| 79 | + </template> |
| 80 | + <template #codeBlock="{ content }"> |
| 81 | + <code>{{ |
| 82 | + sprintf(content, { |
| 83 | + pathFormat: redirectUrlPath, |
| 84 | + example: `${getRedirectUrl()}`, |
| 85 | + }) |
| 86 | + }}</code> |
| 87 | + </template> |
| 88 | + </gl-sprintf> |
| 89 | + </li> |
| 90 | + </ul> |
| 91 | + </gl-alert> |
| 92 | + </div> |
| 93 | +</template> |
0 commit comments