@fy-/fws-vue 2.1.6 → 2.1.8

package/components/fws/UserData.vue

@@ -1,46 +1,47 @@
 <script setup lang="ts">
-import useVuelidate from "@vuelidate/core";
-import DefaultInput from "../ui/DefaultInput.vue";
-import { useUserStore } from "../../stores/user";
-import { useRest } from "../../composables/rest";
-import { useEventBus } from "../../composables/event-bus";
-import { computed, reactive, watchEffect } from "vue";
-const rest = useRest();
-const userStore = useUserStore();
-const userData = computed(() => userStore.user);
-const eventBus = useEventBus();
+import useVuelidate from '@vuelidate/core'
+import { computed, reactive, watchEffect } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import { useRest } from '../../composables/rest'
+import { useUserStore } from '../../stores/user'
+import DefaultInput from '../ui/DefaultInput.vue'
+
+const rest = useRest()
+const userStore = useUserStore()
+const userData = computed(() => userStore.user)
+const eventBus = useEventBus()
 const props = withDefaults(
   defineProps<{
-    onCompleted?: (data: any) => void;
+    onCompleted?: (data: any) => void
   }>(),
   {
     onCompleted: () => {},
   },
-);
+)
 const state = reactive({
   userData: {
-    Firstname: userData.value?.Firstname || "",
-    Lastname: userData.value?.Lastname || "",
-    Phone: userData.value?.Phone || "",
+    Firstname: userData.value?.Firstname || '',
+    Lastname: userData.value?.Lastname || '',
+    Phone: userData.value?.Phone || '',
     AcceptedTerms: userData.value?.AcceptedTerms || false,
     EnabledNotifications: userData.value?.EnabledNotifications || false,
     EnabledEmails: userData.value?.EnabledEmails || false,
     EnabledTrainingFromMyData:
       userData.value?.EnabledTrainingFromMyData || false,
   },
-});
+})
 watchEffect(() => {
   state.userData = {
-    Firstname: userData.value?.Firstname || "",
-    Lastname: userData.value?.Lastname || "",
-    Phone: userData.value?.Phone || "",
+    Firstname: userData.value?.Firstname || '',
+    Lastname: userData.value?.Lastname || '',
+    Phone: userData.value?.Phone || '',
     AcceptedTerms: userData.value?.AcceptedTerms || false,
     EnabledNotifications: userData.value?.EnabledNotifications || false,
     EnabledEmails: userData.value?.EnabledEmails || false,
     EnabledTrainingFromMyData:
       userData.value?.EnabledTrainingFromMyData || false,
-  };
-});
+  }
+})
 const rules = {
   userData: {
     Firstname: {},
@@ -52,22 +53,22 @@ const rules = {
     EnabledEmails: {},
     EnabledTrainingFromMyData: {},
   },
-};
-const v$ = useVuelidate(rules, state);
+}
+const v$ = useVuelidate(rules, state)
 
-const patchUser = async () => {
-  eventBus.emit("main-loading", true);
+async function patchUser() {
+  eventBus.emit('main-loading', true)
   if (await v$.value.userData.$validate()) {
-    const response = await rest("User", "PATCH", state.userData);
-    if (response && response.result == "success") {
-      eventBus.emit("user:refresh", true);
+    const response = await rest('User', 'PATCH', state.userData)
+    if (response && response.result === 'success') {
+      eventBus.emit('user:refresh', true)
       if (props.onCompleted) {
-        props.onCompleted(response);
+        props.onCompleted(response)
       }
     }
   }
-  eventBus.emit("main-loading", false);
-};
+  eventBus.emit('main-loading', false)
+}
 </script>
 
 <template>
@@ -100,8 +101,8 @@ const patchUser = async () => {
       :error-vuelidate="v$.userData.Phone.$errors"
     />
     <DefaultInput
-      id="acceptedTermsFWS"
       v-if="!userData?.AcceptedTerms"
+      id="acceptedTermsFWS"
       v-model:checkbox-value="state.userData.AcceptedTerms"
       type="toggle"
       :label="$t('fws_accepted_terms_label')"

package/components/fws/UserFlow.vue

@@ -1,202 +1,210 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { KlbFlowData, KlbUserFlowField } from "@fy-/fws-types";
-import { useRoute, useRouter } from "vue-router";
-import { useTranslation } from "../../composables/translations";
-import { useEventBus } from "../../composables/event-bus";
-import { useUserStore } from "../../stores/user";
-import { useRest, APIResult } from "../../composables/rest";
-import DefaultInput from "../ui/DefaultInput.vue";
-import { ClientOnly } from "../ssr/ClientOnly";
-import { EnvelopeIcon } from "@heroicons/vue/24/solid";
-import { useSessionStorage } from "@vueuse/core";
-const rest = useRest();
+import type { KlbFlowData, KlbUserFlowField } from '@fy-/fws-types'
+import type { APIResult } from '../../composables/rest'
+import { EnvelopeIcon } from '@heroicons/vue/24/solid'
+import { useSessionStorage } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useEventBus } from '../../composables/event-bus'
+import { useRest } from '../../composables/rest'
+import { useTranslation } from '../../composables/translations'
+import { useUserStore } from '../../stores/user'
+import { ClientOnly } from '../ssr/ClientOnly'
+import DefaultInput from '../ui/DefaultInput.vue'
+
+const rest = useRest()
 interface UserFlow extends APIResult {
-  data: KlbFlowData;
+  data: KlbFlowData
 }
-const showEmail = ref<boolean>(false);
+const showEmail = ref<boolean>(false)
 const props = withDefaults(
   defineProps<{
-    returnDefault?: string;
-    forceAction?: string;
-    onSuccess?: Function;
+    returnDefault?: string
+    forceAction?: string
+    onSuccess?: Function
   }>(),
   {
-    mode: "klb",
-    returnDefault: "/",
+    mode: 'klb',
+    returnDefault: '/',
   },
-);
-const isExternalUrl = (url: string) => {
-  return url.startsWith("http://") || url.startsWith("https://");
-};
-type paramsType = {
-  initial: boolean;
-  oauth?: string;
-};
-const initial = ref<boolean>(true);
-const store = useUserStore();
-const route = useRoute();
-const router = useRouter();
-const eventBus = useEventBus();
-const returnTo = ref<string>(props.returnDefault);
-const responseMessage = ref<string | null>(null);
-const responseError = ref<APIResult>();
-const responseReq = ref<string[]>([]);
-const responseFields = ref<Array<KlbUserFlowField>>([]);
-const response = ref<UserFlow>();
-const hasOauth = ref<boolean>(false);
-const fieldsError = ref<Record<string, any>>({});
-const pwdRecoverMailSent = ref<boolean>(false);
-const inputs = ref<InstanceType<typeof DefaultInput>[]>([]);
-const translate = useTranslation();
+)
+function isExternalUrl(url: string) {
+  return url.startsWith('http://') || url.startsWith('https://')
+}
+interface paramsType {
+  initial: boolean
+  oauth?: string
+}
+const initial = ref<boolean>(true)
+const store = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const eventBus = useEventBus()
+const returnTo = ref<string>(props.returnDefault)
+const responseMessage = ref<string | null>(null)
+const responseError = ref<APIResult>()
+const responseReq = ref<string[]>([])
+const responseFields = ref<Array<KlbUserFlowField>>([])
+const response = ref<UserFlow>()
+const hasOauth = ref<boolean>(false)
+const fieldsError = ref<Record<string, any>>({})
+const pwdRecoverMailSent = ref<boolean>(false)
+const inputs = ref<InstanceType<typeof DefaultInput>[]>([])
+const translate = useTranslation()
 const session = useSessionStorage<string | null>(
-  "session",
+  'session',
   route.query.session ? route.query.session.toString() : null,
-);
+)
 const formData = ref<Record<string, any>>({
   return_to: props.returnDefault,
   session: session.value,
   action: props.forceAction ? props.forceAction : undefined,
-});
-const completed = ref(false);
-
-const doTrigger = async (field: any) => {
-  // eslint-disable-next-line
+})
+const completed = ref(false)
 
+async function doTrigger(field: any) {
+  // eslint-disable-next-line no-eval
   const _res = await eval(
     `const _rest = rest; ${field.info.Button_Extra.trigger}`,
-  );
+  )
   if (_res.ethereum) {
-    formData.value.ethereum = _res.ethereum;
-    responseReq.value = [];
-    await userFlow();
+    formData.value.ethereum = _res.ethereum
+    responseReq.value = []
+    await userFlow()
   }
-};
-const userFlow = async (params: paramsType = { initial: false }) => {
-  eventBus.emit("login-loading", true);
-  fieldsError.value = {};
-  responseError.value = undefined;
-  initial.value = params.initial;
+}
+async function userFlow(params: paramsType = { initial: false }) {
+  eventBus.emit('login-loading', true)
+  fieldsError.value = {}
+  responseError.value = undefined
+  initial.value = params.initial
   if (params.initial === false) {
-    let hasError = false;
+    let hasError = false
     responseReq.value.forEach((field) => {
-      if (!formData.value[field] || formData.value[field] == "") {
-        fieldsError.value[field] = translate("vuelidate_validator_req");
-        hasError = true;
+      if (!formData.value[field] || formData.value[field] === '') {
+        fieldsError.value[field] = translate('vuelidate_validator_req')
+        hasError = true
       }
-    });
+    })
     if (hasError) {
-      eventBus.emit("login-loading", false);
-      return;
+      eventBus.emit('login-loading', false)
+      return
     }
-  } else {
-    formData.value.initial = true;
   }
-  hasOauth.value = false;
+  else {
+    formData.value.initial = true
+  }
+  hasOauth.value = false
 
   if (params.oauth) {
-    formData.value.oauth2 = params.oauth;
+    formData.value.oauth2 = params.oauth
   }
 
-  if (route.query.return_to && typeof route.query.return_to == "string") {
+  if (route.query.return_to && typeof route.query.return_to == 'string') {
     returnTo.value = route.query.return_to
       ? route.query.return_to
-      : props.returnDefault;
+      : props.returnDefault
   }
 
-  formData.value.return_to = returnTo.value;
-  response.value = (await rest("User:flow", "POST", formData.value).catch(
+  formData.value.return_to = returnTo.value
+  response.value = (await rest('User:flow', 'POST', formData.value).catch(
     (err: APIResult) => {
-      if (err.token && err.token == "invalid_request_token") {
-        window.location.reload();
+      if (err.token && err.token === 'invalid_request_token') {
+        window.location.reload()
       }
-      responseError.value = err;
+      responseError.value = err
       if (responseError.value.param) {
-        fieldsError.value[responseError.value.param] =
-          responseError.value.token;
+        fieldsError.value[responseError.value.param]
+          = responseError.value.token
       }
-      eventBus.emit("login-loading", false);
-      return;
+      eventBus.emit('login-loading', false)
     },
-  )) as UserFlow;
-  if (response.value?.result == "success") {
-    if (response.value.data.complete == true && response.value.data.user) {
-      store.setUser(response.value.data.user);
+  )) as UserFlow
+  if (response.value?.result === 'success') {
+    if (response.value.data.complete === true && response.value.data.user) {
+      store.setUser(response.value.data.user)
       const actualReturnTo = response.value.data.redirect
         ? response.value.data.redirect
-        : returnTo.value;
-      session.value = null;
+        : returnTo.value
+      session.value = null
       if (isExternalUrl(actualReturnTo)) {
         if (props.onSuccess) {
-          await props.onSuccess();
-        } else {
-          window.location.href = actualReturnTo;
+          await props.onSuccess()
         }
-      } else {
+        else {
+          window.location.href = actualReturnTo
+        }
+      }
+      else {
         if (props.onSuccess) {
-          await props.onSuccess(actualReturnTo);
-        } else {
-          const routeExists = router.resolve(actualReturnTo);
-          if (routeExists.matched.length != 0) router.push(actualReturnTo);
-          else window.location.href = actualReturnTo;
+          await props.onSuccess(actualReturnTo)
+        }
+        else {
+          const routeExists = router.resolve(actualReturnTo)
+          if (routeExists.matched.length !== 0) router.push(actualReturnTo)
+          else window.location.href = actualReturnTo
         }
       }
-      return;
+      return
     }
     if (response.value.data.url) {
-      window.location.href = response.value.data.url;
-      return;
+      window.location.href = response.value.data.url
+      return
     }
     if (response.value.data.redirect && response.value.data.complete) {
       router.push(
-        response.value.data.redirect ? response.value.data.redirect : "/",
-      );
-      return;
+        response.value.data.redirect ? response.value.data.redirect : '/',
+      )
+      return
     }
     formData.value = {
       session: response.value.data.session,
-    };
-    session.value = response.value.data.session;
-    inputs.value = [];
-    responseFields.value = response.value.data.fields;
-    if (response.value.data.message)
-      responseMessage.value = response.value.data.message;
-    responseReq.value = response.value.data.req;
+    }
+    session.value = response.value.data.session
+    inputs.value = []
+    responseFields.value = response.value.data.fields
+    if (response.value.data.message) {
+      responseMessage.value = response.value.data.message
+    }
+    responseReq.value = response.value.data.req
     responseFields.value.forEach((field) => {
-      if (field.type == "oauth2") {
-        hasOauth.value = true;
+      if (field.type === 'oauth2') {
+        hasOauth.value = true
       }
-    });
+    })
     if (!hasOauth.value && responseFields.value.length > 0) {
-      showEmail.value = true;
+      showEmail.value = true
     }
     setTimeout(() => {
-      if (inputs.value.length > 0 && inputs.value[inputs.value.length - 1])
-        inputs.value[inputs.value.length - 1].focus();
-    }, 300);
-  } else {
+      if (inputs.value.length > 0 && inputs.value[inputs.value.length - 1]) {
+        inputs.value[inputs.value.length - 1].focus()
+      }
+    }, 300)
+  }
+  else {
     //
   }
 
-  eventBus.emit("login-loading", false);
-};
+  eventBus.emit('login-loading', false)
+}
 
 onMounted(async () => {
-  await userFlow({ initial: true });
-});
+  await userFlow({ initial: true })
+})
 </script>
+
 <template>
   <ClientOnly>
     <form
-      @submit.prevent="userFlow()"
       v-if="!completed"
       class="fws-login w-full"
+      @submit.prevent="userFlow()"
     >
-      <!--<FyLoader id="klblogin" />-->
+      <!-- <FyLoader id="klblogin" /> -->
       <div class="w-full">
         <h2
-          class="text-lg text-fv-neutral-700 dark:text-fv-neutral-300 px-2"
           v-if="responseMessage"
+          class="text-lg text-fv-neutral-700 dark:text-fv-neutral-300 px-2"
         >
           {{ responseMessage }}
         </h2>
@@ -204,30 +212,31 @@ onMounted(async () => {
           <div class="flex flex-col gap-2 px-2 justify-center py-2">
             <template v-for="field of responseFields" :key="field.id">
               <a
+                v-if="field.type && field.type === 'oauth2' && field.button"
+                href="javascript:void(0);"
+                class="flex border border-fv-neutral-300 dark:border-fv-neutral-700 shadow items-center gap-2 justify-start btn neutral defaults w-full mx-auto !font-semibold"
+                :style="`background: ${
+                  field.button['background-color']
+                }; color: ${$getContrastingTextColor(
+                  field.button['background-color'],
+                )}`"
                 @click="
                   () => {
                     if (field.info.Button_Extra?.trigger) {
                       doTrigger(field);
-                    } else {
+                    }
+                    else {
                       userFlow({ initial: true, oauth: field.id });
                     }
                   }
                 "
-                v-if="field.type && field.type == 'oauth2' && field.button"
-                href="javascript:void(0);"
-                class="flex border border-fv-neutral-300 dark:border-fv-neutral-700 shadow items-center gap-2 justify-start btn neutral defaults w-full mx-auto !font-semibold"
-                :style="`background: ${
-                  field.button['background-color']
-                }; color: ${$getContrastingTextColor(
-                  field.button['background-color'],
-                )}`"
               >
                 <img
                   :key="`${field.label}oauth`"
                   class="h-12 w-12 block p-2 mr-3"
                   :alt="field.info.Name"
                   :src="field.button.logo"
-                />
+                >
                 <div>
                   {{
                     $t("user_flow_signin_with", {
@@ -255,72 +264,72 @@ onMounted(async () => {
                 }}
               </div>
             </button>
-          </div></template
-        >
+          </div>
+        </template>
         <div
-          class="px-2 py-2"
           v-if="forceAction || (showEmail && initial) || !initial"
+          class="px-2 py-2"
         >
           <template v-if="responseFields && responseFields.length > 0">
             <template v-for="field of responseFields" :key="field.label">
               <h3
-                v-if="field.type == 'label'"
+                v-if="field.type === 'label'"
                 class="pt-2 pb-1 text-sm text-fv-neutral-500 dark:text-fv-neutral-400"
                 :class="
-                  field.style == 'error'
+                  field.style === 'error'
                     ? 'text-sm my-2 p-1 font-semibold text-red-800 dark:text-red-300'
                     : ''
                 "
               >
-                <a :href="field.link" v-if="field.link" class="fws-link mb-3">{{
+                <a v-if="field.link" :href="field.link" class="fws-link mb-3">{{
                   field.label
                 }}</a>
-                <span class="mb-2" v-else>{{ field.label }}</span>
+                <span v-else class="mb-2">{{ field.label }}</span>
               </h3>
 
-              <template v-if="field.cat == 'input'">
+              <template v-if="field.cat === 'input'">
                 <template
                   v-if="
-                    field.type == 'text' ||
-                    field.type == 'password' ||
-                    field.type == 'email' ||
-                    field.type == 'mask'
+                    field.type === 'text'
+                      || field.type === 'password'
+                      || field.type === 'email'
+                      || field.type === 'mask'
                   "
                 >
                   <DefaultInput
                     v-if="field.name"
                     :id="field.name"
+                    ref="inputs"
+                    v-model="formData[field.name]"
                     :label="field.label"
                     :mask="field.mask"
                     class="mt-3"
                     :placeholder="
-                      field.name == 'name' ? 'John Doe' : field.label
+                      field.name === 'name' ? 'John Doe' : field.label
                     "
                     :error="fieldsError[field.name]"
                     :type="field.type"
-                    ref="inputs"
-                    v-model="formData[field.name]"
                     :req="responseReq.includes(field.name)"
                   />
                 </template>
               </template>
-              <template v-if="field.type == 'checkbox'">
+              <template v-if="field.type === 'checkbox'">
                 <DefaultInput
                   v-if="field.name"
                   :id="field.name"
+                  v-model:checkbox-value="formData[field.name]"
                   class="mt-3"
                   :label="field.label"
                   :error="fieldsError[field.name]"
                   :type="field.type"
-                  v-model:checkbox-value="formData[field.name]"
                   :req="responseReq.includes(field.name)"
                   :link-icon="field.link"
                 />
               </template>
             </template>
             <div
-              class="text-sm my-2 p-1 font-semibold text-red-800 dark:text-red-300"
               v-if="responseError && responseError.token"
+              class="text-sm my-2 p-1 font-semibold text-red-800 dark:text-red-300"
             >
               {{ $t(responseError.token) }}
             </div>
@@ -333,8 +342,7 @@ onMounted(async () => {
                     pwdRecoverMailSent = false;
                   }
                 "
-                >{{ $t("recover_pwd_link") }}</a
-              >
+              >{{ $t("recover_pwd_link") }}</a>
             </div>
             <button class="btn primary medium mt-4">
               {{ $t("cta_login_next") }}