Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 1x 1x 1x 1x 34x | <script>
import { GlForm, GlToggle, GlFormGroup, GlFormTextarea, GlButton, GlLoadingIcon } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale';
import { mapComputed } from '~/vuex_shared/bindings';
export default {
name: 'MaintenanceModeSettingsApp',
i18n: {
toggleLabel: __('Enable maintenance mode'),
toggleHelpText: __(
'Non-admin users are restricted to read-only access, in both GitLab UI and API.',
),
bannerMessagePlaceholder: __('GitLab is undergoing maintenance'),
buttonText: __('Save changes'),
bannerLabel: __('Banner message'),
},
components: {
GlForm,
GlToggle,
GlFormGroup,
GlFormTextarea,
GlButton,
GlLoadingIcon,
},
computed: {
...mapState(['loading']),
...mapComputed([
{ key: 'maintenanceEnabled', updateFn: 'setMaintenanceEnabled' },
{ key: 'bannerMessage', updateFn: 'setBannerMessage' },
]),
},
methods: {
...mapActions(['updateMaintenanceModeSettings']),
},
};
</script>
<template>
<section>
<gl-loading-icon v-if="loading" size="xl" />
<gl-form v-else @submit.prevent="updateMaintenanceModeSettings">
<div class="gl-display-flex gl-align-items-center gl-mb-4">
<gl-toggle
v-model="maintenanceEnabled"
:label="$options.i18n.toggleLabel"
label-position="hidden"
/>
<div class="gl-ml-3">
<p class="gl-mb-0">{{ $options.i18n.toggleLabel }}</p>
<p class="gl-mb-0 gl-text-gray-500">
{{ $options.i18n.toggleHelpText }}
</p>
</div>
</div>
<gl-form-group :label="$options.i18n.bannerLabel" label-for="maintenanceBannerMessage">
<gl-form-textarea
id="maintenanceBannerMessage"
v-model="bannerMessage"
:placeholder="$options.i18n.bannerMessagePlaceholder"
/>
</gl-form-group>
<gl-button variant="confirm" type="submit">{{ $options.i18n.buttonText }}</gl-button>
</gl-form>
</section>
</template>
|