Merge branch 'fixes' into 'main'

fix(auth): small front fixes in 3rd-party auth provider callback

See merge request framasoft/mobilizon!1451
This commit is contained in:
Thomas Citharel 2023-09-07 11:12:20 +00:00
commit 384864cc82
9 changed files with 97 additions and 69 deletions

View File

@ -123,7 +123,7 @@ config :mobilizon, Mobilizon.Web.Email.Mailer,
# can be `true`
# ssl: false,
# can be `:always` or `:never`
tls: :if_available,
tls: :never,
allowed_tls_versions: [:tlsv1, :"tlsv1.1", :"tlsv1.2"],
tls_options: [
verify: :verify_peer,

View File

@ -65,9 +65,15 @@ body {
.field-label {
@apply block text-gray-700 dark:text-gray-100 text-base font-bold mb-2;
}
.o-field--horizontal.field {
@apply items-center;
}
.o-field__horizontal-label .field-label {
@apply mb-0;
}
.o-field__horizontal-body > .field {
@apply mt-0;
}
.field-danger {
@apply text-red-500;
}

View File

@ -80,7 +80,7 @@ export function registerAccount() {
) => {
if (context?.userAlreadyActivated) {
const currentUserData = store.readQuery<{
loggedUser: Pick<ICurrentUser, "actors">;
loggedUser: Pick<ICurrentUser, "actors" | "id">;
}>({
query: IDENTITIES,
});

View File

@ -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;
};

View File

@ -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) => {

View File

@ -2,24 +2,23 @@
<div>
<breadcrumbs-nav :links="breadcrumbsLinks" />
<div v-if="identity">
<h1>
<h1 class="flex justify-center">
<span v-if="isUpdate" class="line-clamp-2">{{
displayName(identity)
}}</span>
<span v-else>{{ $t("I create an identity") }}</span>
<span v-else>{{ t("I create an identity") }}</span>
</h1>
<o-field horizontal :label="t('Avatar')">
<picture-upload
v-model="avatarFile"
:defaultImage="identity.avatar"
:maxSize="avatarMaxSize"
class="picture-upload"
/>
</o-field>
<o-field
horizontal
:label="$t('Display name')"
:label="t('Display name')"
label-for="identity-display-name"
>
<o-input
@ -34,14 +33,15 @@
<o-field
horizontal
custom-class="username-field"
expanded
:label="$t('Username')"
class="username-field"
:label="t('Username')"
label-for="identity-username"
:message="message"
>
<o-field expanded>
<o-field class="!mt-0">
<o-input
expanded
class="!mt-0"
aria-required="true"
required
v-model="identity.preferredUsername"
@ -60,7 +60,7 @@
<o-field
horizontal
:label="$t('Description')"
:label="t('Description')"
label-for="identity-summary"
>
<o-input
@ -82,29 +82,29 @@
>{{ error }}</o-notification
>
<o-field class="submit">
<o-field class="flex justify-center !my-6">
<div class="control">
<o-button type="button" variant="primary" @click="submit()">
{{ $t("Save") }}
{{ t("Save") }}
</o-button>
</div>
</o-field>
<o-field class="delete-identity">
<o-field class="flex justify-center">
<o-button
v-if="isUpdate"
@click="openDeleteIdentityConfirmation()"
variant="text"
>
{{ $t("Delete this identity") }}
{{ t("Delete this identity") }}
</o-button>
</o-field>
<section v-if="isUpdate">
<h2>{{ $t("Profile feeds") }}</h2>
<h2>{{ t("Profile feeds") }}</h2>
<p>
{{
$t(
t(
"These feeds contain event data for the events for which this specific profile is a participant or creator. You should keep these private. You can find feeds for all of your profiles into your notification settings."
)
}}
@ -116,7 +116,7 @@
:key="feedToken.token"
>
<o-tooltip
:label="$t('URL copied to clipboard')"
:label="t('URL copied to clipboard')"
:active="showCopiedTooltip.atom"
always
variant="success"
@ -131,11 +131,11 @@
"
:href="tokenToURL(feedToken.token, 'atom')"
target="_blank"
>{{ $t("RSS/Atom Feed") }}</o-button
>{{ t("RSS/Atom Feed") }}</o-button
>
</o-tooltip>
<o-tooltip
:label="$t('URL copied to clipboard')"
:label="t('URL copied to clipboard')"
:active="showCopiedTooltip.ics"
always
variant="success"
@ -150,14 +150,14 @@
icon-left="calendar-sync"
:href="tokenToURL(feedToken.token, 'ics')"
target="_blank"
>{{ $t("ICS/WebCal Feed") }}</o-button
>{{ t("ICS/WebCal Feed") }}</o-button
>
</o-tooltip>
<o-button
icon-left="refresh"
variant="text"
@click="openRegenerateFeedTokensConfirmation"
>{{ $t("Regenerate new links") }}</o-button
>{{ t("Regenerate new links") }}</o-button
>
</div>
</div>
@ -166,7 +166,7 @@
icon-left="refresh"
variant="text"
@click="generateFeedTokens"
>{{ $t("Create new links") }}</o-button
>{{ t("Create new links") }}</o-button
>
</div>
</section>
@ -176,28 +176,14 @@
<style scoped lang="scss">
@use "@/styles/_mixins" as *;
h1 {
display: flex;
justify-content: center;
}
// h1 {
// display: flex;
// justify-content: center;
// }
.picture-upload {
margin: 30px 0;
}
.submit,
.delete-identity {
display: flex;
justify-content: center;
}
.submit {
margin: 30px 0;
}
.username-field + .field {
margin-bottom: 0;
}
// .username-field + .field {
// margin-bottom: 0;
// }
:deep(.buttons > *:not(:last-child) .button) {
@include margin-right(0.5rem);
@ -286,12 +272,12 @@ const baseIdentity: IPerson = {
suspended: false,
};
const identity = ref(baseIdentity);
const identity = ref<IPerson>(baseIdentity);
watch(person, () => {
console.debug("person changed", person.value);
if (person.value) {
identity.value = person.value;
identity.value = { ...person.value };
}
});

View File

@ -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");
@ -36,7 +29,10 @@ const userRole = getValueFromMeta("auth-user-role") as ICurrentUserRole;
const router = useRouter();
const { onDone, mutate } = useMutation<
const {
onDone: onUpdateCurrentUserClientDone,
mutate: updateCurrentUserClient,
} = useMutation<
{ updateCurrentUser: ICurrentUser },
{ id: string; email: string; isLoggedIn: boolean; role: ICurrentUserRole }
>(UPDATE_CURRENT_USER_CLIENT);
@ -45,9 +41,13 @@ const { onResult: onLoggedUserResult, load: loadUser } = useLazyQuery<{
loggedUser: IUser;
}>(LOGGED_USER);
onDone(async () => {
onUpdateCurrentUserClientDone(async () => {
loadUser();
onLoggedUserResult(async ({ data: { loggedUser } }) => {
});
onLoggedUserResult(async (result) => {
if (result.loading) return;
const loggedUser = result.data.loggedUser;
if (loggedUser.defaultActor) {
await changeIdentity(loggedUser.defaultActor);
await router.push({ name: RouteName.HOME });
@ -55,7 +55,6 @@ onDone(async () => {
// No need to push to REGISTER_PROFILE, the navbar will do it for us
}
});
});
onMounted(async () => {
if (!(userId && userEmail && userRole && accessToken && refreshToken)) {
@ -67,13 +66,15 @@ onMounted(async () => {
email: userEmail,
role: userRole,
isLoggedIn: true,
defaultActor: undefined,
actors: [],
},
accessToken,
refreshToken,
};
saveUserData(login);
mutate({
updateCurrentUserClient({
id: userId,
email: userEmail,
isLoggedIn: true,

View File

@ -71,7 +71,9 @@ defmodule Mobilizon.Web.AuthController do
render(conn, "callback.html", %{
access_token: access_token,
refresh_token: refresh_token,
user: user
user: user,
username: username_from_ueberauth(auth),
name: display_name_from_ueberauth(auth)
})
else
err ->
@ -114,6 +116,18 @@ defmodule Mobilizon.Web.AuthController do
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}
defp provider_config(provider_name) do
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,
role: user_role,
default_actor_id: user_actor_id
}
},
username: username,
name: name
} = assigns
) do
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-email", content: user_email),
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,