Migrate to Vue 3 and Vite

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

js/src/components/User/AuthProvider.vue

@@ -1,34 +1,31 @@
 <template>
-  <a
-    class="button is-light"
-    v-if="isProviderSelected && oauthProvider.label === null"
+  <o-button
+    outlined
+    :icon-left="oauthProvider.id"
+    v-if="isProviderSelected && !oauthProvider.label"
     :href="`/auth/${oauthProvider.id}`"
   >
-    <b-icon :icon="oauthProvider.id" />
-    <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
+    <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></o-button
   >
-  <a
-    class="button is-light"
+  <o-button
+    outlined
     :href="`/auth/${oauthProvider.id}`"
     v-else-if="isProviderSelected"
+    icon-left="lock"
   >
-    <b-icon icon="lock" />
     <span>{{ oauthProvider.label }}</span>
-  </a>
+  </o-button>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { IOAuthProvider } from "../../types/config.model";
-import { SELECTED_PROVIDERS } from "../../utils/auth";
+<script lang="ts" setup>
+import { computed } from "vue";
+import { IOAuthProvider } from "@/types/config.model";
+import { SELECTED_PROVIDERS } from "@/utils/auth";
 
-@Component
-export default class AuthProvider extends Vue {
-  @Prop({ required: true, type: Object }) oauthProvider!: IOAuthProvider;
+const props = defineProps<{
+  oauthProvider: IOAuthProvider;
+}>();
 
-  SELECTED_PROVIDERS = SELECTED_PROVIDERS;
-
-  get isProviderSelected(): boolean {
-    return Object.keys(SELECTED_PROVIDERS).includes(this.oauthProvider.id);
-  }
-}
+const isProviderSelected = computed((): boolean => {
+  return Object.keys(SELECTED_PROVIDERS).includes(props.oauthProvider.id);
+});
 </script>

js/src/components/User/AuthProviders.story.vue

@@ -0,0 +1,13 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <AuthProviders :oauthProviders="providers" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import AuthProviders from "./AuthProviders.vue";
+
+const providers = [{ id: "keycloak", label: "Entreprise" }, { id: "google" }];
+</script>

js/src/components/User/AuthProviders.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <b>{{ $t("Sign in with") }}</b>
-    <div class="buttons">
+    <b>{{ t("Sign in with") }}</b>
+    <div class="flex gap-1 flex-wrap">
       <auth-provider
         v-for="provider in oauthProviders"
         :oauthProvider="provider"
@@ -10,17 +10,14 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { IOAuthProvider } from "../../types/config.model";
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { IOAuthProvider } from "@/types/config.model";
 import AuthProvider from "./AuthProvider.vue";
 
-@Component({
-  components: {
-    AuthProvider,
-  },
-})
-export default class AuthProviders extends Vue {
-  @Prop({ required: true, type: Array }) oauthProviders!: IOAuthProvider[];
-}
+defineProps<{
+  oauthProviders: IOAuthProvider[];
+}>();
+
+const { t } = useI18n({ useScope: "global" });
 </script>