Merge pull request #106 from SafeExamBrowser/SEBSERV-898

SEBSERV-898 use new generic upload dialog with form builder

Author: anhefti

client/src/components/widgets/UploadDialog.vue

@@ -890,18 +890,24 @@
         "pwdMismatch": "The password and confirm password must match",
         "pwdSpaces": "The value must not start or end with a space.",
         "noNegNumber": "Cant be a negative number",
-        "upload": {
-            "upload": "Import SEB Settings",
-            "selectFromFolder": "Select From File Explorer",
-            "uploadHelp": "Drag and Drop or Search through File Explorer",
-            "allowed": "Allowed File Types",
-            "dropHere": "Drop a SEB Settings file here",
-            "password": "Password",
-            "quitPassword": "Quit Password",
-            "onlyAllowed": "File Type not allowed",
-            "uploadFailed": "Failed to upload SEB Settings, please contact a system administrator",
-            "passwordIncorrect": "The password was incorrect. Please try again or contact a system administrator",
-            "importButton": "Import"
+        "importDialog": {
+            "addButtonTitle": "Import",
+            "confirmButtonTitle": "Import",
+            "fields": {
+                "file": {
+                    "label": "SEB Configuration File",
+                    "hint": "Drop a SEB Configuration file here or search through file explorer."
+                },
+                "password": {
+                    "label": "Password"
+                },
+                "quitPassword": {
+                    "label": "Quit Password"
+                }
+            },
+            "errors": {
+                "generic": "Failed to upload SEB Configuration, make sure you use the correct file-password. Please try again or contact a system administrator"
+            }
         },
         "views": {
             "general": "General",
@@ -1824,24 +1830,19 @@
         "spSearch": "Search",
         "spApplications": "Applications",
         "runningExams": "Running Exams",
-
         "userAccounts": "User Accounts",
         "createUserAccount": "Create User Account",
         "editUserAccount": "Edit User Account",
         "profileSettings": "Profile Settings",
         "register": "Register",
-
         "assessmentToolConnections": "Assessment Tool Connections",
         "createAssessmentTool": "Assessment Tool Setup",
         "assessmentTool": "Assessment Tool",
         "assessmentToolEdit": "Edit Assessment Tool Connection",
-
         "connectionConfigurationViewAndEdit": "Edit Connection Configuration",
         "createConnectionConfiguration": "Add Connection Configuration",
         "connectionConfigurations": "Connection Configurations",
-
         "certificates": "Certificates",
-
         "editExamTemplate": "Edit Exam Template",
         "galleryView": "Gallery View"
     },

client/src/i18n/locales/en.json

@@ -104,23 +104,6 @@ export type SEBSettingsView = {
     tableValues: Map<string, SEBSettingsTableRowValues[]>;
 };
 
-// TODO @anhefti: this seems not to be used. Remove them if it remains so
-
-// export type ApplicationView = {
-//     configurationNodeId: number;
-//     configurationId: number;
-//     allowSwitchToApplications: {
-//         id: number;
-//         value: string;
-//     };
-//     allowFlashFullscreen: {
-//         id: number;
-//         value: string;
-//     };
-//     prohibitedProcesses: ProhibitedProcess[];
-//     permittedProcesses: PermittedProcess[];
-// };
-
 export type URLFilterRule = {
     index: number;
     active: boolean;

client/src/models/seb-server/sebSettings.ts

@@ -4,17 +4,21 @@ import i18n from "@/i18n";
 import { FormField } from "@/components/widgets/formBuilder/types.ts";
 import {
     CertificateUploadItemTransient,
+    CertKey,
     toCertificateUploadItem,
 } from "@/pages/(app)/certificate/types/types.ts";
 import { useCreateCertificate } from "@/pages/(app)/certificate/composables/api/useCreateCertificate.ts";
 
 export const useCertificateCreateForm = ({
     onSuccess,
 }: {
-    onSuccess: () => void;
+    onSuccess: (key: CertKey) => void;
 }) => {
-    const { mutateData: uploadCertificate, error: uploadError } =
-        useCreateCertificate();
+    const {
+        data: cert,
+        mutateData: uploadCertificate,
+        error: uploadError,
+    } = useCreateCertificate();
 
     const getEmptyItem = (): CertificateUploadItemTransient => ({
         file: undefined,
@@ -81,7 +85,11 @@ export const useCertificateCreateForm = ({
             );
         }
 
-        onSuccess();
+        const createdName =
+            cert.value?.alias || item.file.name.replace(/\.[^.]+$/i, "");
+        const createdId = cert.value?.alias || createdName;
+
+        onSuccess({ id: createdId, name: createdName });
     };
 
     return {

client/src/pages/(app)/certificate/composables/useCertificateCreateForm.ts

@@ -143,7 +143,11 @@ const {
 } = useDeleteCertificate(tableData);
 
 const { getEmptyItem, getFormFields, handleUploadCertificate } =
-    useCertificateCreateForm({ onSuccess: loadItems });
+    useCertificateCreateForm({ onSuccess: onCertificateUpload });
+
+function onCertificateUpload(): void {
+    loadItems();
+}
 
 const deleteTarget = ref<TableItem | null>(null);
 const deleteDialogOpen = ref(false);

client/src/pages/(app)/certificate/index.vue

@@ -18,3 +18,8 @@ export type CertificateUploadItem = z.infer<typeof certificateUploadItemSchema>;
 export const toCertificateUploadItem = (
     itemTransient: CertificateUploadItemTransient,
 ): CertificateUploadItem => certificateUploadItemSchema.parse(itemTransient);
+
+export type CertKey = {
+    id: string;
+    name: string;
+};

client/src/pages/(app)/certificate/types/types.ts

@@ -261,8 +261,35 @@
                                                                     .value ===
                                                                 '__UPLOAD__'
                                                             "
-                                                            >mdi-upload</v-icon
                                                         >
+                                                            <FormDialog
+                                                                icon-activator="mdi-plus-circle-outline"
+                                                                color-activator="primary"
+                                                                label-activator=""
+                                                                size-activator="large"
+                                                                label-activator-visible
+                                                                :label-cancel="
+                                                                    $t(
+                                                                        'general.cancelButton',
+                                                                    )
+                                                                "
+                                                                :label-submit="
+                                                                    $t(
+                                                                        'certificates.createDialog.confirmButtonTitle',
+                                                                    )
+                                                                "
+                                                                form-id="form-certificate-upload"
+                                                                :get-form-fields="
+                                                                    getFormFields
+                                                                "
+                                                                :get-item="
+                                                                    getEmptyItem
+                                                                "
+                                                                :on-submit="
+                                                                    handleUploadCertificate
+                                                                "
+                                                            />
+                                                        </v-icon>
                                                     </template>
                                                 </v-list-item>
 
@@ -788,7 +815,8 @@ import {
 import { getConnectionConfiguration } from "@/services/seb-server/connectionConfigurationService.ts";
 import { getCertificates } from "@/services/seb-server/certificateService.ts";
 import SettingsNavigation from "@/components/widgets/navigation/SettingsNavigation.vue";
-import UploadDialog from "@/components/widgets/UploadDialog.vue";
+import { useCertificateCreateForm } from "../../certificate/composables/useCertificateCreateForm";
+import FormDialog from "@/components/widgets/formDialog/FormDialog.vue";
 
 definePage({
     meta: {
@@ -855,6 +883,9 @@ const confirmQuitPwdRef = ref<InputLike | null>(null);
 const userToLastUpdate = ref<UserAccount | null>(null);
 const userNamesOfLastUserToUpdate = ref<string | undefined>(undefined);
 
+const { getEmptyItem, getFormFields, handleUploadCertificate } =
+    useCertificateCreateForm({ onSuccess: onCertImported });
+
 type VuetifyFormLike = {
     validate: () => Promise<{ valid: boolean }>;
     resetValidation?: () => void;

client/src/pages/(app)/connection-configuration/[id]/index.vue

@@ -42,8 +42,27 @@
                                 <template #prepend>
                                     <v-icon
                                         v-if="item.raw.value === '__UPLOAD__'"
-                                        >mdi-upload</v-icon
                                     >
+                                        <FormDialog
+                                            icon-activator="mdi-plus-circle-outline"
+                                            color-activator="primary"
+                                            label-activator=""
+                                            size-activator="large"
+                                            label-activator-visible
+                                            :label-cancel="
+                                                $t('general.cancelButton')
+                                            "
+                                            :label-submit="
+                                                $t(
+                                                    'certificates.createDialog.confirmButtonTitle',
+                                                )
+                                            "
+                                            form-id="form-certificate-upload"
+                                            :get-form-fields="getFormFields"
+                                            :get-item="getEmptyItem"
+                                            :on-submit="handleUploadCertificate"
+                                        />
+                                    </v-icon>
                                 </template>
                             </v-list-item>
                             <v-divider
@@ -160,9 +179,11 @@ import type { CreateConnectionConfigurationPar } from "@/models/seb-server/conne
 import CancelButton from "@/components/widgets/CancelButton.vue";
 import ConfirmButton from "@/components/widgets/ConfirmButton.vue";
 import HintText from "@/components/widgets/HintText.vue";
-import UploadDialog from "@/components/widgets/UploadDialog.vue";
+import FormDialog from "@/components/widgets/formDialog/FormDialog.vue";
 
 import { useRouter } from "vue-router";
+import { useCertificateCreateForm } from "../../certificate/composables/useCertificateCreateForm.ts";
+import { CertKey } from "../../certificate/types/types.ts";
 definePage({
     meta: {
         titleKey: "titles.createConnectionConfiguration",
@@ -215,11 +236,14 @@ function handleCertChange(val: string | undefined) {
     }
 }
 
-async function onCertImported(created: { id: string; name: string }) {
+async function onCertImported(key: CertKey) {
     await loadCertificates();
-    encryptWithCertificate.value = created.name;
+    encryptWithCertificate.value = key.name;
 }
 
+const { getEmptyItem, getFormFields, handleUploadCertificate } =
+    useCertificateCreateForm({ onSuccess: onCertImported });
+
 async function submit() {
     const mainResult = await mainFormRef.value?.validate();
 

client/src/pages/(app)/connection-configuration/create/index.vue

@@ -10,8 +10,24 @@
                     />
                 </div>
             </v-col>
-            <v-col cols="auto">
-                <AddButton text="" @click="importDialog = true" />
+            <v-col cols="auto" class="pt-8">
+                <FormDialog
+                    icon-activator="mdi-plus-circle-outline"
+                    color-activator="primary"
+                    :label-activator="
+                        $t('sebSettings.importDialog.addButtonTitle')
+                    "
+                    size-activator="x-large"
+                    label-activator-visible
+                    :label-cancel="$t('general.cancelButton')"
+                    :label-submit="
+                        $t('sebSettings.importDialog.confirmButtonTitle')
+                    "
+                    form-id="form-certificate-upload"
+                    :get-form-fields="getFormFields"
+                    :get-item="getEmptyItem"
+                    :on-submit="handleImportSEBSettings"
+                />
             </v-col>
         </v-row>
     </v-container>
@@ -23,34 +39,17 @@
             </v-col>
         </v-row>
     </v-card>
-
-    <!-----------import dialog ---------->
-    <UploadDialog
-        v-model="importDialog"
-        name-prefix="sebSettings"
-        icon="mdi-file-upload-outline"
-        :seb-settings-id="
-            stepNamingStore.configurationTemplate
-                ? stepNamingStore.configurationTemplate.toString()
-                : null
-        "
-        :show-quit-password="true"
-        :default-ext-list="['.seb']"
-        @uploaded="onConfigImported"
-    />
 </template>
 
 <script setup lang="ts">
 import { computed, ComputedRef, ref } from "vue";
 import { ConfigurationTemplateKey } from "@/models/seb-server/configurationNode.ts";
 import { useStepNamingStore } from "@/pages/(app)/exam-template/create/components/stepNaming/composables/store/useStepNamingStore.ts";
 import SectionSubtitle from "@/components/widgets/SectionSubtitle.vue";
-import AddButton from "@/components/widgets/AddButton.vue";
 import SEBSettingsPanel from "@/components/widgets/sebSettings/components/SEBSettingsPanel.vue";
-import UploadDialog from "@/components/widgets/UploadDialog.vue";
 import { SEBSettingsContext } from "@/components/widgets/sebSettings/types.ts";
-
-const stepNamingStore = useStepNamingStore();
+import { useSEBSettingsImportForm } from "../composables/useSEBSettingsImportForm";
+import FormDialog from "@/components/widgets/formDialog/FormDialog.vue";
 
 const configKey = defineModel<ConfigurationTemplateKey | undefined>({
     required: true,
@@ -85,4 +84,9 @@ const seb_settings_context: ComputedRef<SEBSettingsContext> = computed(() => {
         ignoreSEBService: ref<boolean>(false),
     };
 });
+
+const { getEmptyItem, getFormFields, handleImportSEBSettings } =
+    useSEBSettingsImportForm(seb_settings_context.value.containerId, {
+        onSuccess: onConfigImported,
+    });
 </script>

client/src/pages/(app)/exam-template/create/components/stepSEBSettings/components/SEBSettings.vue

@@ -0,0 +1,11 @@
+import { useMutation } from "@/composables/useMutation.ts";
+import { importSEBSettings } from "@/services/seb-server/configurationNodeService";
+import {
+    ConfigurationKey,
+    SEBSettingsImport,
+} from "@/models/seb-server/configurationNode";
+
+export const useSEBSettingsImport = () =>
+    useMutation<[SEBSettingsImport], ConfigurationKey>((params) =>
+        importSEBSettings(params),
+    );