.yarnrc.yml

@@ -7,16 +7,16 @@ packageExtensions:
       "vue-template-compiler": "*"
   "vue-i18n@*":
     dependencies:
-      "vue": "^2.6.14"
+      "vue": "~2.6.14"
   "vue-router@*":
     dependencies:
-      "vue": "^2.6.14"  
+      "vue": "~2.6.14"  
   "pinia@*":
     dependencies:
       "@vue/composition-api": "^1.4.5"
   "bootstrap-vue@*":
     dependencies:
-      "vue": "^2.6.14"
+      "vue": "~2.6.14"
       "jquery": "*"
   "vue-eslint-parser@*":
     dependencies:

package.json

 {
   "name": "ui",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -10,7 +10,7 @@
     "lint:fix": "eslint './src/**/*.{js,ts,tsx,vue,md}' --fix"
   },
   "dependencies": {
-    "@coscine/api-client": "^2.3.0",
+    "@coscine/api-client": "^2.4.0",
     "@coscine/form-generator": "^2.1.0",
     "@rdfjs-elements/formats-pretty": "^0.4.3",
     "@rdfjs/data-model": "^2.0.0",
@@ -91,5 +91,5 @@
     "vite-plugin-windicss": "^1.8.3",
     "vue-template-compiler": "~2.6.14"
   },
-  "packageManager": "yarn@3.2.2"
+  "packageManager": "yarn@3.2.3"
 }

src/components/coscine/CoscineCard.vue

@@ -6,7 +6,7 @@
     @click.prevent="openCard()"
   >
     <!-- Stretched Link (Card) -->
-    <a v-if="!isLoading" :href="hrefFromRouter(to)" class="stretched-link" />
+    <a v-if="!isLoading && !isDisabled" :href="hrefFromRouter(to)" class="stretched-link" />
 
     <!-- Badge -->
     <template #header>
@@ -25,7 +25,7 @@
     >
       <b-icon icon="pencil-fill" />
       <!-- Stretched Link (Settings) -->
-      <a :href="hrefFromRouter(toSettings)" class="stretched-link" />
+      <a v-if="!isLoading && !isDisabled"  :href="hrefFromRouter(toSettings)" class="stretched-link" />
     </b-button>
 
     <b-card-body class="pt-0 pb-2 px-2">
@@ -84,6 +84,10 @@ export default defineComponent({
       default: false,
       type: Boolean,
     },
+    isDisabled: {
+      default: false,
+      type: Boolean,
+    },
   },
 
   data() {

src/modules/project/i18n/de.ts

@@ -96,6 +96,9 @@ export default {
       subProject: "Unterprojekt | Unterprojekte",
       member: "Mitglied | Mitglieder",
       addResource: "Ressource hinzufügen",
+      tooltipDisabled:
+        "Fügen Sie bitte {linkToUserProfile} Ihre Emailadresse hinzu und verfizieren Sie diese, um eine neue Ressource anlegen zu können.",
+      tooltipHere: "hier",
       members: {
         toProjectMembers: "Benutzerverwaltung...",
 

src/modules/project/i18n/en.ts

@@ -91,6 +91,9 @@ export default {
       subProject: "Sub-Project | Sub-Projects",
       member: "Member | Members",
       addResource: "Add Resource",
+      tooltipDisabled:
+        "Please add and verify your email address {linkToUserProfile} to create a new resource.",
+      tooltipHere: "here",
       members: {
         toProjectMembers: "Manage Members....",
 

src/modules/project/pages/ProjectPage.vue

@@ -8,11 +8,27 @@
         <div class="list">
           <b-card-group id="card-deck" deck>
             <CoscineCard
+              id="addResource"
+              :style="cardStyleAddResource"
               :title="$t('page.project.addResource')"
               type="create"
               :to="toCreateResource()"
               @open-card="openCreateResource($event)"
+              :isDisabled="!isEmailValid"
             />
+            <b-tooltip target="addResource">
+              <i18n v-if="!isEmailValid" path="page.project.tooltipDisabled">
+                <template #linkToUserProfile>
+                  <router-link
+                    :to="{ name: 'userprofile' }"
+                    class="font-weight-bold"
+                  >
+                    {{ $t("page.project.tooltipHere") }}
+                  </router-link>
+                </template>
+              </i18n>
+            </b-tooltip>
+
             <!-- Loading Card Placeholder -->
             <CoscineCard
               v-if="!resources"
@@ -27,6 +43,7 @@
               :key="index"
               :title="resource.displayName"
               type="resource"
+              :style="cardStyle"
               :badge-visibility="resource.archived"
               :badge-text="$t('default.archived')"
               :to="toResource(resource)"
@@ -92,6 +109,8 @@ import useProjectStore from "../store";
 // import the main store
 import useMainStore from "@/store/index";
 import useResourceStore from "@/modules/resource/store";
+import useUserStore from "@/modules/user/store";
+import type { UserObject } from "@coscine/api-client/dist/types/Coscine.Api.User";
 
 export default defineComponent({
   components: {
@@ -101,8 +120,17 @@ export default defineComponent({
     const mainStore = useMainStore();
     const projectStore = useProjectStore();
     const resourceStore = useResourceStore();
+    const userStore = useUserStore();
 
-    return { mainStore, projectStore, resourceStore };
+    return { mainStore, projectStore, resourceStore, userStore };
+  },
+  data() {
+    return {
+      card: {
+        backgroundHoverActive: "#cccccc",
+        backgroundHoverInactive: "transparent",
+      }
+    };
   },
 
   computed: {
@@ -115,6 +143,40 @@ export default defineComponent({
     resources(): ResourceObject[] | null {
       return this.projectStore.currentResources;
     },
+    isEmailValid(): boolean {
+      if (
+        this.user &&
+        this.user.emailAddress &&
+        this.user.emailAddress.trim() !== ""
+      ) {
+        // Assume API contains only valid email addresses
+        return true;
+      } else {
+        return false;
+      }
+    },
+    user(): UserObject | null {
+      return this.userStore.user;
+    },
+    cardStyle() {
+      return {
+        "--coscine_card-background-color--hover":
+          this.card.backgroundHoverActive,
+      };
+    },
+    cardStyleAddResource() {
+      if (this.isEmailValid) {
+        return {
+          "--coscine_card-background-color--hover":
+            this.card.backgroundHoverActive
+        };
+      } else {
+        return {
+          "--coscine_card-background-color--hover":
+            this.card.backgroundHoverInactive
+        };
+      }
+    },
   },
 
   methods: {
@@ -151,9 +213,11 @@ export default defineComponent({
       this.$router.push(to);
     },
     openCreateResource(to: RawLocation) {
+      if (this.isEmailValid) {
         // Set current resource ID to null
         this.resourceStore.currentId = null;
         this.$router.push(to);
+      }
     },
     openProject(to: RawLocation, project: ProjectObject) {
       if (project.slug) {
@@ -203,4 +267,8 @@ export default defineComponent({
   /* Prevents Members list to become wider */
   max-width: 27rem;
 }
+
+.coscine_card:hover {
+  background-color: var(--coscine_card-background-color--hover);
+}
 </style>

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

@@ -49,7 +49,6 @@
             <b-button
               variant="outline-primary"
               name="createAP"
-              :disabled="!isEmailValid"
               @click="$bvModal.show('createAPModal')"
               >{{ $t("buttons.create") }}
             </b-button>
@@ -57,20 +56,7 @@
         </div>
 
         <b-tooltip target="createButton" triggers="hover">
-          <i18n
-            v-if="!isEmailValid"
-            path="page.createResource.metadata.createAp.tooltipDisabled"
-          >
-            <template #linkToUserProfile>
-              <router-link
-                :to="{ name: 'userprofile' }"
-                class="font-weight-bold"
-              >
-                {{ $t("page.createResource.metadata.createAp.tooltipHere") }}
-              </router-link>
-            </template>
-          </i18n>
-          <i18n v-else path="page.createResource.metadata.createAp.tooltip" />
+          <i18n path="page.createResource.metadata.createAp.tooltip" />
         </b-tooltip>
       </coscine-form-group>
     </div>
@@ -154,18 +140,6 @@ export default defineComponent({
   },
 
   computed: {
-    isEmailValid(): boolean {
-      if (
-        this.user &&
-        this.user.emailAddress &&
-        this.user.emailAddress.trim() !== ""
-      ) {
-        // Assume API contains only valid email addresses
-        return true;
-      } else {
-        return false;
-      }
-    },
     user(): UserObject | null {
       return this.userStore.user;
     },

src/modules/resource/i18n/de.ts

@@ -37,9 +37,6 @@ export default {
         title: "Schritt 3: @:(form.steps.third)",
         createAp: {
           tooltip: "Anfrage zur Erstellung eines Applikationsprofils",
-          tooltipDisabled:
-            "Fügen Sie bitte {linkToUserProfile} Ihre Emailadresse hinzu und verfizieren Sie diese, um eine Anfrage zur Erstellung von neuen Applikationsprofilen senden zu können",
-          tooltipHere: "hier",
           title: "Erstellung von Applikationsprofilen:",
           body: "Zur Konfiguration und Erstellung eines individuellen Applikationsprofils werden Sie auf eine andere Webseite umgeleitet. {br}{br}Der Review-Prozess für die Bereitstellung des Profils dauert für gewöhnlich einige Tage. Falls nötig, werden Sie von unserem Consulting-Team kontaktiert, um Sie in diesem Prozess zu unterstützen. {br}{br}Möchten Sie zur Webseite zur Erstellung eines Applikationsprofils weiterleitet werden?",
         },

src/modules/resource/i18n/en.ts

@@ -37,9 +37,6 @@ export default {
         title: "Step 3: @:(form.steps.third)",
         createAp: {
           tooltip: "Request for creation of application profiles",
-          tooltipDisabled:
-            "Please add and verify your email address {linkToUserProfile} to request for creation of application profiles",
-          tooltipHere: "here",
           title: "Creation of Application Profiles:",
           body: "You are going to get redirected to another page to configure and create a customized application profile. {br}{br}The review process for provisioning submissions usually takes a few days. If required, you will be contacted by our consulting team to support you with the process. {br}{br}Do you want to get redirected to the application profile creation page?",
         },

src/modules/user/pages/UserProfile.vue

@@ -184,6 +184,9 @@
             id="institute"
             v-model="$v.form.institute.$model"
             type="text"
+            :state="
+              $v.form.institute.$dirty ? !$v.form.institute.$invalid : null
+            "
             :placeholder="
               $t('page.userprofile.form.personalInformation.institute')
             "
@@ -399,9 +402,9 @@ export default defineComponent({
         givenname: { required },
         surname: { required },
         emailAddress: { email, required },
-        organization: {},
-        institute: {},
-        disciplines: {},
+        organization: { required },
+        institute: { required },
+        disciplines: { required },
         language: { id: {} },
       },
     };