Implement Import/Export Users UI

core/ui/package.json

@@ -25,6 +25,7 @@
     "lodash": "^4.17.21",
     "lottie-web-vue": "^1.2.0",
     "mark.js": "^8.11.1",
+    "papaparse": "^5.5.3",
     "qrcode.vue": "^1.7.0",
     "uuid": "^3.4.0",
     "vue": "^2.6.11",

core/ui/public/i18n/en/translation.json

@@ -94,7 +94,8 @@
         "plus_others": "+{num} other | +{num} others",
         "choose_a_node": "Choose a node",
         "type": "Type",
-        "any": "Any"
+        "any": "Any",
+        "eg_value": "e.g. {value}"
     },
     "error": {
         "error": "Error",
@@ -428,7 +429,10 @@
         "restart-module": "Restart instance",
         "list-alerts": "List alerts",
         "list-nodes": "List nodes",
-        "set-note": "Set note"
+        "set-note": "Set note",
+        "import-users": "Import users",
+        "export-users": "Export users",
+        "get-password-warning": "Get password warning"
     },
     "network": {
         "title": "Network"
@@ -1435,9 +1439,18 @@
         "group_with_same_name": "A group with this name already exists",
         "user_with_same_name": "A user with this name already exists",
         "display_name_string_lte": "Must be less than or equal to 256 characters",
-        "mail_field": "Mail address (optional)",
+        "mail_field": "Email (optional)",
         "mail": "Mail address",
-        "mail_format": "Invalid mail format"
+        "mail_format": "Invalid mail format",
+        "username_helper_text": "Must start with a letter. Only letters, numbers, hyphens and underscores are allowed",
+        "display_name_helper_text": "Name displayed to other users",
+        "confirm_password": "Confirm password",
+        "import_data": "Import data",
+        "export_data": "Export data",
+        "password":"Password",
+        "locked": "Locked",
+        "must_change_password": "Must change password",
+        "no_password_expiration": "No password expiration"
     },
     "domain_configuration": {
         "title": "Domain configuration",
@@ -1718,5 +1731,28 @@
         "note_description": "A short note to help identify or describe this application.",
         "note_helper_text": "This note must be 100 characters or less",
         "filter_applications": "Filter applications"
+    },
+    "import_users": {
+        "import_data": "Import data",
+        "upload_csv_file_description": "Upload a CSV file containing user data. If the file includes group assignments, those groups will be imported as well.",
+        "csv_upload_label": "Upload file",
+        "csv_upload_helper_text": "Max 10000 rows. Supported format: CSV",
+        "manage_existing_users": "Manage existing users",
+        "manage_existing_users_tooltip": "Specify how to handle users that already exist in the cluster. You can either skip them or overwrite their data with the values from the file.",
+        "skip_existing_users": "Skip existing users",
+        "overwrite_existing_users": "Overwrite existing users",
+        "preview": "Preview",
+        "preview_description": "{users} users and {groups} groups will be imported. Review the data contained in the CSV file; only the first 5 rows are displayed.",
+        "too_many_users": "File exceeds size limit. Max 10000 rows are allowed",
+        "invalid_csv_format": "Invalid CSV format",
+        "import_error": "Import error",
+        "import": "Import",
+        "delete_your_file_after_import":"Delete your file after the import",
+        "delete_your_file_after_import_description":"If the file contains user passwords, it's recommended to delete the CSV after the import for security reasons.",
+        "no_import_users": "No users to import",
+        "no_import_users_description": "The CSV file does not contain any user to import.",
+        "invalid_csv_format_not_expected_columns": "Invalid CSV format: unexpected number of columns",
+        "file_read_error": "File read error",
+        "importing_data_on_domain_name": "Importing data on domain {name}"
     }
 }

core/ui/src/components/domains/CreateOrEditUserModal.vue

@@ -29,6 +29,8 @@
           :label="$t('domain_users.username')"
           :invalid-message="error.user"
           :disabled="isEditing || loading.addUser || loading.alterUser"
+          :helper-text="$t('domain_users.username_helper_text')"
+          :placeholder="$t('common.eg_value', { value: 'jane.doe' })"
           data-modal-primary-focus
           autocomplete="off"
           ref="user"
@@ -37,7 +39,9 @@
           v-model.trim="displayName"
           :label="$t('domain_users.display_name')"
           :invalid-message="error.display_name"
+          :helper-text="$t('domain_users.display_name_helper_text')"
           :disabled="loading.addUser || loading.alterUser"
+          :placeholder="$t('common.eg_value', { value: 'Jane Doe' })"
           autocomplete="off"
           ref="display_name"
         />
@@ -47,6 +51,9 @@
           :invalid-message="error.mail"
           :disabled="loading.addUser || loading.alterUser"
           autocomplete="off"
+          :placeholder="
+            $t('common.eg_value', { value: '[email protected]' })
+          "
           ref="mail"
           type="email"
         />
@@ -78,7 +85,7 @@
         <NsPasswordInput
           v-if="!isEditing"
           :newPasswordLabel="$t('password.password')"
-          :confirmPasswordLabel="$t('password.re_enter_password')"
+          :confirmPasswordLabel="$t('domain_users.confirm_password')"
           v-model="newPassword"
           @passwordValidation="onPasswordValidation"
           :newPasswordInvalidMessage="$t(error.newPassword)"

core/ui/src/components/domains/DomainGroups.vue

@@ -10,7 +10,7 @@
           <cv-column>
             <NsButton
               v-if="domain && domain.location === 'internal'"
-              kind="secondary"
+              kind="primary"
               :icon="Add20"
               @click="showCreateGroupModal"
               >{{ $t("domain_users.create_group") }}
@@ -23,7 +23,7 @@
                 $t('domain_users.cannot_make_changes_to_an_external_domain')
               "
             >
-              <NsButton kind="secondary" :icon="Add20" disabled
+              <NsButton kind="primary" :icon="Add20" disabled
                 >{{ $t("domain_users.create_group") }}
               </NsButton>
             </cv-tooltip>

core/ui/src/components/domains/DomainUsers.vue

@@ -10,7 +10,7 @@
           <cv-column>
             <NsButton
               v-if="domain && domain.location === 'internal'"
-              kind="secondary"
+              kind="primary"
               :icon="Add20"
               @click="showCreateUserModal"
               >{{ $t("domain_users.create_user") }}
@@ -23,7 +23,7 @@
                 $t('domain_users.cannot_make_changes_to_an_external_domain')
               "
             >
-              <NsButton kind="secondary" :icon="Add20" disabled
+              <NsButton kind="primary" :icon="Add20" disabled
                 >{{ $t("domain_users.create_user") }}
               </NsButton>
             </cv-tooltip>