@dative-gpi/foundation-shared-components 0.0.11 → 0.0.13

package/icons/flags/UnitedStates.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
+    <g fill-rule="evenodd">
+      <g stroke-width="1pt">
+        <path fill="#bd3d44" d="M0 0h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8V197H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8V512H0z" transform="scale(.9375)"/>
+        <path fill="#fff" d="M0 39.4h972.8v39.4H0zm0 78.8h972.8v39.3H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0z" transform="scale(.9375)"/>
+      </g>
+      <path fill="#192f5d" d="M0 0h389.1v275.7H0z" transform="scale(.9375)"/>
+      <path fill="#fff" d="M32.4 11.8 36 22.7h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9H177l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 39.4l3.5 10.9h11.5L70.6 57 74 67.9l-9-6.7-9.3 6.7L59 57l-9-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7L124 57l-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5L330 57l3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 66.9 36 78h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7H29zm64.9 0 3.5 11h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zm64.8 0 3.6 11H177l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7h11.5zm64.9 0 3.5 11H242l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 11h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.2-6.7h11.4zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.5zM64.9 94.5l3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 122.1 36 133h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9H177l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 149.7l3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zM32.4 177.2l3.6 11h11.4l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 11H177l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 11H242l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 11h11.4l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 204.8l3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 232.4l3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.3-6.7H29zm64.9 0 3.5 10.9h11.5L103 250l3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 10.9H177l-9 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.5z" transform="scale(.9375)"/>
+    </g>
+  </svg>
+</template>

package/icons/sets.ts

@@ -0,0 +1,17 @@
+import France from "./flags/France.vue";
+import Germany from "./flags/Germany.vue";
+import GreatBritain from "./flags/GreatBritain.vue";
+import Italy from "./flags/Italy.vue";
+import Portugal from "./flags/Portugal.vue";
+import Spain from "./flags/Spain.vue";
+import UnitedStates from "./flags/UnitedStates.vue";
+
+export const Flags = {
+  france: France,
+  germany: Germany,
+  greatBritain: GreatBritain,
+  italy: Italy,
+  portugal: Portugal,
+  spain: Spain,
+  unitedStates: UnitedStates
+};

package/models/rules.ts

@@ -1,4 +1,7 @@
-import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import { getTimeBestString } from "../utils";
 
 const { epochToLongDateFormat } = useTimeZone()!;
 const { $tr } = useTranslationsProvider();
@@ -47,4 +50,10 @@ export const AutocompleteRules = {
     required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
     min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
     max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
+};
+
+export const TimeRules = {
+    required: (message: string) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
+    max: (max: number, message: string) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "version": "0.0.11",
+  "sideEffects": false,
+  "version": "0.0.13",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,9 +10,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.11",
-    "@dative-gpi/foundation-shared-services": "0.0.11",
+    "@dative-gpi/foundation-shared-domain": "0.0.13",
+    "@dative-gpi/foundation-shared-services": "0.0.13",
     "@fontsource/montserrat": "^5.0.16",
+    "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
     "@lexical/link": "^0.12.5",
     "@lexical/plain-text": "^0.12.5",
@@ -30,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "4f28939e7d42ab1ef8319c614fbc210b1291fd79"
+  "gitHead": "c99a5f4be0427449b3b00ef6d467528bae8b1ada"
 }

package/pages/FSExternalIdentityButton.vue

@@ -0,0 +1,64 @@
+<template>
+  <FSButton
+    style="flex: 1"
+    :href="loginUrl"
+    :prependIcon="icon"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { LOGIN_EXTERNAL_URL, SIGNUP_EXTERNAL_URL } from "@dative-gpi/foundation-shared-services/config";
+import { buildURL } from "@dative-gpi/bones-ui";
+
+import FSButton from "../components/FSButton.vue";
+import FSIcon from "../components/FSIcon.vue";
+
+export default defineComponent({
+  name: "FSExternalIdentityButton",
+  components: {
+    FSButton,
+    FSIcon
+  },
+  props: {
+    scheme: {
+      type: String as PropType<"OpenIdConnect" | "Google" | "Facebook">,
+      required: false,
+      default: null
+    },
+    invitation: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    token: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const loginUrl = computed((): string => {
+      if (props.invitation) {
+        return buildURL(SIGNUP_EXTERNAL_URL(), { scheme: props.scheme, token: props.token });
+      }
+      return buildURL(LOGIN_EXTERNAL_URL(), { scheme: props.scheme });
+    });
+
+    const icon = computed((): string => {
+      switch (props.scheme) {
+        case "OpenIdConnect": return "mdi-microsoft";
+        case "Google":        return "mdi-google";
+        case "Facebook":      return "mdi-facebook";
+        default:              return "mdi-login";
+      }
+    });
+
+    return {
+      loginUrl,
+      icon
+    };
+  }
+})
+</script>

package/pages/FSLanguageSetter.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-skeleton-loader
+    v-if="fetching"
+    type="image"
+    :class="loadClasses"
+  />
+  <FSSelectField
+    v-else
+    itemValue="code"
+    :class="classes"
+    :items="entities"
+    :modelValue="languageCode"
+    :hideHeader="$props.hideHeader"
+    @update:modelValue="setLanguageCode($event)"
+    v-bind="$attrs"
+  >
+    <template #selection>
+      <FSRow
+        align="center-center"
+      >
+        <FSIcon size="l">
+          {{ languageIcon }}
+        </FSIcon>
+        <FSSpan
+          v-if="$props.withLabel"
+        >
+          {{ languageLabel }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template #item="{ item, props }">
+      <v-list-item v-bind="{ ...props, title: '' }">
+        <FSRow
+          align="center-left"
+          width="hug"
+        >
+          <FSIcon size="l">
+            {{ item.raw.icon }}
+          </FSIcon>
+          <FSSpan
+            v-if="$props.withLabel"
+          >
+            {{ item.raw.label }}
+          </FSSpan>
+        </FSRow>
+      </v-list-item>
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted } from "vue";
+
+import { useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useLanguages } from "@dative-gpi/foundation-core-services/composables";
+
+import FSSelectField from "../components/fields/FSSelectField.vue";
+import FSIcon from "../components/FSIcon.vue";
+import FSSpan from "../components/FSSpan.vue";
+import FSRow from "../components/FSRow.vue";
+
+export default defineComponent({
+  name: "FSLanguageSet",
+  components: {
+    FSSelectField,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    withLabel: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany, fetching, entities } = useLanguages();
+    const { setLanguageCode, languageCode } = useLanguageCode();
+
+    onMounted(() => {
+      getMany();
+    });
+
+    const classes = computed((): string[] => {
+      const innerClasses = ["fs-language-setter"];
+      if (!props.withLabel) {
+        innerClasses.push("fs-language-setter-icon");
+      }
+      return innerClasses;
+    });
+
+    const loadClasses = computed((): string[] => {
+      const innerClasses = ["fs-load-language-setter"];
+      if (!props.withLabel) {
+        innerClasses.push("fs-load-language-setter-icon");
+      }
+      return innerClasses;
+    });
+
+    const languageIcon = computed((): string => {
+      const language = entities.value.find((entity) => entity.code === languageCode.value);
+      if (language) {
+        return language.icon;
+      }
+      return "";
+    });
+
+    const languageLabel = computed((): string => {
+      const language = entities.value.find((entity) => entity.code === languageCode.value);
+      if (language) {
+        return language.label;
+      }
+      return "";
+    });
+
+    return {
+      classes,
+      fetching,
+      entities,
+      loadClasses,
+      languageCode,
+      languageIcon,
+      languageLabel,
+      setLanguageCode
+    };
+  }
+});
+</script>

package/pages/FSLoginPage.vue

@@ -0,0 +1,253 @@
+<template>
+  <FSRow
+    width="100vw"
+    gap="0px"
+  >
+    <FSCol
+      align="top-center"
+      :width="formWidth"
+    >
+      <FSCol
+        width="min(464px, 100%)"
+        padding="56px 0 0 0"
+        align="top-center"
+        gap="32px"
+      >
+        <FSCol
+          align="top-center"
+          gap="24px"
+        >
+          <FSImage
+            borderRadius="0px"
+            :imageId="landingPage?.bannerImageId"
+            :height="bannerSize.height"
+            :width="bannerSize.width"
+          />
+          <FSPagination
+            class="fs-login-page-pagination"
+            width="calc(100% - 64px)"
+            :modelValue="0"
+            :pages="3"
+          />
+          <FSCol
+            gap="24px"
+          >
+            <FSCol
+              gap="12px"
+            >
+              <FSLanguageSetter />
+              <FSCol
+                gap="4px"
+              >
+                <FSLabel
+                  font="text-h1"
+                  :label="landingPage?.title"
+                />
+                <FSLabel
+                  :label="landingPage?.subTitle"
+                />
+              </FSCol>
+            </FSCol>
+            <FSCol
+              v-if="securitySettings?.useLocalAccounts"
+              gap="16px"
+            >
+              <FSTextField
+                :label="$tr('ui.login-page.email', 'Email')"
+                :required="true"
+                v-model="innerEmail"
+              />
+              <FSPasswordField
+                :label="$tr('ui.login-page.password', 'Password')"
+                :required="true"
+                v-model="innerPassword"
+              />
+              <FSRow
+                align="center-left"
+              >
+                <FSCheckbox
+                  :label="$tr('ui.login-page.remember-me', 'Remember me')"
+                  v-model="innerRememberMe"
+                />
+                <v-spacer />
+                <FSLink
+                  to="https://www.google.com"
+                >
+                  {{ $tr("ui.login-page.forgot-password", "Forgot password?") }}
+                </FSLink>
+              </FSRow>
+            </FSCol>
+            <FSButton
+              v-if="securitySettings?.useLocalAccounts"
+              :label="$tr('ui.login-page.login', 'Login')"
+              :color="ColorEnum.Primary"
+              :fullWidth="true"
+            />
+          </FSCol>
+        </FSCol>
+        <FSDivider
+          v-if="securitySettings && showDivider"
+          :label="$tr('ui.login-page.or', 'Or')"
+        />
+        <FSRow
+          align="center-center"
+          width="fill"
+          :wrap="false"
+        >
+          <FSExternalIdentityButton
+            v-if="securitySettings && securitySettings.useGoogle"
+            scheme="Google"
+          />
+          <FSExternalIdentityButton
+            v-if="securitySettings && securitySettings.useFacebook"
+            scheme="Facebook"
+          />
+          <FSExternalIdentityButton
+            v-if="securitySettings && securitySettings.useMicrosoft"
+            scheme="OpenIdConnect"
+          />
+        </FSRow>
+        <FSLink
+          v-if="landingPage && landingPage.faqLink"
+          :to="landingPage.faqLink"
+        >
+          {{ $tr("ui.login-page.frequently-asked-questions", "Frequently asked questions") }}
+        </FSLink>
+      </FSCol>
+    </FSCol>
+    <FSImage
+      borderRadius="0px"
+      :imageId="landingPage?.bannerImageId"
+      :height="backgroundSize.height"
+      :width="backgroundSize.width"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref } from "vue";
+
+import { useCurrentLandingPage, useCurrentSecuritySettings } from "@dative-gpi/foundation-shared-services/composables";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSExternalIdentityButton from "./FSExternalIdentityButton.vue";
+import FSLanguageSetter from "./FSLanguageSetter.vue";
+
+import FSPasswordField from "../components/fields/FSPasswordField.vue";
+import FSTextField from "../components/fields/FSTextField.vue";
+import FSPagination from "../components/FSPagination.vue";
+import FSCheckbox from "../components/FSCheckbox.vue"
+import FSDivider from "../components/FSDivider.vue";
+import FSImage from "../components/FSImage.vue";
+import FSLabel from "../components/FSLabel.vue";
+import FSLink from "../components/FSLink.vue";
+import FSRow from "../components/FSRow.vue";
+import FSCol from "../components/FSCol.vue";
+
+export default defineComponent({
+  name: "FSLoginPage",
+  components: {
+    FSExternalIdentityButton,
+    FSLanguageSetter,
+    FSPasswordField,
+    FSPagination,
+    FSTextField,
+    FSCheckbox,
+    FSDivider,
+    FSImage,
+    FSLabel,
+    FSLink,
+    FSRow,
+    FSCol
+  },
+  props: {
+    backgroundImageId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    bannerImageId: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const { getting: gettingLandingPage, get: getLandingPage, entity: landingPage } = useCurrentLandingPage();
+    const { get: getSecuritySettings, entity: securitySettings } = useCurrentSecuritySettings();
+    const { isExtraSmall, isMobileSized } = useBreakpoints();
+
+    const innerEmail = ref("");
+    const innerPassword = ref("");
+    const innerRememberMe = ref(false);
+
+    const backgroundSize = computed((): { width: number | string, height: number | string } => {
+      if (!gettingLandingPage && (!landingPage.value || !landingPage.value.bannerImageId)) {
+        return { width: 0, height: 0 };
+      }
+      if (isExtraSmall.value) {
+        return { width: 0, height: 0 };
+      }
+      if (isMobileSized.value) {
+        return { width: "50%", height: "100vh" };
+      }
+      return { width: "60%", height: "100vh" };
+    });
+
+    const bannerSize = computed((): { width: number | string, height: number | string } => {
+      if (!gettingLandingPage && (!landingPage.value || !landingPage.value.bannerImageId)) {
+        return { width: 0, height: 0 };
+      }
+      if (isExtraSmall.value) {
+        return { width: 240, height: 45 };
+      }
+      return { width: 360, height: 60 };
+    });
+
+    const formWidth = computed((): string => {
+      if (!gettingLandingPage && (!landingPage.value || !landingPage.value.backgroundImageId)) {
+        return "100%";
+      }
+      if (isExtraSmall.value) {
+        return "100%";
+      }
+      if (isMobileSized.value) {
+        return "50%";
+      }
+      return "40%";
+    });
+
+    const showDivider = computed((): boolean => {
+      if (!securitySettings.value) {
+        return true;
+      }
+      if (!securitySettings.value.useLocalAccounts) {
+        return false;
+      }
+      if (!securitySettings.value.useGoogle && !securitySettings.value.useFacebook && !securitySettings.value.useMicrosoft) {
+        return false;
+      }
+      return true;
+    });
+
+    onMounted(() => {
+      getSecuritySettings();
+      getLandingPage();
+    });
+
+    return {
+      ColorEnum,
+      securitySettings,
+      landingPage,
+      innerEmail,
+      innerPassword,
+      innerRememberMe,
+      backgroundSize,
+      bannerSize,
+      formWidth,
+      showDivider
+    };
+  }
+});
+</script>

package/styles/components/fs_clock.scss

@@ -1,3 +1,7 @@
+.fs-clock-date {
+    max-width: calc(100% - 198px);
+}
+
 .fs-clock-field {
     padding: 0px !important;
     width: 72px !important;

package/styles/components/fs_color_field.scss

@@ -0,0 +1,17 @@
+.fs-color-field {
+  min-width:190px;
+}
+
+.fs-color-field-opacity {
+  min-width: 150px;
+}
+
+.fs-color-field .v-field__prepend-inner > .v-icon {
+  opacity: 1 !important;
+}
+
+.fs-color-field-picker {
+  background: none !important;
+  min-width: auto !important;
+  width: 100% !important;
+}

package/styles/components/fs_divider.scss

@@ -2,4 +2,9 @@
     width: var(--fs-divider-width);
     border-bottom: 1.3px solid var(--fs-divider-color);
     border-radius: 3px;
+}
+
+.fs-divider-around {
+    border-bottom: 1.3px solid var(--fs-divider-color);
+    border-radius: 3px;
 }

package/styles/components/fs_image.scss

@@ -1,5 +1,16 @@
+.fs-load-image {
+    border-radius: var(--fs-image-border-radius);
+    max-height: 100%;
+    height: 100%;
+
+    & > .v-skeleton-loader__image {
+        max-height: 100%;
+        height: 100%;
+    }
+}
+
 .fs-image {
-    border-radius: 4px;
+    border-radius: var(--fs-image-border-radius);
 
     &.v-responsive {
         flex: 0 0 auto !important;

package/styles/components/fs_label.scss

@@ -0,0 +1,86 @@
+.fs-label {
+    color: var(--fs-label-color);
+
+    @extend .fs-span;
+}
+
+.fs-load-label {
+    & > .v-skeleton-loader__text {
+        margin: 0px;
+        height: 100%;
+    }
+
+    &.text-h1 {
+        width: calc(50% - 32px);
+
+        @include web {
+            height: 36px;
+        }
+    
+        @include mobile {
+            height: 29px;
+        }
+    }
+
+    &.text-h2 {
+        width: calc(60% - 32px);
+
+        @include web {
+            height: 27px;
+        }
+    
+        @include mobile {
+            height: 22px;
+        }
+    }
+
+    &.text-h3 {
+        width: calc(65% - 32px);
+
+        @include web {
+            height: 21px;
+        }
+    
+        @include mobile {
+            height: 17px;
+        }
+    }
+
+    &.text-h4 {
+        width: calc(75% - 32px);
+
+        @include web {
+            height: 16px;
+        }
+    
+        @include mobile {
+            height: 14px;
+        }
+    }
+
+    &.text-body,
+    &.text-button {
+        width: calc(75% - 32px);
+
+        @include web {
+            height: 14px;
+        }
+    
+        @include mobile {
+            height: 12px;
+        }
+    }
+
+    &.text-overline,
+    &.text-underline {
+        width: calc(75% - 32px);
+
+        @include web {
+            height: 12px;
+        }
+    
+        @include mobile {
+            height: 10px;
+        }
+    }
+}

package/styles/components/fs_link.scss

@@ -0,0 +1,6 @@
+.fs-link {
+    color: var(--fs-link-color);
+    text-decoration: none;
+
+    @extend .fs-span;
+}