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>
This commit is contained in:
Thomas Citharel 2023-09-07 12:18:46 +02:00
parent 7e13e2baa7
commit 7e4934513a
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 40 additions and 12 deletions

View file

@ -10,3 +10,11 @@ export function htmlToText(html: string) {
template.remove(); template.remove();
return text; 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;
};

View file

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

View file

@ -14,20 +14,13 @@ import { useLazyQuery, useMutation } from "@vue/apollo-composable";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useHead } from "@vueuse/head"; import { useHead } from "@vueuse/head";
import { computed, onMounted } from "vue"; import { computed, onMounted } from "vue";
import { getValueFromMeta } from "@/utils/html";
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
useHead({ useHead({
title: computed(() => t("Redirecting to Mobilizon")), 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 accessToken = getValueFromMeta("auth-access-token");
const refreshToken = getValueFromMeta("auth-refresh-token"); const refreshToken = getValueFromMeta("auth-refresh-token");
const userId = getValueFromMeta("auth-user-id"); const userId = getValueFromMeta("auth-user-id");

View file

@ -71,7 +71,9 @@ defmodule Mobilizon.Web.AuthController do
render(conn, "callback.html", %{ render(conn, "callback.html", %{
access_token: access_token, access_token: access_token,
refresh_token: refresh_token, refresh_token: refresh_token,
user: user user: user,
username: username_from_ueberauth(auth),
name: display_name_from_ueberauth(auth)
}) })
else else
err -> err ->
@ -114,6 +116,18 @@ defmodule Mobilizon.Web.AuthController do
defp email_from_ueberauth(_), do: nil defp email_from_ueberauth(_), do: nil
defp username_from_ueberauth(%Ueberauth.Auth{info: %Ueberauth.Auth.Info{nickname: nickname}})
when is_valid_string(nickname),
do: nickname
defp username_from_ueberauth(_), do: nil
defp display_name_from_ueberauth(%Ueberauth.Auth{info: %Ueberauth.Auth.Info{name: name}})
when is_valid_string(name),
do: name
defp display_name_from_ueberauth(_), do: nil
@spec provider_config(String.t()) :: {:ok, any()} | {:error, :not_supported | :unknown_error} @spec provider_config(String.t()) :: {:ok, any()} | {:error, :not_supported | :unknown_error}
defp provider_config(provider_name) do defp provider_config(provider_name) do
with ueberauth when is_list(ueberauth) <- Application.get_env(:ueberauth, Ueberauth), with ueberauth when is_list(ueberauth) <- Application.get_env(:ueberauth, Ueberauth),

View file

@ -20,7 +20,9 @@ defmodule Mobilizon.Web.AuthView do
email: user_email, email: user_email,
role: user_role, role: user_role,
default_actor_id: user_actor_id default_actor_id: user_actor_id
} },
username: username,
name: name
} = assigns } = assigns
) do ) do
info_tags = [ info_tags = [
@ -29,7 +31,9 @@ defmodule Mobilizon.Web.AuthView do
Tag.tag(:meta, name: "auth-user-id", content: user_id), Tag.tag(:meta, name: "auth-user-id", content: user_id),
Tag.tag(:meta, name: "auth-user-email", content: user_email), Tag.tag(:meta, name: "auth-user-email", content: user_email),
Tag.tag(:meta, name: "auth-user-role", content: String.upcase(to_string(user_role))), Tag.tag(:meta, name: "auth-user-role", content: String.upcase(to_string(user_role))),
Tag.tag(:meta, name: "auth-user-actor-id", content: user_actor_id) Tag.tag(:meta, name: "auth-user-actor-id", content: user_actor_id),
Tag.tag(:meta, name: "auth-user-suggested-actor-username", content: username),
Tag.tag(:meta, name: "auth-user-suggested-actor-name", content: name)
] ]
with tags <- Instance.build_tags() ++ info_tags, with tags <- Instance.build_tags() ++ info_tags,