fix(settings): Have a better email input in member settings

apps/molgenis-components/lib/main.js

@@ -192,6 +192,7 @@ export {
   InputDate,
   InputDateTime,
   InputDecimal,
+  InputEmail,
   InputFile,
   InputGroup,
   InputInt,

apps/molgenis-components/src/client/client.ts

@@ -272,7 +272,7 @@ const fetchSchemaMetaData = async (
     .post(graphqlURL(schemaName), { query: metaDataQuery })
     .then((result: AxiosResponse<{ data: { _schema: ISchemaMetaData } }>) => {
       const schema = result.data.data._schema;
-      if(schemaName == null) {
+      if (schemaName == null) {
         schemaCache.set(currentSchemaName, schema);
       }
       schemaCache.set(schema.name, schema);

apps/molgenis-components/src/components/forms/Info.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
-    <i
-      class="fa fa-question-circle text-primary"
-      @mouseenter="show = true"
-      @mouseleave="show = false"
-    ></i>
+    <span @mouseenter="show = true" @mouseleave="show = false">
+      <i class="fa fa-question-circle text-primary" />
+    </span>
     <div class="tooltip bs-tooltip-top" :class="{ show: show }">
       <span class="tooltip-inner">
         <span> <slot /></span>
@@ -17,6 +15,8 @@
 <style>
 .tooltip {
   margin-top: -50px;
+  pointer-events: none;
+  white-space: nowrap;
 }
 </style>
 

apps/molgenis-components/src/components/forms/InputEmail.vue

@@ -36,14 +36,20 @@ import FormGroup from "./FormGroup.vue";
 import InputGroup from "./InputGroup.vue";
 import BaseInputProps from "./baseInputs/BaseInputProps";
 
-interface InputProps extends BaseInputProps {
-  stringLength?: number;
-  additionalValidValidationStrings?: string[];
-  modelValue: string | null;
-}
-let props = withDefaults(defineProps<InputProps>(), {
-  additionalValidValidationStrings: () => [],
-  stringLength: 255,
+let props = defineProps({
+  ...BaseInputProps,
+  modelValue: {
+    type: String,
+    default: null,
+  },
+  stringLength: {
+    type: Number,
+    default: 255,
+  },
+  additionalValidValidationStrings: {
+    type: Array,
+    default: [],
+  },
 });
 
 const emit = defineEmits(["update:modelValue"]);

apps/molgenis-components/src/components/forms/baseInputs/BaseInputProps.ts

@@ -1,14 +1,39 @@
-export default interface BaseInputProps {
+export default {
   /**
    * Unique identifier https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    * Has no direct EMX2 implementation but can be constructed by concatenating the table name with the field name
    */
-  id: string;
-  name?: string;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  required?: boolean;
-  readonly?: boolean;
-  errorMessage?: string;
-}
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: String,
+    required: false,
+    default: () => null,
+  },
+};

apps/settings/src/components/Members.vue

@@ -15,13 +15,21 @@
       <h5 class="card-title">Manage members</h5>
       <p>Use table below to add, edit or remove members</p>
       <form v-if="canEdit" class="form-inline">
-        <InputString
+        <InputEmail
           id="member-email"
-          class="mb-2 mr-sm-4"
+          class="mb-2 mr-2 mr-sm-4 email-input"
           v-model="editMember['email']"
           placeholder="email address"
           label="Email:"
-        />
+          :additionalValidValidationStrings="['user', 'anonymous']"
+        >
+          <template v-slot:prepend>
+            <Info class="mr-1">
+              Enter valid user email address or use the specials group: 'user'
+              or 'anonymous'
+            </Info>
+          </template>
+        </InputEmail>
         <InputSelect
           id="member-role"
           class="mb-2 mr-sm-4"
@@ -56,10 +64,12 @@ import {
   ButtonAction,
   ButtonAlt,
   TableSimple,
+  Info,
   InputCheckbox,
   InputFile,
   InputSelect,
   InputString,
+  InputEmail,
   LayoutCard,
   MessageError,
   MessageSuccess,
@@ -77,8 +87,10 @@ export default {
     MessageSuccess,
     Spinner,
     LayoutCard,
+    Info,
     InputCheckbox,
     InputString,
+    InputEmail,
     InputSelect,
   },
   props: {
@@ -165,3 +177,15 @@ export default {
   },
 };
 </script>
+
+<style>
+.email-input input {
+  min-width: 20rem !important;
+}
+.email-input .text-danger {
+  margin-left: 0.5rem;
+}
+.email-input .input-group {
+  flex-wrap: nowrap;
+}
+</style>