Public Profile and Validator Service

components/QrCode.vue

@@ -0,0 +1,66 @@
+<template>
+  <div v-if="url" class="bg-white w-fit p-2 border-2 border-solid border-accent rounded-md mb-box shadow-xl shadow-primary" >
+    <qrcode-vue
+        :value="url"
+        :size="size"
+        level="M"
+        render-as="svg"
+        :background="background"
+        :foreground="foreground"
+        :gradient="gradient"
+        :gradient-type="gradientType"
+        :gradient-start-color="gradientStartColor"
+        :gradient-end-color="gradientEndColor"
+        :image-settings="imageSettings"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import QrcodeVue from 'qrcode.vue';
+import type { GradientType, ImageSettings } from 'qrcode.vue';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: Number,
+    default: 160,
+  },
+  background: {
+    type: String,
+    default: '#fff',
+  },
+  foreground: {
+    type: String,
+    default: '#0b192e',
+  },
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+  gradientType: {
+    type: String as () => GradientType,
+    default: 'linear',
+  },
+  gradientStartColor: {
+    type: String,
+    default: '#0b192e',
+  },
+  gradientEndColor: {
+    type: String,
+    default: '#182b45',
+  },
+  imageSettings: {
+    type: Object as () => ImageSettings,
+    default: () => ({
+      src: '/images/logo.png',
+      width: 35,
+      height: 35,
+      excavate: true,
+    }),
+  },
+});
+</script>

components/ShareCopy.vue

@@ -0,0 +1,83 @@
+<template>
+  <Btn secondary sm class="mx-auto" @click="shareOrCopyUrl">
+    <IconText :icon="btText.icon">
+      {{ btText.text }}
+    </IconText>
+  </Btn>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+import {useI18n} from 'vue-i18n';
+import type {PropType} from "vue";
+import {ClipboardIcon, ShareIcon} from "@heroicons/vue/24/outline";
+
+
+export default defineComponent({
+  props: {
+    settings: {type: Object as PropType<any>, default: null},
+    isMobile: {type: Boolean, default: false}
+  },
+  components: {ShareIcon, ClipboardIcon},
+  setup(props) {
+    const {t} = useI18n();
+
+    const isMobile = computed(() => {
+      return props.isMobile;
+    });
+
+    const url = computed(() => {
+      return props?.settings?.url ?? "";
+    });
+
+    const title = computed(() => {
+      return props?.settings?.title ?? "";
+    });
+
+    const text = computed(() => {
+      return props?.settings?.text ?? "";
+    });
+
+    const btText = computed(() => {
+      const text: string = isMobile.value ? "Buttons.Share" : "Buttons.CopyToClipboard";
+      return {
+        icon: isMobile.value ? ShareIcon : ClipboardIcon,
+        text: t(text),
+      };
+    });
+
+    const successMsg = computed(() => {
+      return props?.settings?.successMsg
+    });
+
+    const shareOrCopyUrl = async () => {
+      if (isMobile.value && !!navigator.share) {
+        await navigator.share({
+          title: title.value,
+          text: text.value,
+          url: url.value,
+        });
+        return;
+      }
+      await navigator.clipboard.writeText(url.value).then(() => !!successMsg?.value && successHandler(successMsg?.value)).catch(error => errorHandler(error));
+    }
+
+    function successHandler(res: any) {
+      openSnackbar('success', res);
+    }
+
+    function errorHandler(res: any) {
+      openSnackbar('error', res?.detail ?? '');
+    }
+
+    return {
+      shareOrCopyUrl,
+      t,
+      btText
+    }
+  }
+});
+</script>
+
+<style scoped>
+</style>

components/profile-overview/EmptyState.vue

@@ -0,0 +1,18 @@
+<template>
+  <article
+      class="container flex flex-col gap-1 justify-center items-center h-screen-inner min"
+  >
+    <SvgEmptyProfileOverview class="max-w-[250px]" />
+    <SectionTitle
+        center
+        heading="EmptyStates.ProfileOverview.Heading"
+        body="EmptyStates.ProfileOverview.Body"
+    />
+  </article>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped></style>

components/profile-overview/Share.vue

@@ -0,0 +1,62 @@
+<template>
+  <section v-if="copyShareSettings?.url">
+    <div
+        class="card style-card bg-secondary flex flex-col gap-box items-center sm:flex-col md:flex-row lg:flex-col p-box">
+
+      <div class="w-full text-center">
+        <SectionTitle
+            sub
+            :heading="heading"
+            :body="body"
+            class="!m-0"
+        />
+      </div>
+      <div class="flex flex-col gap-box items-center">
+        <QrCode
+            :url="copyShareSettings.url"
+            :gradient="true"
+            :gradient-start-color="'#182b45'"
+            :gradient-end-color="'#0b192e'"
+        />
+
+        <div class="w-full max-w-[300px] mx-auto">
+          <ShareCopy :settings="copyShareSettings" :isMobile="isMobile"/>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import type {PropType} from 'vue'
+
+export default defineComponent({
+  name: "ProfileShare",
+  props: {
+    copyShareSettings: {type: Object as PropType<any>, default: null},
+    isMobile: {type: Boolean, default: false},
+    heading: {type: String, default: ""},
+    body: {type: String, default: ""},
+  },
+  setup(props) {
+    const isMobile = computed(() => props.isMobile)
+
+    const copyShareSettings = computed(() => props?.copyShareSettings ?? {})
+
+    const heading = computed(() => props.heading)
+
+    const body = computed(() => props.body)
+
+    return {
+      copyShareSettings,
+      isMobile,
+      heading,
+      body
+    }
+  }
+})
+</script>
+
+<style scoped>
+</style>