feat: remove email format when adding users (#4414)

Signed-off-by: NaYeong,Kim <[email protected]>
cloudforet-io · Jul 23, 2024 · 0c5922e · 0c5922e
1 parent 2fd7b46
commit 0c5922e
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git a/apps/web/src/services/iam/components/UserManagementAddModal.vue b/apps/web/src/services/iam/components/UserManagementAddModal.vue
@@ -15,11 +15,13 @@ import type { RoleCreateParameters } from '@/schema/identity/role-binding/api-ve
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { UserCreateParameters } from '@/schema/identity/user/api-verbs/create';
 import type { UserModel } from '@/schema/identity/user/model';
+import type { AuthType } from '@/schema/identity/user/type';
 import type { WorkspaceUserCreateParameters } from '@/schema/identity/workspace-user/api-verbs/create';
 import type { WorkspaceUserModel } from '@/schema/identity/workspace-user/model';
 import { store } from '@/store';
 import { i18n } from '@/translations';
 
+import config from '@/lib/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -30,6 +32,7 @@ import UserManagementAddRole from '@/services/iam/components/UserManagementAddRo
 import UserManagementAddTag from '@/services/iam/components/UserManagementAddTag.vue';
 import UserManagementAddUser from '@/services/iam/components/UserManagementAddUser.vue';
 import { USER_MODAL_TYPE } from '@/services/iam/constants/user-constant';
+import { checkEmailFormat } from '@/services/iam/helpers/user-management-form-validations';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 import type { AddModalMenuItem } from '@/services/iam/types/user-type';
 
@@ -40,8 +43,12 @@ const route = useRoute();
 
 const emit = defineEmits<{(e: 'confirm'): void; }>();
 
+const storeState = reactive({
+    smtpEnabled: computed(() => config.get('SMTP_ENABLED')),
+});
 const state = reactive({
     loading: false,
+    disabledResetPassword: false,
     disabled: computed(() => {
         if (userPageState.isAdminMode && !state.isSetAdminRole) {
             const baseCondition = state.userList.length === 0 || (state.workspace.length === 0 || isEmpty(state.role));
@@ -78,8 +85,11 @@ const handleChangeInput = (items) => {
     if (items.userList) {
         state.userList = items.userList;
         const newUserItem = state.userList.filter((item) => item.isNew);
-        state.localUserItem = state.userList.filter((item) => item.auth_type === 'LOCAL');
+        state.localUserItem = state.userList.filter((item) => item.auth_type === 'EMAIL' || item.auth_type === 'ID');
         state.resetPasswordVisible = state.localUserItem.length > 0 && newUserItem.length > 0;
+        const emailUsers = state.userList.filter((item) => item.auth_type === 'EMAIL');
+        state.isResetPassword = (emailUsers.length === state.userList.length) && storeState.smtpEnabled;
+        state.disabledResetPassword = (emailUsers.length !== state.userList.length) || !storeState.smtpEnabled;
     }
 };
 
@@ -116,12 +126,13 @@ const handleClose = () => {
 /* API */
 const fetchCreateUser = async (item: AddModalMenuItem): Promise<void> => {
     const domainSettings = store.state.domain.config?.settings;
+    const { isValid } = checkEmailFormat(item.user_id || '');
     const userInfoParams: UserCreateParameters|WorkspaceUserCreateParameters = {
         user_id: item.user_id || '',
-        email: item.user_id || '',
-        auth_type: item.auth_type || 'LOCAL',
+        email: !isValid ? '' : item.user_id,
+        auth_type: item.auth_type === 'EMAIL' || item.auth_type === 'ID' ? 'LOCAL' : item.auth_type as AuthType,
         password: state.password || '',
-        reset_password: item.auth_type === 'LOCAL' && state.isResetPassword,
+        reset_password: item.auth_type === 'EMAIL' && state.isResetPassword,
         language: domainSettings?.language || 'en',
         timezone: domainSettings?.timezone || 'UTC',
     };
@@ -205,6 +216,7 @@ watch(() => route.query, (query) => {
                 <user-management-add-password v-if="state.resetPasswordVisible && state.userList.length > 0"
                                               :is-reset.sync="state.isResetPassword"
                                               :password.sync="state.password"
+                                              :disabled-reset-password="state.disabledResetPassword"
                 />
                 <user-management-add-admin-role v-if="userPageState.isAdminMode"
                                                 :is-set-admin-role.sync="state.isSetAdminRole"

diff --git a/apps/web/src/services/iam/components/UserManagementAddPassword.vue b/apps/web/src/services/iam/components/UserManagementAddPassword.vue
@@ -13,11 +13,13 @@ import { generatePassword } from '@/services/iam/helpers/generate-helper';
 interface Props {
     isReset: boolean;
     password: string;
+    disabledResetPassword: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     isReset: true,
     password: '',
+    disabledResetPassword: false,
 });
 
 const emit = defineEmits<{(e: 'update:password', password: string): void,
@@ -51,6 +53,7 @@ const handleClickGenerate = () => {
         <div class="title-wrapper">
             <p-field-title :label="$t('IAM.USER.FORM.PASSWORD_SEND_LINK')" />
             <p-toggle-button v-model="state.proxyIsReset"
+                             :disabled="props.disabledResetPassword"
                              @change-toggle="handleChangeToggleButton"
             />
         </div>

diff --git a/apps/web/src/services/iam/components/UserManagementAddUser.vue b/apps/web/src/services/iam/components/UserManagementAddUser.vue
@@ -23,7 +23,7 @@ import { i18n } from '@/translations';
 
 import { checkEmailFormat } from '@/services/iam/helpers/user-management-form-validations';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
-import type { AddModalMenuItem } from '@/services/iam/types/user-type';
+import type { AddModalMenuItem, LocalType } from '@/services/iam/types/user-type';
 
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.$state;
@@ -35,7 +35,8 @@ const targetRef = ref<HTMLElement | null>(null);
 const emit = defineEmits<{(e: 'change-input', formState): void}>();
 
 const authTypeMenuItem = ref([
-    { label: 'Local', name: 'LOCAL' },
+    { label: 'Local(Email)', name: 'EMAIL' },
+    { label: 'Local(ID)', name: 'ID' },
 ]);
 
 const state = reactive({
@@ -47,7 +48,7 @@ const state = reactive({
 });
 const formState = reactive({
     searchText: '',
-    selectedMenuItem: authTypeMenuItem.value[0].name as AuthType,
+    selectedMenuItem: authTypeMenuItem.value[0].name as AuthType|LocalType,
 });
 const validationState = reactive({
     userIdInvalid: undefined as undefined | boolean,
@@ -82,8 +83,8 @@ const handleClickDeleteButton = (idx: number) => {
     state.selectedItems.splice(idx, 1);
     emit('change-input', { userList: state.selectedItems });
 };
-const handleSelectDropdownItem = (selected: string) => {
-    formState.selectedMenuItem = selected as AuthType;
+const handleSelectDropdownItem = (selected: AuthType|LocalType) => {
+    formState.selectedMenuItem = selected;
     validationState.userIdInvalid = false;
     validationState.userIdInvalidText = '';
 };
@@ -104,7 +105,7 @@ const getUserList = async () => {
     }
 };
 const checkEmailValidation = () => {
-    if (formState.selectedMenuItem === 'LOCAL') {
+    if (formState.selectedMenuItem === 'EMAIL') {
         const { isValid, invalidText } = checkEmailFormat(formState.searchText);
         if (!isValid) {
             validationState.userIdInvalid = true;
@@ -146,9 +147,9 @@ const initAuthTypeList = async () => {
 };
 const addSelectedItem = (isNew: boolean) => {
     state.selectedItems.unshift({
-        user_id: formState.searchText,
-        label: formState.searchText,
-        name: formState.searchText,
+        user_id: formState.searchText?.trim(),
+        label: formState.searchText?.trim(),
+        name: formState.searchText?.trim(),
         isNew,
         auth_type: formState.selectedMenuItem,
     });
@@ -294,7 +295,7 @@ onMounted(() => {
                 <div class="selected-toolbox">
                     <p-badge v-if="item.auth_type"
                              badge-type="subtle"
-                             :style-type="item.auth_type === 'LOCAL' ? 'primary3' : 'blue200'"
+                             :style-type="(item.auth_type === 'EMAIL' || item.auth_type === 'ID') ? 'primary3' : 'blue200'"
                     >
                         {{ authTypeMenuItem.find((i) => i.name === item.auth_type).label || '' }}
                     </p-badge>
@@ -384,7 +385,7 @@ onMounted(() => {
     .invalid-feedback {
         @apply absolute;
         bottom: -1.125rem;
-        left: 6.75rem;
+        left: 8rem;
     }
 }
 </style>
diff --git a/apps/web/src/services/iam/constants/user-constant.ts b/apps/web/src/services/iam/constants/user-constant.ts
@@ -85,3 +85,8 @@ export const USER_TABS = {
     DATA: 'data',
 } as const;
 
+export const LOCAL_TYPE = {
+    EMAIL: 'EMAIL',
+    ID: 'ID',
+} as const;
+
diff --git a/apps/web/src/services/iam/types/user-type.ts b/apps/web/src/services/iam/types/user-type.ts
@@ -5,6 +5,9 @@ import type { UserModel } from '@/schema/identity/user/model';
 import type { AuthType } from '@/schema/identity/user/type';
 import type { WorkspaceUserModel } from '@/schema/identity/workspace-user/model';
 
+import type { LOCAL_TYPE } from '@/services/iam/constants/user-constant';
+
+export type LocalType = typeof LOCAL_TYPE[keyof typeof LOCAL_TYPE];
 interface RoleBindingState {
     type: RoleType;
     name: string;
@@ -28,7 +31,7 @@ export interface AddModalMenuItem extends MenuItem {
     name?: string;
     user_id?: string;
     role_type?: RoleType;
-    auth_type?: AuthType;
+    auth_type?: AuthType|LocalType;
     isNew?: boolean;
     workspace_id?: string;
 }