feat(auth): pre-initialize registration fields with information from 3rd-party provider

When using a 3rd-party auth provider, we now use the given username & display name information from
the provider to fill fields from the profile RegistrationView.

Partly addresses #1105

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

js/src/utils/html.ts

@@ -10,3 +10,11 @@ export function htmlToText(html: string) {
   template.remove();
   return text;
 }
+
+export const getValueFromMeta = (name: string): string | null => {
+  const element = document.querySelector(`meta[name="${name}"]`);
+  if (element && element.getAttribute("content")) {
+    return element.getAttribute("content");
+  }
+  return null;
+};

js/src/views/Account/RegisterView.vue

@@ -24,7 +24,7 @@
           required
           v-model="identity.name"
           id="identityName"
-          @input="(event) => updateUsername(event.target.value)"
+          @input="(event: any) => updateUsername(event.target.value)"
         />
       </o-field>
 
@@ -138,6 +138,7 @@ import { registerAccount } from "@/composition/apollo/user";
 import { convertToUsername } from "@/utils/username";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@vueuse/head";
+import { getValueFromMeta } from "@/utils/html";
 
 const props = withDefaults(
   defineProps<{
@@ -174,6 +175,14 @@ onBeforeMount(() => {
   if (!props.email) {
     router.replace({ name: RouteName.PAGE_NOT_FOUND });
   }
+  const username = getValueFromMeta("auth-user-suggested-actor-username");
+  const name = getValueFromMeta("auth-user-suggested-actor-name");
+  if (username) {
+    identity.value.preferredUsername = username;
+  }
+  if (name) {
+    identity.value.name = name;
+  }
 });
 
 const updateUsername = (value: string) => {

js/src/views/User/ProviderValidation.vue

@@ -14,20 +14,13 @@ import { useLazyQuery, useMutation } from "@vue/apollo-composable";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@vueuse/head";
 import { computed, onMounted } from "vue";
+import { getValueFromMeta } from "@/utils/html";
 
 const { t } = useI18n({ useScope: "global" });
 useHead({
   title: computed(() => t("Redirecting to Mobilizon")),
 });
 
-const getValueFromMeta = (name: string): string | null => {
-  const element = document.querySelector(`meta[name="${name}"]`);
-  if (element && element.getAttribute("content")) {
-    return element.getAttribute("content");
-  }
-  return null;
-};
-
 const accessToken = getValueFromMeta("auth-access-token");
 const refreshToken = getValueFromMeta("auth-refresh-token");
 const userId = getValueFromMeta("auth-user-id");