diff options
Diffstat (limited to 'app/assets/javascripts/admin/users')
4 files changed, 56 insertions, 32 deletions
diff --git a/app/assets/javascripts/admin/users/components/user_date.vue b/app/assets/javascripts/admin/users/components/user_date.vue deleted file mode 100644 index 38dddbf72c2..00000000000 --- a/app/assets/javascripts/admin/users/components/user_date.vue +++ /dev/null @@ -1,29 +0,0 @@ -<script> -import { formatDate } from '~/lib/utils/datetime_utility'; -import { __ } from '~/locale'; -import { SHORT_DATE_FORMAT } from '../constants'; - -export default { - props: { - date: { - type: String, - required: false, - default: null, - }, - }, - computed: { - formattedDate() { - const { date } = this; - if (date === null) { - return __('Never'); - } - return formatDate(new Date(date), SHORT_DATE_FORMAT); - }, - }, -}; -</script> -<template> - <span> - {{ formattedDate }} - </span> -</template> diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue index 8962068601c..8b41a063abc 100644 --- a/app/assets/javascripts/admin/users/components/users_table.vue +++ b/app/assets/javascripts/admin/users/components/users_table.vue @@ -1,9 +1,9 @@ <script> import { GlTable } from '@gitlab/ui'; import { __ } from '~/locale'; +import UserDate from '~/vue_shared/components/user_date.vue'; import UserActions from './user_actions.vue'; import UserAvatar from './user_avatar.vue'; -import UserDate from './user_date.vue'; const DEFAULT_TH_CLASSES = 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!'; diff --git a/app/assets/javascripts/admin/users/constants.js b/app/assets/javascripts/admin/users/constants.js index 8ea1bd3ca7a..c55edefe607 100644 --- a/app/assets/javascripts/admin/users/constants.js +++ b/app/assets/javascripts/admin/users/constants.js @@ -2,8 +2,6 @@ import { s__, __ } from '~/locale'; export const USER_AVATAR_SIZE = 32; -export const SHORT_DATE_FORMAT = 'd mmm, yyyy'; - export const LENGTH_OF_USER_NOTE_TOOLTIP = 100; export const I18N_USER_ACTIONS = { diff --git a/app/assets/javascripts/admin/users/new.js b/app/assets/javascripts/admin/users/new.js new file mode 100644 index 00000000000..33565bfc14f --- /dev/null +++ b/app/assets/javascripts/admin/users/new.js @@ -0,0 +1,55 @@ +const DATA_ATTR_REGEX_PATTERN = 'data-user-internal-regex-pattern'; +const DATA_ATTR_REGEX_OPTIONS = 'data-user-internal-regex-options'; +export const ID_USER_EXTERNAL = 'user_external'; +export const ID_WARNING = 'warning_external_automatically_set'; +export const ID_USER_EMAIL = 'user_email'; + +const getAttributeValue = (attr) => document.querySelector(`[${attr}]`)?.getAttribute(attr); + +const getRegexPattern = () => getAttributeValue(DATA_ATTR_REGEX_PATTERN); + +const getRegexOptions = () => getAttributeValue(DATA_ATTR_REGEX_OPTIONS); + +export const setupInternalUserRegexHandler = () => { + const regexPattern = getRegexPattern(); + + if (!regexPattern) { + return; + } + + const regexOptions = getRegexOptions(); + const elExternal = document.getElementById(ID_USER_EXTERNAL); + const elWarningMessage = document.getElementById(ID_WARNING); + const elUserEmail = document.getElementById(ID_USER_EMAIL); + + const isEmailInternal = (email) => { + const regex = new RegExp(regexPattern, regexOptions); + return regex.test(email); + }; + + const setExternalCheckbox = (email) => { + const isChecked = elExternal.checked; + + if (isEmailInternal(email)) { + if (isChecked) { + elExternal.checked = false; + elWarningMessage.classList.remove('hidden'); + } + } else if (!isChecked) { + elExternal.checked = true; + elWarningMessage.classList.add('hidden'); + } + }; + + const setupListeners = () => { + elUserEmail.addEventListener('input', (event) => { + setExternalCheckbox(event.target.value); + }); + + elExternal.addEventListener('change', () => { + elWarningMessage.classList.add('hidden'); + }); + }; + + setupListeners(); +}; |