@fy-/fws-vue 0.3.5 → 0.3.9

package/components/fws/UserData.vue

@@ -0,0 +1,131 @@
+<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();
+const state = reactive({
+  userData: {
+    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 || "",
+    AcceptedTerms: userData.value?.AcceptedTerms || false,
+    EnabledNotifications: userData.value?.EnabledNotifications || false,
+    EnabledEmails: userData.value?.EnabledEmails || false,
+    EnabledTrainingFromMyData:
+      userData.value?.EnabledTrainingFromMyData || false,
+  };
+});
+const rules = {
+  userData: {
+    Firstname: {},
+    Lastname: {},
+    Phone: {},
+    Bio: {},
+    AcceptedTerms: {},
+    EnabledNotifications: {},
+    EnabledEmails: {},
+    EnabledTrainingFromMyData: {},
+  },
+};
+const v$ = useVuelidate(rules, state);
+
+const patchUser = async () => {
+  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);
+    }
+  }
+  eventBus.emit("main-loading", false);
+};
+</script>
+
+<template>
+  <form @submit.prevent="patchUser">
+    <DefaultInput
+      id="firstnameFWS"
+      v-model="state.userData.Firstname"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_firstname_label')"
+      :help="$t('fws_firstname_help')"
+      :error-vuelidate="v$.userData.Firstname.$errors"
+    />
+    <DefaultInput
+      id="lastnameFWS"
+      v-model="state.userData.Lastname"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_lastname_label')"
+      :help="$t('fws_lastname_help')"
+      :error-vuelidate="v$.userData.Lastname.$errors"
+    />
+    <DefaultInput
+      id="phoneFWS"
+      v-model="state.userData.Phone"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_phone_label')"
+      :help="$t('fws_phone_help')"
+      :error-vuelidate="v$.userData.Phone.$errors"
+    />
+    <DefaultInput
+      id="acceptedTermsFWS"
+      v-if="!userData?.AcceptedTerms"
+      v-model:checkbox-value="state.userData.AcceptedTerms"
+      type="toggle"
+      :label="$t('fws_accepted_terms_label')"
+      :help="$t('fws_accepted_terms_help')"
+      :error-vuelidate="v$.userData.AcceptedTerms.$errors"
+    />
+    <DefaultInput
+      id="enabledNotificationsFWS"
+      v-model:checkbox-value="state.userData.EnabledNotifications"
+      type="toggle"
+      :label="$t('fws_enabled_notifications_label')"
+      :help="$t('fws_enabled_notifications_help')"
+      :error-vuelidate="v$.userData.EnabledNotifications.$errors"
+    />
+    <DefaultInput
+      id="enabledEmailsFWS"
+      v-model:checkbox-value="state.userData.EnabledEmails"
+      type="toggle"
+      :label="$t('fws_enabled_emails_label')"
+      :help="$t('fws_enabled_emails_help')"
+      :error-vuelidate="v$.userData.EnabledEmails.$errors"
+    />
+    <DefaultInput
+      id="enabledTrainingFromMyDataFWS"
+      v-model:checkbox-value="state.userData.EnabledTrainingFromMyData"
+      type="toggle"
+      :label="$t('fws_enabled_training_from_my_data_label')"
+      :help="$t('fws_enabled_training_from_my_data_help')"
+      :error-vuelidate="v$.userData.EnabledTrainingFromMyData.$errors"
+    />
+
+    <div class="flex">
+      <button type="submit" class="btn defaults primary">
+        {{ $t("fws_save_user_cta") }}
+      </button>
+    </div>
+  </form>
+</template>

package/components/fws/UserFlow.vue

@@ -176,16 +176,6 @@ const userFlow = async (params: paramsType = { initial: false }) => {
   eventBus.emit("login-loading", false);
 };
 
-const getContrastingTextColor = (backgroundColor: string) => {
-  const r = parseInt(backgroundColor.substring(1, 3), 16);
-  const g = parseInt(backgroundColor.substring(3, 5), 16);
-  const b = parseInt(backgroundColor.substring(5, 7), 16);
-
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-
-  return luminance > 0.5 ? "#000000" : "#FFFFFF";
-};
-
 onMounted(async () => {
   await userFlow({ initial: true });
 });
@@ -223,7 +213,7 @@ onMounted(async () => {
                 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(
+                }; color: ${$getContrastingTextColor(
                   field.button['background-color'],
                 )}`"
               >

package/components/fws/UserOAuth2.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { useTranslation } from "../../composables/translations";
+import { useEventBus } from "../../composables/event-bus";
+import { useUserStore } from "../../stores/user";
+import { useRest, APIResult } from "../../composables/rest";
+import DefaultModal from "../ui/DefaultModal.vue";
+
+import { ref, computed, onMounted } from "vue";
+const rest = useRest();
+const eventBus = useEventBus();
+const userStore = useUserStore();
+const isAuth = computed(() => userStore.isAuth);
+const data = ref();
+const providersData = ref();
+const usedProviders = ref<Record<string, boolean>>({});
+const props = defineProps({
+  returnTo: {
+    type: String,
+    required: false,
+    default: "/user/account?tab=user_settings",
+  },
+});
+const returnTo = ref(props.returnTo);
+if (returnTo.value == "") {
+  returnTo.value = "/user/account?tab=user_settings";
+}
+const getOAuth2Providers = async () => {
+  eventBus.emit("main-loading", true);
+  const d = await rest("User/OAuth2/Providers", "GET");
+  if (d && d.result == "success") {
+    providersData.value = d.data;
+  }
+  eventBus.emit("main-loading", false);
+};
+const getOAuth2Redirect = async (providerUUID: string) => {
+  eventBus.emit("main-loading", true);
+  const d = await rest(`User/OAuth2/Provider/${providerUUID}`, "POST", {
+    ReturnTo: returnTo.value,
+  });
+  if (d && d.result == "success") {
+    window.location.href = d.data;
+  }
+  eventBus.emit("main-loading", false);
+};
+const translate = useTranslation();
+const deleteOAuth2Connection = async (providerUUID: string) => {
+  eventBus.emit("showConfirm", {
+    title: translate("remove_provider_confirm_title"),
+    desc: translate("remove_provider_confirm_desc_warning"),
+    onConfirm: async () => {
+      eventBus.emit("main-loading", true);
+      const d = await rest(`User/OAuth2/Provider/${providerUUID}`, "DELETE");
+      if (d && d.result == "success") {
+        getOAuth2User();
+      }
+      eventBus.emit("main-loading", false);
+    },
+  });
+};
+const getOAuth2User = async () => {
+  eventBus.emit("main-loading", true);
+  if (!isAuth.value) {
+    return;
+  }
+  const d = await rest("User/OAuth2", "GET");
+  usedProviders.value = {};
+  if (d && d.result == "success") {
+    data.value = d.data;
+    data.value.forEach((p: any) => {
+      usedProviders.value[p.ProviderUUID] = true;
+    });
+  }
+  eventBus.emit("main-loading", false);
+};
+onMounted(() => {
+  getOAuth2User();
+  getOAuth2Providers();
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <DefaultModal id="providers" :title="$t('providers_modal_title')">
+      <template v-for="provider in providersData" :key="provider.UUID">
+        <div
+          class="flex items-center gap-3"
+          v-if="!usedProviders[provider.UUID]"
+        >
+          <button
+            @click="
+              () => {
+                getOAuth2Redirect(provider.UUID);
+              }
+            "
+            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: ${
+              provider.Data.Button.button['background-color']
+            }; color: ${$getContrastingTextColor(
+              provider.Data.Button.button['background-color'],
+            )}`"
+          >
+            <img
+              :key="`${provider.Data.Button.label}oauth`"
+              class="h-12 w-12 block p-2 mr-3"
+              :alt="provider.Data.Button.info.Name"
+              :src="provider.Data.Button.button.logo"
+            />
+            <div>
+              {{
+                $t("user_flow_signin_with", {
+                  provider: provider.Data.Button.name,
+                })
+              }}
+            </div>
+          </button>
+        </div>
+      </template>
+    </DefaultModal>
+    <h2 class="h3 flex items-center justify-between">
+      <span>{{ $t("oauth2_providers_title") }}</span>
+      <button
+        class="btn primary medium !py-1 !px-3"
+        @click="
+          () => {
+            $eventBus.emit('providersModal', true);
+          }
+        "
+      >
+        {{ $t("add_oauth2_con_cta") }}
+      </button>
+    </h2>
+    <p
+      class="text-red-900 dark:text-red-300 text-sm bg-red-200/[.2] dark:bg-red-900/[.2] p-2 rounded shadow"
+      v-if="
+        $route.query.error &&
+        $route.query.error === 'user_oauth2_connection_exists'
+      "
+    >
+      {{ $t("oauth2_error_user_oauth2_connection_exists") }}
+    </p>
+    <div v-if="data && data.length == 0">
+      <p>{{ $t("providers_empty") }}</p>
+    </div>
+    <div
+      v-for="provider in data"
+      class="flex items-center gap-3"
+      :key="provider.ProviderUUID"
+    >
+      <img
+        :src="provider.Provider.Button.button.logo"
+        class="w-14 h-14 p-1 rounded-full"
+        :style="`background-color: ${provider.Provider.Button.button['background-color']}`"
+      />
+      <div>
+        <h3 class="text-xl">
+          {{ provider.Provider.Button.name }}
+          <small class="text-xs">({{ provider.ServiceID }})</small>
+        </h3>
+        <div class="flex gap-2 mt-1">
+          <button
+            class="btn danger small"
+            @click="
+              () => {
+                deleteOAuth2Connection(provider.ProviderUUID);
+              }
+            "
+          >
+            {{ $t("remove_oauth2_con_cta") }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/fws/UserProfile.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import useVuelidate from "@vuelidate/core";
+import DefaultInput from "../ui/DefaultInput.vue";
+import DefaultModal from "../ui/DefaultModal.vue";
+import { useUserStore } from "../../stores/user";
+import { useRest } from "../../composables/rest";
+import { useEventBus } from "../../composables/event-bus";
+import { computed, reactive, watchEffect, ref } from "vue";
+import { required } from "@vuelidate/validators";
+import VuePictureCropper, { cropper } from "vue-picture-cropper";
+import { Uploader } from "@fy-/fws-js";
+
+const props = withDefaults(
+  defineProps<{
+    imageDomain?: string;
+  }>(),
+  {
+    imageDomain: "https://s.nocachenocry.com",
+  },
+);
+const rest = useRest();
+const userStore = useUserStore();
+const userData = computed(() => userStore.user);
+const eventBus = useEventBus();
+const state = reactive({
+  userData: {
+    Username: userData.value?.UserProfile?.Username || "",
+    Gender: userData.value?.UserProfile?.Gender || "",
+    Bio: userData.value?.UserProfile?.Bio || "",
+    Birthdate: userData.value?.UserProfile?.Birthdate || "",
+    PublicGender: userData.value?.UserProfile?.PublicGender || false,
+    PublicBio: userData.value?.UserProfile?.PublicBio || false,
+    PublicBirthdate: userData.value?.UserProfile?.PublicBirthdate || false,
+  },
+});
+watchEffect(() => {
+  state.userData = {
+    Username: userData.value?.UserProfile?.Username || "",
+    Gender: userData.value?.UserProfile?.Gender || "",
+    Bio: userData.value?.UserProfile?.Bio || "",
+    Birthdate: userData.value?.UserProfile?.Birthdate
+      ? new Date(userData.value?.UserProfile?.Birthdate.unixms)
+          .toISOString()
+          .split("T")[0]
+      : "",
+    PublicGender: userData.value?.UserProfile?.PublicGender || false,
+    PublicBio: userData.value?.UserProfile?.PublicBio || false,
+    PublicBirthdate: userData.value?.UserProfile?.PublicBirthdate || false,
+  };
+});
+const rules = {
+  userData: {
+    Username: {
+      required: required,
+    },
+    Gender: {},
+    Bio: {},
+    Birthdate: {},
+    PublicGender: {},
+    PublicBio: {},
+    PublicBirthdate: {},
+  },
+};
+const v$ = useVuelidate(rules, state);
+
+const patchUser = async () => {
+  eventBus.emit("main-loading", true);
+  if (await v$.value.userData.$validate()) {
+    const data = { ...state.userData };
+    const birtdate = new Date(`${data.Birthdate}T00:00:00Z`);
+    const birtdateAtUnixms = birtdate.getTime();
+    // @ts-ignore
+    data.Birthdate = birtdateAtUnixms;
+    const response = await rest("User/_Profile", "PATCH", data);
+    if (response && response.result == "success") {
+      eventBus.emit("user:refresh", true);
+    }
+  }
+  eventBus.emit("main-loading", false);
+};
+const uploadInput = ref<HTMLInputElement | null>(null);
+const pic = ref<string>("");
+const cropResult = reactive({
+  dataURL: "",
+  blobURL: "",
+});
+const uploader = ref(new Uploader());
+
+async function getCropResult() {
+  if (!cropper) return;
+  const base64 = cropper.getDataURL({});
+  const blob: Blob | null = await cropper.getBlob();
+  if (!blob) return;
+  eventBus.emit("main-loading", true);
+
+  const file = await cropper.getFile({
+    fileName: "avatar-" + userData.value?.UUID,
+  });
+
+  cropResult.dataURL = base64;
+  cropResult.blobURL = URL.createObjectURL(blob);
+  if (file) {
+    uploader.value.addFile(file);
+  }
+  const fileUploadCallback = (response: any) => {
+    eventBus.emit("avCropModal", false);
+    eventBus.emit("main-loading", false);
+    eventBus.emit("user:refresh", true);
+  };
+  uploader.value.startUpload(`/_special/rest/User/_Avatar`, fileUploadCallback);
+}
+
+function selectFile(e: Event) {
+  pic.value = "";
+  cropResult.dataURL = "";
+  cropResult.blobURL = "";
+
+  const { files } = e.target as HTMLInputElement;
+  if (!files || !files.length) return;
+
+  const file = files[0];
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    pic.value = String(reader.result);
+    eventBus.emit("avCropModal", true);
+    if (!uploadInput.value) return;
+    uploadInput.value.value = "";
+  };
+}
+</script>
+
+<template>
+  <form @submit.prevent="patchUser">
+    <DefaultInput
+      id="usernameFWS"
+      v-model="state.userData.Username"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_username_label')"
+      :help="$t('fws_username_help')"
+      :error-vuelidate="v$.userData.Username.$errors"
+      :disabled="userData?.UserProfile?.HasUsernameAndSlug ? true : false"
+    />
+    <div class="flex gap-2 items-center mb-4">
+      <img
+        :src="`${imageDomain}/${userData?.UserProfile?.AvatarUUID}?vars=format=png:resize=100x100`"
+        class="w-16 h-16 rounded-full flex-0 shrink-0 grow-0"
+        v-if="userData?.UserProfile?.AvatarUUID"
+      />
+      <div class="flex-1">
+        <label
+          class="block text-sm font-medium mb-2 text-neutral-900 dark:text-white"
+          for="file_input"
+          >{{ $t("fws_upload_av_label") }}</label
+        >
+        <input
+          class="block text-sm w-full text-neutral-900 border border-neutral-300 rounded-lg cursor-pointer bg-neutral-50 dark:text-neutral-400 focus:outline-none dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400"
+          ref="uploadInput"
+          type="file"
+          accept="image/jpg, image/jpeg, image/png, image/gif"
+          @change="selectFile"
+        />
+      </div>
+    </div>
+    <DefaultModal id="avCrop" :title="$t('fws_crop_av_title')">
+      <button @click="getCropResult" class="btn defaults primary">
+        {{ $t("fws_crop_av_cta") }}
+      </button>
+      <div class="max-h-[80vh]">
+        <VuePictureCropper
+          :boxStyle="{
+            width: 'auto',
+            height: 'auto',
+            backgroundColor: '#f8f8f8',
+            margin: 'auto',
+          }"
+          :img="pic"
+          :options="{
+            viewMode: 1,
+            dragMode: 'crop',
+            aspectRatio: 1 / 1,
+          }"
+          class="max-h-[70vh] w-full"
+        />
+      </div>
+    </DefaultModal>
+    <DefaultInput
+      id="genderFWS"
+      v-model="state.userData.Gender"
+      class="mb-4"
+      type="select"
+      :options="[
+        ['female', $t('fws_persona_phys_appearance_opt_female')],
+        ['male', $t('fws_persona_phys_appearance_opt_male')],
+        ['non-binary', $t('fws_persona_phys_appearance_opt_non_binary')],
+      ]"
+      :label="$t('fws_gender_label')"
+      :error-vuelidate="v$.userData.Gender.$errors"
+    />
+    <!-- @vue-skip -->
+    <DefaultInput
+      id="birthdateFWS"
+      v-model="state.userData.Birthdate"
+      class="mb-4"
+      type="date"
+      :label="$t('fws_birthdate_label')"
+      :error-vuelidate="v$.userData.Birthdate.$errors"
+    />
+    <DefaultInput
+      id="bioFWS"
+      v-model="state.userData.Bio"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_bio_label')"
+      :error-vuelidate="v$.userData.Bio.$errors"
+    />
+    <DefaultInput
+      id="publicGenderFWS"
+      v-model:checkbox-value="state.userData.PublicGender"
+      type="toggle"
+      :label="$t('fws_public_gender')"
+      :error-vuelidate="v$.userData.PublicGender.$errors"
+    />
+    <DefaultInput
+      id="publicBioFWS"
+      v-model:checkbox-value="state.userData.PublicBio"
+      type="toggle"
+      :label="$t('fws_public_bio')"
+      :error-vuelidate="v$.userData.PublicBio.$errors"
+    />
+    <DefaultInput
+      id="publicBirthdateFWS"
+      v-model:checkbox-value="state.userData.PublicBirthdate"
+      type="toggle"
+      :label="$t('fws_public_birthdate')"
+      :error-vuelidate="v$.userData.PublicBirthdate.$errors"
+    />
+
+    <div class="flex">
+      <button type="submit" class="btn defaults primary">
+        {{ $t("fws_save_user_cta") }}
+      </button>
+    </div>
+  </form>
+</template>

package/components/ui/DefaultDropdownLink.vue

@@ -29,6 +29,7 @@ const classes = computed(() => `${baseClasses} ${colorClasses.value}`);
     @click.prevent="props.handleClick"
     :class="classes"
     role="menuitem"
+    type="button"
   >
     <slot></slot>
   </button>

package/components/ui/DefaultGallery.vue

@@ -26,18 +26,20 @@ const props = withDefaults(
     onClose?: Function;
     closeIcon?: Object;
     gridHeight?: number;
-    mode: "mason" | "grid" | "button" | "hidden";
+    mode: "mason" | "grid" | "button" | "hidden" | "custom";
     paging?: APIPaging | undefined;
     buttonText?: string;
     buttonType?: string;
     modelValue: number;
     borderColor?: Function;
     imageLoader: string;
-    videoComponent?: Component;
+    videoComponent?: Component | string;
+    imageComponent?: Component | string;
     isVideo?: Function;
   }>(),
   {
     modelValue: 0,
+    imageComponent: "img",
     mode: "grid",
     gridHeight: 4,
     closeIcon: () => h(XCircleIcon),
@@ -199,7 +201,7 @@ onUnmounted(() => {
                 class="flex h-[100vh] relative flex-grow items-center justify-center gap-2"
               >
                 <div
-                  class="hidden lg:relative lg:flex w-10 flex-shrink-0 items-center justify-center"
+                  class="hidden lg:relative lg:flex w-10 flex-shrink-0 items-center justify-center flex-0"
                 >
                   <button
                     class="btn p-1 rounded-full"
@@ -232,13 +234,23 @@ onUnmounted(() => {
                       <img
                         class="shadow max-w-full h-auto object-contain max-h-[85vh]"
                         :src="modelValueSrc"
-                        v-if="modelValueSrc"
+                        v-if="modelValueSrc && imageComponent == 'img'"
                         @touchstart="touchStart"
                         @touchend="touchEnd"
                       />
+                      <component
+                        v-else-if="modelValueSrc && imageComponent"
+                        :is="imageComponent"
+                        :image="modelValueSrc.image"
+                        :variant="modelValueSrc.variant"
+                        :alt="modelValueSrc.alt"
+                        class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                      />
                     </template>
                   </div>
-                  <div class="flex-0 py-2 flex items-center justify-center">
+                  <div
+                    class="flex-0 py-2 flex items-center justify-center max-w-full w-full"
+                  >
                     <slot :value="images[modelValue]"></slot>
                   </div>
                 </div>
@@ -299,6 +311,16 @@ onUnmounted(() => {
                       images[i - 1],
                     )}`"
                     :src="getThumbnailUrl(images[i - 1])"
+                    v-if="imageComponent == 'img'"
+                  />
+                  <component
+                    v-else
+                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                    :is="imageComponent"
+                    :image="getThumbnailUrl(images[i - 1]).image"
+                    :variant="getThumbnailUrl(images[i - 1]).variant"
+                    :alt="getThumbnailUrl(images[i - 1]).alt"
+                    class="h-auto max-w-full rounded-lg cursor-pointer shadow"
                   />
                 </div>
               </div>
@@ -307,12 +329,14 @@ onUnmounted(() => {
         </DialogPanel>
       </Dialog>
     </TransitionRoot>
-    <template v-if="mode == 'grid' || mode == 'mason'">
+    <template v-if="mode == 'grid' || mode == 'mason' || mode == 'custom'">
       <div
-        class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4"
         :class="{
-          'items-start': mode == 'mason',
-          'items-center': mode == 'grid',
+          'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-start':
+            mode == 'mason',
+          'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-center':
+            mode == 'grid',
+          'custom-grid': mode == 'custom',
         }"
       >
         <template v-for="i in images.length" :key="`g_${id}_${i}`">
@@ -326,9 +350,18 @@ onUnmounted(() => {
                   <img
                     @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
                     class="h-auto max-w-full rounded-lg cursor-pointer"
-                    v-if="i + j - 2 < images.length"
+                    v-if="i + j - 2 < images.length && imageComponent == 'img'"
                     :src="getThumbnailUrl(images[i + j - 2])"
                   />
+                  <component
+                    v-else-if="i + j - 2 < images.length"
+                    :is="imageComponent"
+                    :image="getThumbnailUrl(images[i + j - 2]).image"
+                    :variant="getThumbnailUrl(images[i + j - 2]).variant"
+                    :alt="getThumbnailUrl(images[i + j - 2]).alt"
+                    class="h-auto max-w-full rounded-lg cursor-pointer"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
+                  />
                 </div>
               </template>
             </div>
@@ -338,6 +371,16 @@ onUnmounted(() => {
               @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
               class="h-auto max-w-full rounded-lg cursor-pointer"
               :src="getThumbnailUrl(images[i - 1])"
+              v-if="imageComponent == 'img'"
+            />
+            <component
+              v-else-if="imageComponent"
+              :is="imageComponent"
+              :image="getThumbnailUrl(images[i - 1]).image"
+              :variant="getThumbnailUrl(images[i - 1]).variant"
+              :alt="getThumbnailUrl(images[i - 1]).alt"
+              class="h-auto max-w-full rounded-lg cursor-pointer"
+              @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
             />
           </div>
         </template>

package/components/ui/DefaultPaging.vue

@@ -20,8 +20,10 @@ const props = withDefaults(
     items: APIPaging;
     id: string;
     hash?: string;
+    showLegend?: boolean;
   }>(),
   {
+    showLegend: true,
     hash: "",
   },
 );
@@ -128,88 +130,97 @@ useFyHead({
     v-if="items && items.page_max > 1 && items.page_no"
   >
     <div class="paging-container">
-      <nav
-        aria-label="Pagination"
-        class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
-      >
-        <a
-          href="javascript:void(0);"
-          @click="prev()"
-          v-if="items.page_no >= 2"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-        >
-          <span class="sr-only">{{ $t("previous_paging") }}</span>
-          <ChevronLeftIcon class="w-4 h-4" />
-        </a>
-        <a
-          v-if="items.page_no - 2 > 1"
-          class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-          href="javascript:void(0);"
-          @click="page(1)"
-        >
-          1
-        </a>
-        <span
-          v-if="items.page_no - 2 > 2"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
-        >
-          ...
-        </span>
-        <template v-for="i in 2">
-          <a
-            v-if="items.page_no - (3 - i) >= 1"
-            class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-            href="javascript:void(0);"
-            :key="`${i}-sm`"
-            @click="page(items.page_no - (3 - i))"
-          >
-            {{ items.page_no - (3 - i) }}
-          </a>
-        </template>
-        <a
-          href="#"
-          aria-current="page"
-          class="z-10 relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium font-bold bg-fv-primary-50 border-fv-primary-500 text-fv-primary-600 hover:text-fv-neutral-600 dark:bg-fv-primary-900 dark:border-fv-primary-500 dark:text-fv-primary-200 dark:hover:text-fv-neutral-100"
-        >
-          {{ items.page_no }}
-        </a>
-        <template v-for="i in 2">
-          <a
-            v-if="items.page_no + i <= items.page_max"
-            class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-            href="javascript:void(0);"
-            :key="`${i}-md`"
-            @click="page(items.page_no + i)"
-          >
-            {{ items.page_no + i }}
-          </a>
-        </template>
-        <span
-          v-if="items.page_no + 2 < items.page_max - 1"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
-        >
-          ...
-        </span>
-        <a
-          v-if="items.page_no + 2 < items.page_max"
-          class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-          href="javascript:void(0);"
-          @click="page(items.page_max)"
-        >
-          {{ items.page_max }}
-        </a>
-        <a
-          href="javascript:void(0);"
-          @click="next()"
-          v-if="items.page_no < items.page_max - 1"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-        >
-          <span class="sr-only">{{ $t("next_paging") }}</span>
-          <ChevronRightIcon class="w-4 h-4" />
-        </a>
+      <nav aria-label="Pagination">
+        <ul class="flex items-center -space-x-px h-8 text-sm">
+          <li v-if="items.page_no >= 2">
+            <a
+              href="javascript:void(0);"
+              @click="prev()"
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+            >
+              <span class="sr-only">{{ $t("previous_paging") }}</span>
+              <ChevronLeftIcon class="w-4 h-4" />
+            </a>
+          </li>
+          <li v-if="items.page_no - 2 > 1">
+            <a
+              class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              href="javascript:void(0);"
+              @click="page(1)"
+            >
+              1
+            </a>
+          </li>
+          <li v-if="items.page_no - 2 > 2">
+            <div
+              v-if="items.page_no - 2 > 2"
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+            >
+              ...
+            </div>
+          </li>
+          <template v-for="i in 2">
+            <li v-if="items.page_no - (3 - i) >= 1" :key="`${i}-sm`">
+              <a
+                class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+                href="javascript:void(0);"
+                @click="page(items.page_no - (3 - i))"
+              >
+                {{ items.page_no - (3 - i) }}
+              </a>
+            </li>
+          </template>
+          <li>
+            <a
+              href="#"
+              aria-current="page"
+              class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 hover:bg-primary-100 hover:text-primary-700 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
+            >
+              {{ items.page_no }}
+            </a>
+          </li>
+          <template v-for="i in 2">
+            <li :key="`${i}-md`" v-if="items.page_no + i <= items.page_max">
+              <a
+                class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+                href="javascript:void(0);"
+                @click="page(items.page_no + i)"
+              >
+                {{ items.page_no + i }}
+              </a>
+            </li>
+          </template>
+          <li v-if="items.page_no + 2 < items.page_max - 1">
+            <div
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+            >
+              ...
+            </div>
+          </li>
+          <li v-if="items.page_no + 2 < items.page_max">
+            <a
+              class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              href="javascript:void(0);"
+              @click="page(items.page_max)"
+            >
+              {{ items.page_max }}
+            </a>
+          </li>
+          <li v-if="items.page_no < items.page_max - 1">
+            <a
+              href="javascript:void(0);"
+              @click="next()"
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+            >
+              <span class="sr-only">{{ $t("next_paging") }}</span>
+              <ChevronRightIcon class="w-4 h-4" />
+            </a>
+          </li>
+        </ul>
       </nav>
       <p
-        class="text-xs text-center italic mt-0.5 text-fv-neutral-700 dark:text-fv-neutral-300"
+        class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
+        v-if="showLegend"
       >
         {{
           $t("global_paging", {

package/composables/rest.ts

@@ -1,5 +1,5 @@
 import { RestMethod, RestParams, getMode, rest, stringHash } from "@fy-/fws-js";
-import { useRestStore } from "../stores/rest";
+import { useServerRouter } from "../stores/serverRouter";
 import { isServerRendered } from "./ssr";
 import { useEventBus } from "./event-bus";
 
@@ -31,7 +31,7 @@ export function useRest(): <ResultType extends APIResult>(
   method: RestMethod,
   params?: RestParams,
 ) => Promise<ResultType> {
-  const restStore = useRestStore();
+  const serverRouter = useServerRouter();
   const eventBus = useEventBus();
 
   return async <ResultType extends APIResult>(
@@ -39,13 +39,24 @@ export function useRest(): <ResultType extends APIResult>(
     method: RestMethod,
     params?: RestParams,
   ): Promise<ResultType> => {
-    const requestHash = stringHash(url + method + JSON.stringify(params));
+    let urlForHash: string = url;
+    try {
+      const urlParse = new URL(url);
+      urlForHash = urlParse.pathname + urlParse.search;
+    } catch (error) {
+      urlForHash = url;
+    }
+
+    const requestHash = stringHash(
+      urlForHash + method + JSON.stringify(params),
+    );
     if (isServerRendered()) {
-      const hasResult = restStore.getResult(requestHash);
+      const hasResult = serverRouter.getResult(requestHash);
       if (hasResult !== undefined) {
         const result = hasResult as ResultType;
-        restStore.removeResult(requestHash);
+        serverRouter.removeResult(requestHash);
         if (result.result === "error") {
+          eventBus.emit("main-loading", false);
           eventBus.emit("rest-error", result);
           return Promise.reject(result);
         }
@@ -56,18 +67,23 @@ export function useRest(): <ResultType extends APIResult>(
     try {
       const restResult: ResultType = await rest(url, method, params);
       if (getMode() === "ssr") {
-        restStore.addResult(
+        serverRouter.addResult(
           requestHash,
           JSON.parse(JSON.stringify(restResult)),
         );
       }
+      if (restResult.result === "error") {
+        eventBus.emit("main-loading", false);
+        eventBus.emit("rest-error", restResult);
+        return Promise.reject(restResult);
+      }
       return Promise.resolve(restResult);
     } catch (error) {
       const restError: ResultType = error as ResultType;
       if (getMode() === "ssr") {
-        restStore.addResult(requestHash, restError);
+        serverRouter.addResult(requestHash, restError);
       }
-
+      eventBus.emit("main-loading", false);
       eventBus.emit("rest-error", restError);
       return Promise.resolve(restError);
     }

package/composables/seo.ts

@@ -30,15 +30,16 @@ export interface LazyHead {
 export const useSeo = (seo: Ref<LazyHead>, initial: boolean = false) => {
   const currentUrl = `${getURL().Scheme}://${getURL().Host}${getURL().Path}`;
   const currentLocale = seo.value.locale || getLocale();
-
+  const actualCurrentURL = computed(() => seo.value.canonical || currentUrl);
   useFyHead({
     title: computed(() => seo.value.title),
+    scripts: seo.value.scripts,
     links: computed(() => {
       const links = [];
 
       links.push({
         rel: "canonical",
-        href: currentUrl,
+        href: actualCurrentURL.value,
         key: "canonical",
       });
 

package/composables/templating.ts

@@ -8,7 +8,15 @@ const cropText = (str: string, ml = 100, end = "...") => {
   }
   return str;
 };
+const getContrastingTextColor = (backgroundColor: string) => {
+  const r = parseInt(backgroundColor.substring(1, 3), 16);
+  const g = parseInt(backgroundColor.substring(3, 5), 16);
+  const b = parseInt(backgroundColor.substring(5, 7), 16);
 
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  return luminance > 0.5 ? "#000000" : "#FFFFFF";
+};
 const formatBytes = (bytes: number, decimals = 2) => {
   if (!+bytes) return "0 Bytes";
 
@@ -76,4 +84,11 @@ const formatTimeago = (dt: Date | string | number) => {
   return formatDateTimeago(new Date(_dt), getLocale().replace("_", "-"));
 };
 
-export { cropText, formatBytes, formatDate, formatDatetime, formatTimeago };
+export {
+  cropText,
+  formatBytes,
+  formatDate,
+  formatDatetime,
+  formatTimeago,
+  getContrastingTextColor,
+};

package/env.d.ts

@@ -4,5 +4,3 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-
-declare module "./presets/Wind";

package/index.ts

@@ -11,7 +11,7 @@ import {
   isServerRendered,
 } from "./composables/ssr";
 import { useSeo } from "./composables/seo";
-import { useUserStore, useUserCheck } from "./stores/user";
+import { useUserStore, useUserCheck, useUserCheckAsync } from "./stores/user";
 import { ClientOnly } from "./components/ssr/ClientOnly";
 import {
   cropText,
@@ -19,6 +19,7 @@ import {
   formatDate,
   formatDatetime,
   formatTimeago,
+  getContrastingTextColor,
 } from "./composables/templating";
 import { useRest } from "./composables/rest";
 export * from "./stores/serverRouter";
@@ -48,7 +49,9 @@ import DataTable from "./components/fws/DataTable.vue";
 import FilterData from "./components/fws/FilterData.vue";
 import CmsArticleBoxed from "./components/fws/CmsArticleBoxed.vue";
 import CmsArticleSingle from "./components/fws/CmsArticleSingle.vue";
-
+import UserOAuth2 from "./components/fws/UserOAuth2.vue";
+import UserData from "./components/fws/UserData.vue";
+import UserProfile from "./components/fws/UserProfile.vue";
 // Css
 import "./style.css";
 
@@ -71,6 +74,8 @@ function createFWS(): Plugin {
         app.config.globalProperties.$formatTimeago = formatTimeago;
         app.config.globalProperties.$formatDatetime = formatDatetime;
         app.config.globalProperties.$formatDate = formatDate;
+        app.config.globalProperties.$getContrastingTextColor =
+          getContrastingTextColor;
 
         app.component("ClientOnly", ClientOnly);
       }
@@ -87,6 +92,7 @@ declare module "vue" {
     $formatTimeago: typeof formatTimeago;
     $formatDatetime: typeof formatDatetime;
     $formatDate: typeof formatDate;
+    $getContrastingTextColor: typeof getContrastingTextColor;
   }
   export interface GlobalComponents {
     ClientOnly: typeof ClientOnly;
@@ -105,6 +111,7 @@ export {
   useSeo,
   useUserStore,
   useUserCheck,
+  useUserCheckAsync,
   useRest,
 
   // Components
@@ -130,8 +137,11 @@ export {
 
   // FWS
   UserFlow,
+  UserOAuth2,
   DataTable,
   FilterData,
   CmsArticleBoxed,
   CmsArticleSingle,
+  UserData,
+  UserProfile,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.3.5",
+  "version": "0.3.9",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {

package/stores/serverRouter.ts

@@ -5,6 +5,7 @@ export interface ServerRouterState {
   _router: any | null;
   status: number;
   redirect?: string;
+  results: Record<number, any | undefined>;
 }
 
 export const useServerRouter = defineStore({
@@ -14,6 +15,7 @@ export const useServerRouter = defineStore({
       _router: null,
       status: 200,
       redirect: undefined,
+      results: {},
     }) as ServerRouterState,
   getters: {
     currentRoute: (state) => state._router!.currentRoute,
@@ -45,5 +47,17 @@ export const useServerRouter = defineStore({
     forward() {
       this._router?.go(1);
     },
+    addResult(id: number, result: any) {
+      this.results[id] = result;
+    },
+    hasResult(id: number) {
+      return this.results[id] !== undefined;
+    },
+    getResult(id: number) {
+      return this.results[id];
+    },
+    removeResult(id: number) {
+      delete this.results[id];
+    },
   },
 });

package/stores/user.ts

@@ -5,6 +5,7 @@ import { rest } from "@fy-/fws-js";
 import { computed } from "vue";
 import { RouteLocation, useRouter } from "vue-router";
 import { useServerRouter } from "./serverRouter";
+import { useEventBus } from "../composables/event-bus";
 
 export type UserStore = {
   user: User | null;
@@ -23,7 +24,6 @@ export const useUserStore = defineStore({
   actions: {
     async refreshUser() {
       const user: APIResult = await rest("User:get", "GET").catch((err) => {
-        console.log(err);
         this.setUser(null);
       });
       if (user.result === "success") {
@@ -48,11 +48,47 @@ export const useUserStore = defineStore({
   },
 });
 
+export async function useUserCheckAsync(path = "/login", redirectLink = false) {
+  const userStore = useUserStore();
+  await userStore.refreshUser();
+  const isAuth = computed(() => userStore.isAuth);
+  const router = useServerRouter();
+  const eventBus = useEventBus();
+
+  eventBus.on("user:refresh", async () => {
+    await userStore.refreshUser();
+  });
+  const checkUser = (route: RouteLocation) => {
+    if (route.meta.reqLogin) {
+      if (!isAuth.value) {
+        if (!redirectLink) router.push(path);
+        else {
+          router.status = 307;
+          router.push(`${path}?return_to=${route.path}`);
+        }
+      }
+    }
+  };
+
+  router._router.afterEach(async () => {
+    await userStore.refreshUser();
+  });
+  router._router.beforeEach((to: any) => {
+    if (to.fullPath != path) {
+      checkUser(to);
+    }
+  });
+}
+
 export function useUserCheck(path = "/login", redirectLink = false) {
   const userStore = useUserStore();
   const isAuth = computed(() => userStore.isAuth);
   const router = useServerRouter();
+  const eventBus = useEventBus();
 
+  eventBus.on("user:refresh", async () => {
+    await userStore.refreshUser();
+  });
   const checkUser = (route: RouteLocation) => {
     if (route.meta.reqLogin) {
       if (!isAuth.value) {

package/stores/rest.ts

@@ -1,27 +0,0 @@
-import { defineStore } from "pinia";
-import { APIResult } from "../composables/rest";
-
-type SharedState = {
-  results: Record<number, any | undefined>;
-};
-
-export const useRestStore = defineStore({
-  id: "restStore",
-  state: (): SharedState => ({
-    results: {},
-  }),
-  actions: {
-    addResult(id: number, result: any) {
-      this.results[id] = result;
-    },
-    hasResult(id: number) {
-      return this.results[id] !== undefined;
-    },
-    getResult(id: number) {
-      return this.results[id];
-    },
-    removeResult(id: number) {
-      delete this.results[id];
-    },
-  },
-});