build: switch from yarn to npm to manage js dependencies and move js contents to root

yarn v1 is being deprecated and starts to have some issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/components/Utils/EmptyContent.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="flex flex-col items-center"
+    :class="{ 'mt-20 mb-10': inline, 'mt-80': !inline, 'text-center': center }"
+    role="note"
+  >
+    <o-icon :icon="icon" customSize="48" />
+    <h2 class="mb-3">
+      <!-- @slot Mandatory title -->
+      <slot />
+    </h2>
+    <p v-show="slots.desc" :class="descriptionClasses">
+      <!-- @slot Optional description -->
+      <slot name="desc" />
+    </p>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useSlots } from "vue";
+
+withDefaults(
+  defineProps<{
+    icon: string;
+    descriptionClasses?: string;
+    inline?: boolean;
+    center?: boolean;
+  }>(),
+  { descriptionClasses: "", inline: false, center: false }
+);
+
+const slots = useSlots();
+</script>

src/components/Utils/HomepageRedirectComponent.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>a</div>
+</template>
+
+<script lang="ts" setup>
+import RouteName from "@/router/name";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+router.replace({ name: RouteName.HOME });
+</script>

src/components/Utils/NavBreadcrumbs.vue

@@ -0,0 +1,70 @@
+<template>
+  <nav class="flex mb-3" :aria-label="t('Breadcrumbs')">
+    <ol class="inline-flex items-center space-x-1 md:space-x-3 flex-wrap">
+      <li
+        class="inline-flex items-center"
+        v-for="(element, index) in links"
+        :key="index"
+        :aria-current="index > 0 ? 'page' : undefined"
+      >
+        <router-link
+          v-if="index === 0"
+          :to="element"
+          class="inline-flex items-center text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
+        >
+          {{ element.text }}
+        </router-link>
+        <div class="flex items-center" v-else-if="index === links.length - 1">
+          <svg
+            class="w-6 h-6 text-gray-400 dark:text-gray-100 rtl:rotate-180"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          <span
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 dark:text-gray-300 md:ltr:ml-2 md:rtl:mr-2 line-clamp-1"
+            >{{ element.text }}</span
+          >
+        </div>
+        <div class="flex items-center" v-else>
+          <svg
+            class="w-6 h-6 text-gray-400 dark:text-gray-100 rtl:rotate-180"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          <router-link
+            :to="element"
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 md:ltr:ml-2 md:rtl:mr-2 line-clamp-1"
+            >{{ element.text }}</router-link
+          >
+        </div>
+      </li>
+      <slot></slot>
+    </ol>
+  </nav>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { RouteLocationRaw } from "vue-router";
+
+type LinkElement = RouteLocationRaw & { text: string };
+
+defineProps<{
+  links: LinkElement[];
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+</script>

src/components/Utils/ObserverElement.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="observer" ref="observed" />
+</template>
+
+<script lang="ts" setup>
+import "intersection-observer";
+import { onMounted, onUnmounted, ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    options?: Record<string, any>;
+  }>(),
+  { options: () => ({}) }
+);
+
+const observer = ref<IntersectionObserver>();
+const observed = ref<HTMLElement>();
+const emit = defineEmits(["intersect"]);
+
+onMounted(() => {
+  observer.value = new IntersectionObserver(([entry]) => {
+    if (entry && entry.isIntersecting) {
+      emit("intersect");
+    }
+  }, props.options);
+
+  if (observed.value) {
+    observer.value.observe(observed.value);
+  }
+});
+
+onUnmounted(() => {
+  observer.value?.disconnect();
+});
+</script>

src/components/Utils/RedirectWithAccount.vue

@@ -0,0 +1,123 @@
+<template>
+  <section class="container mx-auto max-w-2xl">
+    <div class="flex flex-wrap gap-4 items-center w-full">
+      <div class="px-2 flex-1">
+        <h2 class="text-2xl">
+          {{
+            t("I have an account on {instance}.", { instance: instanceName })
+          }}
+        </h2>
+        <i18n-t keypath="My federated identity ends in {domain}">
+          <template #domain>
+            <code>@{{ host }}</code>
+          </template>
+        </i18n-t>
+        <o-button
+          variant="primary"
+          size="medium"
+          tag="router-link"
+          class="mt-4"
+          :to="{
+            name: RouteName.LOGIN,
+            query: {
+              code: LoginErrorCode.NEED_TO_LOGIN,
+              redirect: pathAfterLogin,
+            },
+          }"
+          >{{ t("Login on {instance}", { instance: host }) }}</o-button
+        >
+      </div>
+      <div class="sm:border-l-4 px-2 sm:px-4 flex-1">
+        <h2 class="text-2xl">
+          {{ t("I have an account on another Mobilizon instance.") }}
+        </h2>
+        <p>{{ t("Other software may also support this.") }}</p>
+        <p>{{ sentence }}</p>
+        <form @submit.prevent="redirectToInstance">
+          <o-field
+            :label="t('Your federated identity')"
+            label-for="remoteProfileInput"
+          >
+            <o-field>
+              <o-input
+                id="remoteProfileInput"
+                expanded
+                autocapitalize="none"
+                autocorrect="off"
+                v-model="remoteActorAddress"
+                :placeholder="t('profile{\'@\'}instance')"
+              ></o-input>
+              <p class="control">
+                <o-button type="submit">
+                  {{ t("Go") }}
+                </o-button>
+              </p>
+            </o-field>
+          </o-field>
+        </form>
+      </div>
+    </div>
+    <div class="text-center">
+      <o-button tag="a" variant="text" @click="$router.go(-1)">{{
+        t("Back to previous page")
+      }}</o-button>
+    </div>
+  </section>
+</template>
+<script lang="ts" setup>
+import { LoginErrorCode } from "@/types/enums";
+import RouteName from "../../router/name";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useInstanceName } from "@/composition/apollo/config";
+
+const props = defineProps<{
+  uri: string;
+  pathAfterLogin?: string;
+  sentence?: string;
+}>();
+
+const remoteActorAddress = ref("");
+
+const { t } = useI18n({ useScope: "global" });
+
+const { instanceName } = useInstanceName();
+
+const host = computed((): string => {
+  return window.location.hostname;
+});
+
+const redirectToInstance = async (): Promise<void> => {
+  const [, hostname] = remoteActorAddress.value.split("@", 2);
+  const remoteInteractionURI = await webFingerFetch(
+    hostname,
+    remoteActorAddress.value
+  );
+  window.open(remoteInteractionURI);
+};
+
+const webFingerFetch = async (
+  hostname: string,
+  identity: string
+): Promise<string> => {
+  const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
+  const data = await (
+    await fetch(
+      `${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`
+    )
+  ).json();
+  if (data && Array.isArray(data.links)) {
+    const link: { template: string } = data.links.find(
+      (someLink: any) =>
+        someLink &&
+        typeof someLink.template === "string" &&
+        someLink.rel === "http://ostatus.org/schema/1.0/subscribe"
+    );
+
+    if (link && link.template.includes("{uri}")) {
+      return link.template.replace("{uri}", encodeURIComponent(props.uri));
+    }
+  }
+  throw new Error("No interaction path found in webfinger data");
+};
+</script>