.eslintrc-auto-import.json

@@ -301,6 +301,13 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "onWatcherCleanup": true,
+    "useId": true,
+    "useModel": true,
+    "useTemplateRef": true
   }
 }

package.json

 {
   "name": "ui",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,7 +12,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coscine/api-client": "^3.15.0",
+    "@coscine/api-client": "3.15.0-issue-3085-usenewapiclient.1",
     "@coscine/form-generator": "^4.0.5",
     "@dynamic-mapper/mapper": "^1.10.4",
     "@pinia/testing": "^0.1.3",
@@ -40,12 +40,12 @@
     "sass-loader": "^13.3.2",
     "stream-to-string": "^1.2.1",
     "uuid": "^9.0.1",
-    "vue": "^3.4.27",
-    "vue-dompurify-html": "^5.0.1",
+    "vue": "^3.5.13",
+    "vue-dompurify-html": "^5.2.0",
     "vue-i18n": "^9.13.1",
-    "vue-multiselect": "^3.0.0",
+    "vue-multiselect": "^3.2.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.5.0",
     "vue-select": "^4.0.0-beta.6",
     "vue-sidebar-menu": "^5.4.0"
   },

src/auto-imports.d.ts

@@ -74,6 +74,7 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
@@ -187,6 +188,7 @@ declare global {
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useI18n: typeof import('vue-i18n')['useI18n']
+  const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -203,6 +205,7 @@ declare global {
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -250,6 +253,7 @@ declare global {
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
@@ -301,6 +305,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/data/mockup/testProject.ts

@@ -2,13 +2,18 @@ import {
   type VisitedProjectDto,
   type ProjectState,
 } from "@/modules/project/types";
-import type { RoleDto } from "@coscine/api-client/dist/types/Coscine.Api";
+import type {
+  RoleDto,
+  VisibilityForProjectManipulationDto,
+} from "@coscine/api-client/dist/types/Coscine.Api";
 import {
   testDiscipline,
   testOrganizationFromShibboleth,
   getTestShibbolethUser,
 } from "./testUser";
 import { testResourceType } from "./testResource";
+import { ProjectForCreation } from "@/models/ProjectForCreation";
+import moment from "moment";
 
 export const testOwnerRole: RoleDto = {
   id: "ownerRole",
@@ -77,6 +82,7 @@ export const testProject: VisitedProjectDto = {
       },
       resourceType: {
         id: testResourceType.id,
+        // generalType: testResourceType.generalType,
       },
     },
   ],
@@ -213,3 +219,19 @@ export const testProjectStateGuest: ProjectState = {
     testProject: testProjectGuest,
   },
 };
+
+export const testProjectForCreation: ProjectForCreation = {
+  description: "TestProjectForCreation description",
+  displayName: "TestProjectForCreation",
+  startDate: moment(new Date()).format("YYYY-MM-DD"),
+  endDate: moment(new Date()).format("YYYY-MM-DD"),
+  keywords: [] as string[],
+  name: "Some Name",
+  principleInvestigators: "Prince Investigator",
+  grantId: "grant-123",
+  disciplines: [],
+  organizations: [],
+  visibility: {} as VisibilityForProjectManipulationDto,
+  parentId: "parentId-123",
+  copyOwnersFromParent: false,
+};

src/data/mockup/testUser.ts

@@ -4,6 +4,7 @@ import type {
   UserDto,
   UserOrganizationDto,
   IdentityProviderDto,
+  LanguageDto,
 } from "@coscine/api-client/dist/types/Coscine.Api";
 
 export const testOrganizationFromShibboleth: UserOrganizationDto = {
@@ -35,7 +36,11 @@ export const NFDI4Ing_AAIProvider: IdentityProviderDto = {
   displayName: "NFDI4Ing AAI",
 };
 
-export const testLanguage = { id: "1", displayName: "en" };
+export const testLanguage = {
+  id: "1",
+  displayName: "en",
+  abbreviation: "en",
+} as LanguageDto;
 
 /**
  * Generates a mock Shibboleth user data object for testing purposes.
@@ -53,6 +58,7 @@ export const getTestShibbolethUser: () => UserDto = (): UserDto => {
     ],
     disciplines: [testDiscipline],
     language: testLanguage,
+    identities: [],
     organizations: [testOrganizationFromShibboleth],
     areToSAccepted: true,
   };
@@ -63,7 +69,7 @@ export const getTestShibbolethUser: () => UserDto = (): UserDto => {
  *
  * @returns {UserDto} A mock ORCID user data object.
  */
-export const getTestOrcidUser: () => UserDto = () => {
+export const getTestOrcidUser: () => UserDto = (): UserDto => {
   return {
     id: "d302cb44-c934-4b54-a581-9765cab96fca",
     givenName: "Coscine",
@@ -74,7 +80,9 @@ export const getTestOrcidUser: () => UserDto = () => {
     ],
     disciplines: [testDiscipline],
     language: testLanguage,
+    identities: [],
     organizations: [testOrganizationFromOrcid],
+    areToSAccepted: true,
   };
 };
 
@@ -82,7 +90,10 @@ export const getTestShibbolethUserState: () => UserState = () => {
   return {
     userProfile: {
       disciplines: [testDiscipline],
-      languages: [testLanguage, { id: "2", displayName: "de" }],
+      languages: [
+        testLanguage,
+        { id: "2", displayName: "de", abbreviation: "de" },
+      ],
       organizations: [testOrganizationFromShibboleth],
       titles: [
         {
@@ -121,8 +132,9 @@ export const getTestShibbolethUserWithoutLanguageState: () => UserState =
       },
       user: {
         ...getTestShibbolethUser(),
-        language: null,
+        language: undefined!, // Force a missing language
       },
+      isRetrievingUser: false,
     };
   };
 
@@ -130,7 +142,10 @@ export const getTestOrcidUserState: () => UserState = () => {
   return {
     userProfile: {
       disciplines: [testDiscipline],
-      languages: [testLanguage, { id: "2", displayName: "de" }],
+      languages: [
+        testLanguage,
+        { id: "2", displayName: "de", abbreviation: "de" },
+      ],
       organizations: [testOrganizationFromShibboleth],
       titles: [
         {

src/i18n/de.ts

@@ -197,6 +197,33 @@ export default {
 
   resourceTypes: {
     resource: "Ressource",
+    gitlab: {
+      displayName: "GitLab",
+      fullName: "GitLab (Git)",
+      description:
+        "GitLab (Git) ist eine Webanwendung zur Versionsverwaltung für Softwareprojekte auf Git-Basis. Sie können Git-Repositorien in Ihren Coscine Projekten hinterlegen und mit Metadaten beschreiben. Im Arbeitsalltag können Sie Git wie gewohnt nutzen und haben in Coscine die Übersicht über verschiedene Repositorien und die Möglichkeit zur  Metadatenverwaltung.",
+    },
+    linked: {
+      displayName: "Linked Data",
+      fullName: "Linked Data (Linked)",
+      description:
+        "Linked Data Ressourcen erlauben das Metadatenmanagement für Daten, die in externen Speichersystemen liegen und auf die nicht direkt mit Coscine zugegriffen werden kann oder soll. So können z.B. Daten auf lokalen Datenspeichern im Institut oder externen Datenspeichern, die nicht mit Coscine kompatibel sind mit Metadaten beschrieben werden. Die Handhabung der Metadaten erfolgt weitgehend analog zu anderen Ressourcentypen, statt dem Upload- und Download von Daten werden Platzhalter angelegt die mit den Metadaten beschrieben werden. Durch ein zusätzliches Feld kann eine Referenz auf den Ort der Datei angegeben werden, um eine eindeutige Zuordnung auf Dateilevel zu erlauben, z. B. Institutsfileserver/Projekt X/Messreihe B/11-12-2020_data.csv.",
+    },
+    dsNrwWeb: {
+      displayName: "DataStorage.nrw (Web)",
+      fullName: "DataStorage.nrw (Web)",
+      description: "k.A.",
+    },
+    dsNrwS3: {
+      displayName: "DataStorage.nrw (S3)",
+      fullName: "DataStorage.nrw (S3)",
+      description: "k.A.",
+    },
+    dsNrwS3Worm: {
+      displayName: "DataStorage.nrw (WORM)",
+      fullName: "DataStorage.nrw (WORM)",
+      description: "k.A.",
+    },
     rdsrwth: {
       displayName: "RWTH-RDS-Web",
       fullName: "Research Data Storage (RDS)",
@@ -227,12 +254,6 @@ export default {
       description:
         "Research Data Storage (RDS) Nordrhein-Westfalen ist objektbasierter Speicher für Forschungsdaten. Sie können RDS-Ressourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
     },
-    s3: {
-      displayName: "S3 Bucket",
-      fullName: "S3 Bucket (S3)",
-      description:
-        "S3 Buckets (S3) sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzenden. Daher ist ein gesondertes Antragsverfahren und ein Datenmanagementplan (DMP) notwendig, um sicherzustellen, dass die Daten die in S3 Buckets gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
-    },
     rdss3rwth: {
       displayName: "RWTH-RDS-S3",
       fullName: "RDS-S3-Ressource (S3)",
@@ -263,18 +284,6 @@ export default {
       description:
         "RDS-S3 Nordrhein-Westfalen sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzenden. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in RDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
     },
-    gitlab: {
-      displayName: "GitLab",
-      fullName: "GitLab (Git)",
-      description:
-        "GitLab (Git) ist eine Webanwendung zur Versionsverwaltung für Softwareprojekte auf Git-Basis. Sie können Git-Repositorien in Ihren Coscine Projekten hinterlegen und mit Metadaten beschreiben. Im Arbeitsalltag können Sie Git wie gewohnt nutzen und haben in Coscine die Übersicht über verschiedene Repositorien und die Möglichkeit zur  Metadatenverwaltung.",
-    },
-    linked: {
-      displayName: "Linked Data",
-      fullName: "Linked Data (Linked)",
-      description:
-        "Linked Data Ressourcen erlauben das Metadatenmanagement für Daten, die in externen Speichersystemen liegen und auf die nicht direkt mit Coscine zugegriffen werden kann oder soll. So können z.B. Daten auf lokalen Datenspeichern im Institut oder externen Datenspeichern, die nicht mit Coscine kompatibel sind mit Metadaten beschrieben werden. Die Handhabung der Metadaten erfolgt weitgehend analog zu anderen Ressourcentypen, statt dem Upload- und Download von Daten werden Platzhalter angelegt die mit den Metadaten beschrieben werden. Durch ein zusätzliches Feld kann eine Referenz auf den Ort der Datei angegeben werden, um eine eindeutige Zuordnung auf Dateilevel zu erlauben, z. B. Institutsfileserver/Projekt X/Messreihe B/11-12-2020_data.csv.",
-    },
     rdss3wormrwth: {
       displayName: "RWTH-RDS-WORM",
       fullName: "RDS-WORM-Ressource (WORM)",

src/i18n/en.ts

@@ -194,6 +194,33 @@ export default {
 
   resourceTypes: {
     resource: "Resource",
+    gitlab: {
+      displayName: "GitLab",
+      fullName: "GitLab (Git)",
+      description:
+        "GitLab (Git) is a web application for version management of software projects based on Git. You can store Git repositories in your Coscine projects and describe them with metadata. In your daily work you can use Git as usual and have an overview of different repositories and the possibility to manage metadata in Coscine.",
+    },
+    linked: {
+      displayName: "Linked Data",
+      fullName: "Linked Data (Linked)",
+      description:
+        "Linked Data Resources allow metadata management for data stored in external storage systems that cannot or should not be directly accessed via Coscine. For example, data on local data storage systems in the institute or external data storage systems that are not compatible with Coscine can be described with metadata. The handling of metadata is largely analogous to other resource types. Instead of uploading and downloading data, placeholders are created which are described with the metadata. An additional field can be used to specify a reference to the location of the file in order to allow a unique assignment at file level, e.g. Institute file server/Project X/Measurement B/11-12-2020_data.csv.",
+    },
+    dsNrwWeb: {
+      displayName: "DataStorage.nrw (Web)",
+      fullName: "DataStorage.nrw (Web)",
+      description: "N/A",
+    },
+    dsNrwS3: {
+      displayName: "DataStorage.nrw (S3)",
+      fullName: "DataStorage.nrw (S3)",
+      description: "N/A",
+    },
+    dsNrwS3Worm: {
+      displayName: "DataStorage.nrw (WORM)",
+      fullName: "DataStorage.nrw (WORM)",
+      description: "N/A",
+    },
     rdsrwth: {
       displayName: "RWTH-RDS-Web",
       fullName: "Research Data Storage (RDS)",
@@ -260,18 +287,6 @@ export default {
       description:
         "RDS-S3 North Rhine-Westphalia are object-based storage units for research data. They are based on the same technology as the research data storage (RDS), but the administration of the metadata lies with the user. Therefore, an application procedure is necessary to ensure that the data stored in S3 Buckets is described with metadata in order to be retrievable and reusable in the long term.",
     },
-    gitlab: {
-      displayName: "GitLab",
-      fullName: "GitLab (Git)",
-      description:
-        "GitLab (Git) is a web application for version management of software projects based on Git. You can store Git repositories in your Coscine projects and describe them with metadata. In your daily work you can use Git as usual and have an overview of different repositories and the possibility to manage metadata in Coscine.",
-    },
-    linked: {
-      displayName: "Linked Data",
-      fullName: "Linked Data (Linked)",
-      description:
-        "Linked Data Resources allow metadata management for data stored in external storage systems that cannot or should not be directly accessed via Coscine. For example, data on local data storage systems in the institute or external data storage systems that are not compatible with Coscine can be described with metadata. The handling of metadata is largely analogous to other resource types. Instead of uploading and downloading data, placeholders are created which are described with the metadata. An additional field can be used to specify a reference to the location of the file in order to allow a unique assignment at file level, e.g. Institute file server/Project X/Measurement B/11-12-2020_data.csv.",
-    },
     rdss3wormrwth: {
       displayName: "RWTH-RDS-WORM",
       fullName: "RDS-WORM-Resource (WORM)",

src/mapping/resource.ts

 import { MapperConfiguration, MappingPair } from "@dynamic-mapper/mapper";
 
 import type {
+  DataStorageNrwS3OptionsDto,
+  DataStorageNrwS3ResourceTypeOptionsForManipulationDto,
+  DataStorageNrwS3WormOptionsDto,
+  DataStorageNrwS3WormResourceTypeOptionsForManipulationDto,
+  DataStorageNrwWebOptionsDto,
+  DataStorageNrwWebResourceTypeOptionsForManipulationDto,
   DisciplineDto,
   DisciplineForResourceManipulationDto,
   GitLabOptionsDto,
@@ -61,7 +67,21 @@ export const RdsS3WormOptionsDto2RdsS3WormResourceTypeOptionsForManipulationDto
     RdsS3WormOptionsDto,
     RdsS3WormResourceTypeOptionsForManipulationDto
   >();
-
+export const DsNrwWebOptionsDto2DsNrwWebResourceTypeOptionsForManipulationDto =
+  new MappingPair<
+    DataStorageNrwWebOptionsDto,
+    DataStorageNrwWebResourceTypeOptionsForManipulationDto
+  >();
+export const DsNrwS3OptionsDto2DsNrwS3ResourceTypeOptionsForManipulationDto =
+  new MappingPair<
+    DataStorageNrwS3OptionsDto,
+    DataStorageNrwS3ResourceTypeOptionsForManipulationDto
+  >();
+export const DsNrwS3WormOptionsDto2DsNrwS3WormResourceTypeOptionsForManipulationDto =
+  new MappingPair<
+    DataStorageNrwS3WormOptionsDto,
+    DataStorageNrwS3WormResourceTypeOptionsForManipulationDto
+  >();
 export const ResourceTypeInformationDto2ResourceTypeOptionsForCreationDto =
   new MappingPair<
     ResourceTypeInformationDto,
@@ -128,6 +148,27 @@ const configuration = new MapperConfiguration((cfg) => {
           RdsS3WormOptionsDto2RdsS3WormResourceTypeOptionsForManipulationDto,
         )
         .condition((con) => con.rdsS3Worm !== undefined),
+    dataStorageNrwWebResourceTypeOptions: (opt) =>
+      opt
+        .mapFromUsing(
+          (e) => e.dataStorageNrwWeb,
+          DsNrwWebOptionsDto2DsNrwWebResourceTypeOptionsForManipulationDto,
+        )
+        .condition((con) => con.dataStorageNrwWeb !== undefined),
+    dataStorageNrwS3ResourceTypeOptions: (opt) =>
+      opt
+        .mapFromUsing(
+          (e) => e.dataStorageNrwS3,
+          DsNrwS3OptionsDto2DsNrwS3ResourceTypeOptionsForManipulationDto,
+        )
+        .condition((con) => con.dataStorageNrwS3 !== undefined),
+    dataStorageNrwS3WormResourceTypeOptions: (opt) =>
+      opt
+        .mapFromUsing(
+          (e) => e.dataStorageNrwS3Worm,
+          DsNrwS3WormOptionsDto2DsNrwS3WormResourceTypeOptionsForManipulationDto,
+        )
+        .condition((con) => con.dataStorageNrwS3Worm !== undefined),
   });
   cfg.createMap(ResourceTypeInformationDto2ResourceTypeOptionsForCreationDto, {
     linkedResourceTypeOptions: (opt) =>
@@ -156,7 +197,9 @@ const configuration = new MapperConfiguration((cfg) => {
           (rti) => rti.generalType === CoscineResourceTypes.Rds.General,
         )
         .mapFrom((rti) =>
-          rti.generalType === CoscineResourceTypes.Rds.General ? {} : undefined,
+          rti.generalType === CoscineResourceTypes.Rds.General
+            ? ({} as RdsResourceTypeOptionsForManipulationDto)
+            : undefined,
         ),
     rdsS3ResourceTypeOptions: (opt) =>
       opt
@@ -165,7 +208,7 @@ const configuration = new MapperConfiguration((cfg) => {
         )
         .mapFrom((rti) =>
           rti.generalType === CoscineResourceTypes.RdsS3.General
-            ? {}
+            ? ({} as RdsS3ResourceTypeOptionsForManipulationDto)
             : undefined,
         ),
     rdsS3WormResourceTypeOptions: (opt) =>
@@ -175,7 +218,41 @@ const configuration = new MapperConfiguration((cfg) => {
         )
         .mapFrom((rti) =>
           rti.generalType === CoscineResourceTypes.RdsS3Worm.General
-            ? {}
+            ? ({} as RdsS3WormResourceTypeOptionsForManipulationDto)
+            : undefined,
+        ),
+    dataStorageNrwWebResourceTypeOptions: (opt) =>
+      opt
+        .preCondition(
+          (rti) =>
+            rti.generalType === CoscineResourceTypes.DataStorageNrwWeb.General,
+        )
+        .mapFrom((rti) =>
+          rti.generalType === CoscineResourceTypes.DataStorageNrwWeb.General
+            ? ({} as DataStorageNrwWebResourceTypeOptionsForManipulationDto)
+            : undefined,
+        ),
+    dataStorageNrwS3ResourceTypeOptions: (opt) =>
+      opt
+        .preCondition(
+          (rti) =>
+            rti.generalType === CoscineResourceTypes.DataStorageNrwS3.General,
+        )
+        .mapFrom((rti) =>
+          rti.generalType === CoscineResourceTypes.DataStorageNrwS3.General
+            ? ({} as DataStorageNrwS3ResourceTypeOptionsForManipulationDto)
+            : undefined,
+        ),
+    dataStorageNrwS3WormResourceTypeOptions: (opt) =>
+      opt
+        .preCondition(
+          (rti) =>
+            rti.generalType ===
+            CoscineResourceTypes.DataStorageNrwS3Worm.General,
+        )
+        .mapFrom((rti) =>
+          rti.generalType === CoscineResourceTypes.DataStorageNrwS3Worm.General
+            ? ({} as DataStorageNrwS3WormResourceTypeOptionsForManipulationDto)
             : undefined,
         ),
   });
@@ -198,6 +275,27 @@ const configuration = new MapperConfiguration((cfg) => {
         opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
     },
   );
+  cfg.createAutoMap(
+    DsNrwWebOptionsDto2DsNrwWebResourceTypeOptionsForManipulationDto,
+    {
+      quota: (opt) =>
+        opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
+    },
+  );
+  cfg.createAutoMap(
+    DsNrwS3OptionsDto2DsNrwS3ResourceTypeOptionsForManipulationDto,
+    {
+      quota: (opt) =>
+        opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
+    },
+  );
+  cfg.createAutoMap(
+    DsNrwS3WormOptionsDto2DsNrwS3WormResourceTypeOptionsForManipulationDto,
+    {
+      quota: (opt) =>
+        opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
+    },
+  );
 
   // Other maps
   cfg.createAutoMap(LicenseDto2LicenseForResourceManipulationDto, {

src/modules/project/i18n/de.ts

@@ -131,9 +131,9 @@ export default {
     dataPublication: {
       continue: "Weiter",
       description1:
-        "Um Sie bei der Veröffentlichung Ihrer Daten zu unterstützen, stehen Ihnen Publikationsservices zur Verfügung. Coscine bietet einen Service an, um den Datenveröffentlichungsdienst einer Partnerhochschule zu kontaktieren und gleichzeitig erste Informationen über Ihr Projekt, Ihre Ressourcen und die Daten, die Sie veröffentlichen möchten, weiterzuleiten.",
+        "Um Sie bei der Veröffentlichung Ihrer Daten zu unterstützen, stehen Ihnen Publikationsservices von teilnehmenden Organisationen zur Verfügung. Coscine bietet Ihnen hier den Service an, den Datenveröffentlichungsdienst Ihrer Heimatorganisation zu kontaktieren und gleichzeitig erste Informationen über Ihr Projekt, Ihre Ressourcen und die Daten, die Sie veröffentlichen möchten, weiterzuleiten.",
       description2:
-        "Nach erfolgreichem Übermitteln der Informationen, werden alle Project Owner benachrichtigt und der entsprechende Publikationsservice wird sich mit Ihnen in Verbindung setzen, um die weiteren Schritte mit Ihnen zu besprechen. Bitte beachten Sie, dass es innerhalb von Coscine keine Möglichkeit zur Nachverfolgung des Status gibt.",
+        "Nach erfolgreichem Übermitteln der Informationen, werden alle Projekt Owner benachrichtigt und der ausgewählte Publikationsservice wird sich mit Ihnen in Verbindung setzen, um die weiteren Schritte mit Ihnen zu besprechen. Bitte beachten Sie, dass es innerhalb von Coscine keine Möglichkeit zur Nachverfolgung des Status Ihrer Anfrage gibt.",
       title: "Anfrage Datenveröffentlichung",
       tab1: "Informationen",
       tab2: "Anfrage Datenveröffentlichung",
@@ -142,11 +142,11 @@ export default {
     // DataPublicationProjectData.vue
     dataPublicationForm: {
       description1:
-        "Um mit dem von Ihnen bevorzugten Publikationsservice Kontakt aufzunehmen, verwenden Sie bitte das nachstehende Formular. Wenn Sie unsicher sind oder Ihren gewünschten Dienst nicht in der Liste sehen, zögern Sie nicht, sich an das FDM-Team Ihrer Organisation per {email} zu wenden.",
+        "Um mit dem von Ihnen ausgewählten Publikationsservice Kontakt aufzunehmen, verwenden Sie bitte das nachstehende Formular. Wenn Sie unsicher sind oder den Publikationsservice Ihrer Heimatorganisation nicht in der Liste sehen, zögern Sie nicht, sich an das FDM-Team Ihrer Heimatorganisation per {email} zu wenden.",
       description2:
-        "Bitte wählen Sie unten die entsprechenden Ressourcen aus. Wenn die Projektinformationen geändert werden müssen, gehen Sie bitte auf die Seite mit den Projekteinstellungen.",
+        "Bitte wählen Sie unten die entsprechenden Ressourcen aus, deren Meta(Daten) Sie mit Unterstützung Ihrer Heimatorganisation veröffentlichen möchten. Wenn die Projektinformationen geändert werden müssen, gehen Sie bitte auf die Seite mit den Projekteinstellungen.",
       description3:
-        "Fügen Sie bitte eine personalisierte Nachricht oder spezielle Wünsche für die Publikationsberatung hinzu.",
+        "Hier können Sie noch eine personalisierte Nachricht oder individuelle Wünsche für die Publikationsberatung hinzufügen.",
       service: "Publikationsservice",
       labelSymbol: ":",
       requesterName: "Antragstellende Person",
@@ -182,7 +182,7 @@ export default {
     // DataPublicationSummary.vue
     dataPublicationSummary: {
       description:
-        "Die folgenden Informationen werden an den Publikationsservice und die Projekt-Besitzer übermittelt. Zusätzlich werden die Projektbeschreibung und für die ausgewählten Ressourcen die Metadatenprofile, PIDs, Ressourcenbeschreibung und Disziplin sowie der Gesamtdatenumfang abgeschickt.",
+        "Die folgenden Informationen werden an den Publikationsservice und die Projekt Owner übermittelt. Zusätzlich werden die Projektbeschreibung und für die ausgewählten Ressourcen die Metadatenprofile, PIDs, Ressourcenbeschreibungen und Disziplinen sowie der Gesamtdatenumfang abgeschickt.",
       toastTitle: "Antrag versendet",
       toastBody: "Die Anfrage zur Datenveröffentlichung wurde versendet.",
     },

src/modules/project/i18n/en.ts

@@ -125,9 +125,9 @@ export default {
     dataPublication: {
       continue: "Continue",
       description1:
-        "Publication advisory services are designed to assist you with your data publication needs. Coscine facilitates this by connecting you to a data publication service of a partner university and simultaneously forwarding first details about your project, resources and the data you wish to publish.",
+        "Publication services from participating organisations are available to support you in publishing your data. Coscine offers you the service of contacting the data publication service of your home organisation and at the same time forwarding initial information about your project, your resources and the data you wish to publish.",
       description2:
-        "Once your request has been successfully submitted, all project owners will be notified and the relevant publication advisory service will contact you to discuss the subsequent stages. Please note that Coscine does not offer a way to track the status of your submitted request.",
+        "Once your request has been successfully submitted, all project owners will be notified and the selected publication advisory service will contact you to discuss the subsequent stages. Please note that Coscine does not offer a way to track the status of your submitted request.",
       title: "Data Publication Request",
       tab1: "Information",
       tab2: "Data Publication Request",
@@ -136,11 +136,11 @@ export default {
     // DataPublicationProjectData.vue
     dataPublicationForm: {
       description1:
-        "To initiate contact with your preferred publication advisory service, please utilize the form below. If you are unsure or do not see your desired service in the list, do not hesitate to reach out to the RDM team of your organization via {email}.",
+        "To initiate contact with your selected publication advisory service, please utilize the form below. If you are unsure or do not see the publication advisory service of your home organization in the list, do not hesitate to reach out to the RDM team of your home organization via {email}.",
       description2:
-        "Please select the relevant resources below. If the project information has to be changed, please go to the project settings page.",
+        "Please select the relevant resources below, whose meta(data) you would like to publish with the support of your home organisation. If the project information has to be changed, please go to the project settings page.",
       description3:
-        "Feel free to add a personalized message or any specific requests for the publication advisory service.",
+        "Here you can add a personalized message or special individual requests for the publication advisory service.",
       service: "Data Publication Service",
       labelSymbol: ":",
       requesterName: "Requester Name",
@@ -176,7 +176,7 @@ export default {
     // DataPublicationSummary.vue
     dataPublicationSummary: {
       description:
-        "The following information will be submitted to the Data Publication Service and the project owners. In addition the project description and for the selected resources the Metadata Profiles, PIDs, resource description and discipline as well as the total data size will be submitted.",
+        "The following information will be submitted to the Data Publication Service and the project owners. In addition the project description and for the selected resources the Metadata Profiles, PIDs, resource descriptions and disciplines as well as the total data size will be submitted.",
       toastTitle: "Publication Request sent",
       toastBody: "The Publication Request was sent.",
     },

src/modules/project/pages/CreateProject.spec.ts

+/* Testing imports */
+import { mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+
+/* Vue i18n */
+import i18n, { def } from "@/plugins/vue-i18n";
+import { ProjectI18nMessages } from "@/modules/project/i18n/index";
+i18n.global.availableLocales.forEach((locale) => {
+  i18n.global.setLocaleMessage(locale, def[locale]); // default locale messages
+  i18n.global.mergeLocaleMessage(locale, ProjectI18nMessages[locale]); // append the locale messages for the component
+});
+
+/* Additional Dependencies */
+
+/* Tested Component */
+import CreateProject from "./CreateProject.vue";
+
+/* Import of relevant mockup data */
+import { testProjectForCreation } from "@/data/mockup/testProject";
+
+describe("CreateProject.vue", () => {
+  /* Describe Pre-initialization steps */
+
+  /* Description of the test */
+  test("ParentId from project is not saved to local storage.", async () => {
+    // Test Pre-initialization steps
+
+    // Mount the Component
+    const wrapper = mount(CreateProject, {
+      pinia: createTestingPinia({
+        createSpy: vitest.fn,
+      }),
+    });
+    await wrapper.vm.$nextTick();
+
+    wrapper.vm.projectForCreation = Object.assign({}, testProjectForCreation);
+
+    // Check initial state of parentId
+    expect(wrapper.vm.projectForCreation.parentId).toBeDefined();
+
+    await wrapper.vm.$nextTick();
+    // save to local storage
+    await wrapper.vm.saveProjectForCreationLocalStorage();
+
+    await wrapper.vm.$nextTick();
+
+    // read local storage
+
+    const projectJson = localStorage.getItem(wrapper.vm.projectLocalStorageKey);
+    let project = null;
+
+    if (projectJson != null) {
+      project = JSON.parse(projectJson);
+    }
+    // assert
+    expect(projectJson).not.toBeNull();
+    expect(project).not.toBeNull();
+    expect(project.projectId).toBeUndefined();
+
+    wrapper.unmount();
+  });
+
+  test("ParentId from project is correct after load from local storage.", async () => {
+    /* Test Pre-initialization steps */
+
+    /* Mount the Component */
+    const wrapper = mount(CreateProject, {
+      pinia: createTestingPinia({
+        createSpy: vitest.fn,
+      }),
+    });
+    await wrapper.vm.$nextTick();
+
+    wrapper.vm.projectForCreation = Object.assign({}, testProjectForCreation);
+    await wrapper.vm.$nextTick();
+    // Check initial state of parentId
+    expect(wrapper.vm.projectForCreation.parentId).toBeDefined();
+
+    await wrapper.vm.$nextTick();
+    // save to local storage
+    await wrapper.vm.saveProjectForCreationLocalStorage();
+
+    await wrapper.vm.$nextTick();
+
+    // change parentId after save to the local storage
+    const testParentId = "123-abc-def-456";
+    wrapper.vm.projectForCreation.parentId = testParentId;
+
+    await wrapper.vm.$nextTick();
+    // load from local storage
+    await wrapper.vm.restoreProjectForCreationLocalStorage();
+    await wrapper.vm.$nextTick();
+
+    // check if set parentId is still the one we set
+    expect(wrapper.vm.projectForCreation.parentId).toBe(testParentId);
+    wrapper.unmount();
+  });
+});

src/modules/project/pages/CreateProject.vue

@@ -194,14 +194,22 @@ export default defineComponent({
       const projectJson = localStorage.getItem(this.projectLocalStorageKey);
       if (projectJson != null) {
         const project = JSON.parse(projectJson);
+        // save the parentId so we dont lose it with the restore
+        const parentIdCopy = this.projectForCreation.parentId;
         Object.assign(this.projectForCreation, project); // Use this to only copy the properties
+        this.projectForCreation.parentId = parentIdCopy;
       }
     },
     /***
      * Saves the projectForCreation to the local storage.
+     * Does not save the values for "parentId" and "copyOwnersFromParent".
      */
     async saveProjectForCreationLocalStorage(): Promise<void> {
-      const projectJson = JSON.stringify(this.projectForCreation);
+      const projectCopy = Object.assign({}, this.projectForCreation);
+      // remove the parentId and copyOwnersFromParent, as those could lead to problems when restoring with another project as parent.
+      projectCopy.parentId = undefined;
+      projectCopy.copyOwnersFromParent = undefined;
+      const projectJson = JSON.stringify(projectCopy);
       localStorage.setItem(this.projectLocalStorageKey, projectJson);
     },
     /***

src/modules/project/pages/ProjectPage.vue

@@ -40,7 +40,9 @@
                   :key="index"
                   :title="resource.displayName"
                   type="resource"
-                  :badge-visibility="resource.archived || resource.maintenanceMode"
+                  :badge-visibility="
+                    resource.archived || resource.maintenanceMode
+                  "
                   :badge-text="badgeText(resource)"
                   :to="toResource(resource)"
                   :to-settings="toResourceSettings(resource)"
@@ -211,7 +213,7 @@ export default defineComponent({
         this.$router.push(to);
       } else {
         console.error(
-          `Slug for ${project.displayName} is possibly undefined...`
+          `Slug for ${project.displayName} is possibly undefined...`,
         );
       }
     },
@@ -222,7 +224,7 @@ export default defineComponent({
         this.$router.push(to);
       } else {
         console.warn(
-          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`
+          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`,
         );
       }
     },
@@ -233,7 +235,7 @@ export default defineComponent({
         this.$router.push(to);
       } else {
         console.warn(
-          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`
+          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`,
         );
       }
     },

src/modules/project/store.ts

@@ -509,6 +509,42 @@ export const useProjectStore = defineStore({
             quota: desiredReservedQuota,
           };
         }
+        // Evaluate general resource type - DataStorage.nrw (Web)
+        else if (
+          resource.type?.generalType ===
+          CoscineResourceTypes.DataStorageNrwWeb.General
+        ) {
+          resourceTypeOptionsForManipulationDto.dataStorageNrwWebResourceTypeOptions =
+            {
+              quota: desiredReservedQuota,
+            };
+        }
+        // Evaluate general resource type - DataStorage.nrw (S3)
+        else if (
+          resource.type?.generalType ===
+          CoscineResourceTypes.DataStorageNrwS3.General
+        ) {
+          resourceTypeOptionsForManipulationDto.dataStorageNrwS3ResourceTypeOptions =
+            {
+              quota: desiredReservedQuota,
+            };
+        }
+        // Evaluate general resource type - DataStorage.nrw (WORM)
+        else if (
+          resource.type?.generalType ===
+          CoscineResourceTypes.DataStorageNrwS3Worm.General
+        ) {
+          resourceTypeOptionsForManipulationDto.dataStorageNrwS3WormResourceTypeOptions =
+            {
+              quota: desiredReservedQuota,
+            };
+        } else {
+          // Log error for unsupported resource type
+          console.error(
+            "Resource type not supported for setting resource size: ",
+            resource.type?.generalType,
+          );
+        }
         // Assign the correct resource type options
         resourceForUpdate.resourceTypeOptions =
           resourceTypeOptionsForManipulationDto;

src/modules/resource/ResourceModule.vue

@@ -56,7 +56,7 @@ export default defineComponent({
     },
     resourceTypeInformation(): ResourceTypeInformationDto | undefined {
       return this.resourceStore.enabledResourceTypes?.find(
-        (resourceType) => resourceType.id === this.resource?.type?.id
+        (resourceType) => resourceType.id === this.resource?.type?.id,
       );
     },
     moduleIsReady(): boolean {
@@ -121,7 +121,7 @@ export default defineComponent({
         await this.resourceStore.retrieveUnsetResource(
           this.project.id,
           this.resource,
-          route
+          route,
         );
         if (this.resource) {
           if (!this.resourceStore.currentFullApplicationProfile) {
@@ -155,7 +155,7 @@ export default defineComponent({
               ];
             i18n.global.mergeLocaleMessage(
               "de",
-              cloneDeep(resourceTypeDefinition)
+              cloneDeep(resourceTypeDefinition),
             );
           }
         }
@@ -175,7 +175,7 @@ export default defineComponent({
               ];
             i18n.global.mergeLocaleMessage(
               "en",
-              cloneDeep(resourceTypeDefinition)
+              cloneDeep(resourceTypeDefinition),
             );
           }
         }

src/modules/resource/components/create-resource/ConfigurationSizeSlider.vue

@@ -7,18 +7,18 @@
       <div class="d-flex align-items-center">
         <b-form-input
           id="quotaInput"
-          v-model="v$.sliderValue.$model"
+          v-model="v$.quotaValue.$model"
           class="w-40"
           type="number"
           :min="min"
           :max="max"
           :step="1"
-          :state="v$.sliderValue.$anyDirty && !v$.sliderValue.$error"
+          :state="v$.quotaValue.$anyDirty && !v$.quotaValue.$error"
           oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"
         />
         <span class="ml-2">GB of {{ max }} GB</span>
       </div>
-      <div v-if="v$.sliderValue.$error" class="text-danger">
+      <div v-if="v$.quotaValue.$error" class="text-danger">
         <p>
           {{
             $t("page.createResource.configuration.exceededQuotaWarning", {
@@ -73,19 +73,25 @@ const coscineResourceTypes = CoscineResourceTypes;
 
 const min = ref(1);
 const max = ref(1);
-const sliderValue = ref(min.value); // used to set the Resource Size
+const quotaValue = ref(min.value); // used to set the Resource Size
 
 // Define validations
-const rules = reactive(() => ({
-  sliderValue: {
+const state = reactive({
+  quotaValue: quotaValue,
+});
+const rules = computed(() => {
+  // Keep as a computed property to ensure that the min and max values are always up to date
+  return {
+    quotaValue: {
       required,
       numeric,
       minValue: minValue(min.value),
       maxValue: maxValue(max.value),
     },
-}));
+  };
+});
 
-const v$ = useVuelidate(rules, reactive({ sliderValue }));
+const v$ = useVuelidate(rules, state);
 
 const isOwner = computed(() => {
   return projectStore.currentUserRoleIsOwner;
@@ -96,14 +102,12 @@ watch(
   () => {
     initTabContent();
     retrieveResourceTypeQuota();
-    // Timeout deals with otherwise incorrect updates
-    setTimeout(() => setResourceSize(sliderValue.value), 1);
   },
   { deep: true },
 );
 
-watch(sliderValue, () => {
-  setResourceSize(sliderValue.value);
+watch(quotaValue, () => {
+  setResourceSize(quotaValue.value);
 });
 
 /**
@@ -129,12 +133,12 @@ const retrieveResourceTypeQuota = () => {
           max.value = 0;
         }
         // Prevent above maximum values
-        if (sliderValue.value > max.value) {
-          sliderValue.value = max.value;
+        if (quotaValue.value > max.value) {
+          quotaValue.value = max.value;
         }
         // Set slider to 1 when maximum is available
-        if (max.value > 0 && sliderValue.value === 0) {
-          sliderValue.value = 1;
+        if (max.value > 0 && quotaValue.value === 0) {
+          quotaValue.value = 1;
         }
       }
     }
@@ -145,33 +149,30 @@ const retrieveResourceTypeQuota = () => {
  * Initialize the tab content based on the resource type options
  */
 const initTabContent = () => {
-  if (sliderValue.value <= 0) {
+  if (quotaValue.value <= 0) {
     // Handle general resource type - RDS
     if (
       resourceForCreation.value.resourceTypeOptions?.rdsResourceTypeOptions
         ?.quota?.value !== undefined
     ) {
-      sliderValue.value =
-        resourceForCreation.value.resourceTypeOptions?.rdsResourceTypeOptions
-          ?.quota?.value;
+      quotaValue.value =
+        resourceForCreation.value.resourceTypeOptions?.rdsResourceTypeOptions?.quota?.value;
     }
     // Handle general resource type - RDS S3
     else if (
       resourceForCreation.value.resourceTypeOptions?.rdsS3ResourceTypeOptions
         ?.quota?.value !== undefined
     ) {
-      sliderValue.value =
-        resourceForCreation.value.resourceTypeOptions?.rdsS3ResourceTypeOptions
-          ?.quota?.value;
+      quotaValue.value =
+        resourceForCreation.value.resourceTypeOptions?.rdsS3ResourceTypeOptions?.quota?.value;
     }
     // Handle general resource type - RDS S3 WORM
     else if (
       resourceForCreation.value.resourceTypeOptions
         ?.rdsS3WormResourceTypeOptions?.quota?.value !== undefined
     ) {
-      sliderValue.value =
-        resourceForCreation.value.resourceTypeOptions
-          ?.rdsS3WormResourceTypeOptions?.quota?.value;
+      quotaValue.value =
+        resourceForCreation.value.resourceTypeOptions?.rdsS3WormResourceTypeOptions?.quota?.value;
     }
   }
 };
@@ -212,6 +213,42 @@ const setResourceSize = (size: number) => {
       quota: { value: size, unit: QuotaUnit.GibiByte },
     };
   }
+  // Evaluate general resource type - DataStorage.nrw (Web)
+  else if (
+    props.selectedResourceTypeInformation.generalType ===
+    coscineResourceTypes.DataStorageNrwWeb.General
+  ) {
+    resourceTypeOptionsForManipulationDto.dataStorageNrwWebResourceTypeOptions =
+      {
+        quota: { value: size, unit: QuotaUnit.GibiByte },
+      };
+  }
+  // Evaluate general resource type - DataStorage.nrw (S3)
+  else if (
+    props.selectedResourceTypeInformation.generalType ===
+    coscineResourceTypes.DataStorageNrwS3.General
+  ) {
+    resourceTypeOptionsForManipulationDto.dataStorageNrwS3ResourceTypeOptions =
+      {
+        quota: { value: size, unit: QuotaUnit.GibiByte },
+      };
+  }
+  // Evaluate general resource type - DataStorage.nrw (WORM)
+  else if (
+    props.selectedResourceTypeInformation.generalType ===
+    coscineResourceTypes.DataStorageNrwS3Worm.General
+  ) {
+    resourceTypeOptionsForManipulationDto.dataStorageNrwS3WormResourceTypeOptions =
+      {
+        quota: { value: size, unit: QuotaUnit.GibiByte },
+      };
+  } else {
+    // Log error for unsupported resource type
+    console.error(
+      "Resource type not supported for setting resource size: ",
+      props.selectedResourceTypeInformation.generalType,
+    );
+  }
   resourceForCreation.value.resourceTypeOptions =
     resourceTypeOptionsForManipulationDto;
 };
@@ -228,6 +265,6 @@ const toGiB = (quota: QuotaDto): number => {
 
 initTabContent();
 retrieveResourceTypeQuota();
-setResourceSize(sliderValue.value);
+setResourceSize(quotaValue.value);
 v$.value.$touch();
 </script>

src/modules/resource/components/resource-page/FilesView.vue

@@ -13,7 +13,7 @@
         id="resourceViewTable"
         ref="adaptTable"
         v-model:sort-by="sortBy"
-        v-model:selectedItems="selectedItems"
+        v-model:selected-items="selectedItems"
         :fields="headers"
         :items="folderContents"
         :busy="isBusy"

src/modules/resource/components/resource-page/MetadataManager.vue

@@ -619,7 +619,7 @@ export default defineComponent({
           (result) => {
             return {
               path: result.path
-                ? this.getPropertyName(result.path) ?? result.path.value
+                ? (this.getPropertyName(result.path) ?? result.path.value)
                 : "",
               term: result.term ? result.term.value : "",
               message: result.message.map((entry) => entry.value),

src/modules/resource/components/settings/resource-type/Generic.vue

@@ -123,6 +123,24 @@ export default defineComponent({
         this.resource?.type?.options?.linkedData
       ) {
         return this.resource?.type?.options?.linkedData;
+      } else if (
+        this.resource?.type?.generalType ===
+          this.coscineResourceTypes.DataStorageNrwWeb.General &&
+        this.resource?.type?.options?.dataStorageNrwWeb
+      ) {
+        return this.resource?.type?.options?.dataStorageNrwWeb;
+      } else if (
+        this.resource?.type?.generalType ===
+          this.coscineResourceTypes.DataStorageNrwS3.General &&
+        this.resource?.type?.options?.dataStorageNrwS3
+      ) {
+        return this.resource?.type?.options?.dataStorageNrwS3;
+      } else if (
+        this.resource?.type?.generalType ===
+          this.coscineResourceTypes.DataStorageNrwS3Worm.General &&
+        this.resource?.type?.options?.dataStorageNrwS3Worm
+      ) {
+        return this.resource?.type?.options?.dataStorageNrwS3Worm;
       }
 
       return {};

src/modules/resource/components/settings/resource-type/GitLab.vue

@@ -42,6 +42,7 @@
       :is-loading="isLoading"
       type="input"
     >
+      <div class="input-group">
         <b-form-input
           id="Project"
           :model-value="
@@ -53,6 +54,15 @@
           readonly
           :disabled="true"
         />
+        <b-button
+          v-if="gitlabInformation.project"
+          :href="gitlabInformation.project.webUrl"
+          target="_blank"
+          class="rounded-end-2 ml-2"
+        >
+          <b-icon-box-arrow-up-right />
+        </b-button>
+      </div>
     </CoscineFormGroup>
 
     <!-- Access Token -->