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>
This commit is contained in:
Thomas Citharel
87
src/views/Account/IdentityPicker.vue
Normal file
87
src/views/Account/IdentityPicker.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="">
|
||||
<h2 class="">{{ t("Pick an identity") }}</h2>
|
||||
</header>
|
||||
<section class="">
|
||||
<transition-group
|
||||
tag="ul"
|
||||
class="grid grid-cols-1 gap-y-3 m-5 max-w-md"
|
||||
enter-active-class="duration-300 ease-out"
|
||||
enter-from-class="transform opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="duration-200 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="transform opacity-0"
|
||||
>
|
||||
<li
|
||||
class="relative focus-within:shadow-lg"
|
||||
v-for="identity in identities"
|
||||
:key="identity?.id"
|
||||
>
|
||||
<input
|
||||
class="sr-only peer"
|
||||
type="radio"
|
||||
:value="identity"
|
||||
name="availableActors"
|
||||
v-model="currentIdentity"
|
||||
:id="`availableActor-${identity?.id}`"
|
||||
/>
|
||||
<label
|
||||
class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
|
||||
:for="`availableActor-${identity?.id}`"
|
||||
>
|
||||
<figure class="h-12 w-12" v-if="identity?.avatar">
|
||||
<img
|
||||
class="rounded-full h-full w-full object-cover"
|
||||
:src="identity.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
<div class="flex-1 w-px">
|
||||
<h3 class="line-clamp-2">{{ identity?.name }}</h3>
|
||||
<small class="flex truncate">{{
|
||||
`@${identity?.preferredUsername}`
|
||||
}}</small>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</transition-group>
|
||||
</section>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IPerson } from "@/types/actor";
|
||||
import { useCurrentUserIdentities } from "@/composition/apollo/actor";
|
||||
import { computed } from "vue";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useHead } from "@vueuse/head";
|
||||
|
||||
const { identities } = useCurrentUserIdentities();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: computed(() => t("Identities")),
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: IPerson;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const currentIdentity = computed<IPerson>({
|
||||
get(): IPerson {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(identity: IPerson) {
|
||||
emit("update:modelValue", identity);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
111
src/views/Account/IdentityPickerWrapper.vue
Normal file
111
src/views/Account/IdentityPickerWrapper.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-if="inline && currentIdentity"
|
||||
class="inline box cursor-pointer"
|
||||
@click="activateModal"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<div class="">
|
||||
<figure class="" v-if="currentIdentity.avatar">
|
||||
<img
|
||||
class="rounded-full"
|
||||
:src="currentIdentity.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
</div>
|
||||
<div class="" v-if="currentIdentity.name">
|
||||
<p class="">{{ currentIdentity.name }}</p>
|
||||
<p class="">
|
||||
{{ `@${currentIdentity.preferredUsername}` }}
|
||||
<span v-if="masked">{{ t("(Masked)") }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="" v-else>
|
||||
{{ `@${currentIdentity.preferredUsername}` }}
|
||||
</div>
|
||||
<o-button
|
||||
variant="text"
|
||||
v-if="identities && identities.length > 1"
|
||||
@click="activateModal"
|
||||
>
|
||||
{{ t("Change") }}
|
||||
</o-button>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-else-if="currentIdentity"
|
||||
class="cursor-pointer"
|
||||
@click="activateModal"
|
||||
>
|
||||
<figure class="h-12 w-12" v-if="currentIdentity.avatar">
|
||||
<img
|
||||
class="rounded-full object-cover h-full"
|
||||
:src="currentIdentity.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
</span>
|
||||
<o-modal
|
||||
v-model:active="isComponentModalActive"
|
||||
:close-button-aria-label="t('Close')"
|
||||
>
|
||||
<identity-picker v-if="currentIdentity" v-model="currentIdentity" />
|
||||
</o-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useCurrentUserIdentities } from "@/composition/apollo/actor";
|
||||
import { computed, ref } from "vue";
|
||||
import { IPerson } from "../../types/actor";
|
||||
import IdentityPicker from "./IdentityPicker.vue";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { identities } = useCurrentUserIdentities();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: IPerson;
|
||||
inline?: boolean;
|
||||
masked?: boolean;
|
||||
}>(),
|
||||
{
|
||||
inline: true,
|
||||
masked: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const isComponentModalActive = ref(false);
|
||||
|
||||
const currentIdentity = computed({
|
||||
get(): IPerson | undefined {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(identity: IPerson | undefined) {
|
||||
emit("update:modelValue", identity);
|
||||
isComponentModalActive.value = false;
|
||||
},
|
||||
});
|
||||
|
||||
const hasOtherIdentities = computed((): boolean => {
|
||||
return identities.value !== undefined && identities.value.length > 1;
|
||||
});
|
||||
|
||||
const activateModal = (): void => {
|
||||
if (hasOtherIdentities.value) {
|
||||
isComponentModalActive.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
230
src/views/Account/RegisterView.vue
Normal file
230
src/views/Account/RegisterView.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<section class="container mx-auto max-w-screen-sm">
|
||||
<h1 class="text-2xl" v-if="userAlreadyActivated">
|
||||
{{ t("Congratulations, your account is now created!") }}
|
||||
</h1>
|
||||
<h1 class="text-2xl" v-else>
|
||||
{{
|
||||
t("Register an account on {instanceName}!", {
|
||||
instanceName,
|
||||
})
|
||||
}}
|
||||
</h1>
|
||||
<p class="prose dark:prose-invert" v-if="userAlreadyActivated">
|
||||
{{ t("Now, create your first profile:") }}
|
||||
</p>
|
||||
<form v-if="!validationSent" @submit.prevent="submit">
|
||||
<o-notification variant="danger" v-if="errors.extra">
|
||||
{{ errors.extra }}
|
||||
</o-notification>
|
||||
|
||||
<o-field :label="t('Displayed nickname')" labelFor="identityName">
|
||||
<o-input
|
||||
aria-required="true"
|
||||
required
|
||||
v-model="identity.name"
|
||||
id="identityName"
|
||||
@input="(event: any) => updateUsername(event.target.value)"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<o-field
|
||||
:label="t('Username')"
|
||||
:variant="errors.preferred_username ? 'danger' : null"
|
||||
:message="errors.preferred_username"
|
||||
labelFor="identityPreferredUsername"
|
||||
>
|
||||
<o-field
|
||||
:message="
|
||||
t(
|
||||
'Only alphanumeric lowercased characters and underscores are supported.'
|
||||
)
|
||||
"
|
||||
>
|
||||
<o-input
|
||||
aria-required="true"
|
||||
required
|
||||
expanded
|
||||
id="identityPreferredUsername"
|
||||
v-model="identity.preferredUsername"
|
||||
:validation-message="
|
||||
identity.preferredUsername
|
||||
? t(
|
||||
'Only alphanumeric lowercased characters and underscores are supported.'
|
||||
)
|
||||
: null
|
||||
"
|
||||
/>
|
||||
<p class="control">
|
||||
<span class="button">@{{ host }}</span>
|
||||
</p>
|
||||
</o-field>
|
||||
</o-field>
|
||||
<p class="prose dark:prose-invert">
|
||||
{{
|
||||
t(
|
||||
"This identifier is unique to your profile. It allows others to find you."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
|
||||
<o-field :label="t('Short bio')" labelFor="identitySummary">
|
||||
<o-input
|
||||
type="textarea"
|
||||
maxlength="100"
|
||||
rows="2"
|
||||
id="identitySummary"
|
||||
v-model="identity.summary"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<p class="prose dark:prose-invert">
|
||||
{{
|
||||
t(
|
||||
"You will be able to add an avatar and set other options in your account settings."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
|
||||
<p class="text-center">
|
||||
<o-button
|
||||
variant="primary"
|
||||
size="large"
|
||||
native-type="submit"
|
||||
:disabled="sendingValidation"
|
||||
>{{ t("Create my profile") }}</o-button
|
||||
>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div v-if="validationSent && !userAlreadyActivated">
|
||||
<o-notification variant="success" :closable="false">
|
||||
<h2 class="title">
|
||||
{{
|
||||
t("Your account is nearly ready, {username}", {
|
||||
username: identity.name ?? identity.preferredUsername,
|
||||
})
|
||||
}}
|
||||
</h2>
|
||||
<i18n-t keypath="A validation email was sent to {email}" tag="p">
|
||||
<template #email>
|
||||
<code>{{ email }}</code>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"Before you can login, you need to click on the link inside it to validate your account."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<o-button tag="router-link" :to="{ name: RouteName.HOME }">{{
|
||||
t("Back to homepage")
|
||||
}}</o-button>
|
||||
</o-notification>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Person } from "../../types/actor";
|
||||
import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
|
||||
import RouteName from "../../router/name";
|
||||
import { changeIdentity } from "../../utils/identity";
|
||||
import { useInstanceName } from "@/composition/apollo/config";
|
||||
import { ref, computed, onBeforeMount } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
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<{
|
||||
email: string;
|
||||
userAlreadyActivated?: boolean;
|
||||
}>(),
|
||||
{
|
||||
userAlreadyActivated: false,
|
||||
}
|
||||
);
|
||||
|
||||
const { instanceName } = useInstanceName();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: computed(() => t("Register")),
|
||||
});
|
||||
|
||||
const host: string = MOBILIZON_INSTANCE_HOST;
|
||||
|
||||
const errors = ref<Record<string, unknown>>({});
|
||||
|
||||
const validationSent = ref(false);
|
||||
|
||||
const sendingValidation = ref(false);
|
||||
|
||||
const identity = ref(new Person());
|
||||
|
||||
onBeforeMount(() => {
|
||||
// Make sure no one goes to this page if we don't want to
|
||||
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 = convertToUsername(username);
|
||||
}
|
||||
if (name) {
|
||||
identity.value.name = name;
|
||||
}
|
||||
});
|
||||
|
||||
const updateUsername = (value: string) => {
|
||||
identity.value.preferredUsername = convertToUsername(value);
|
||||
};
|
||||
|
||||
const { onDone, onError, mutate } = registerAccount();
|
||||
|
||||
onDone(async ({ data }) => {
|
||||
validationSent.value = true;
|
||||
window.localStorage.setItem("new-registered-user", "yes");
|
||||
|
||||
if (data && props.userAlreadyActivated) {
|
||||
await changeIdentity(data.registerPerson);
|
||||
|
||||
await router.push({ name: RouteName.HOME });
|
||||
}
|
||||
});
|
||||
|
||||
onError((err) => {
|
||||
errors.value = err.graphQLErrors.reduce(
|
||||
(acc: { [key: string]: string }, error: any) => {
|
||||
acc[error.details ?? error.field ?? "extra"] = Array.isArray(
|
||||
error.message
|
||||
)
|
||||
? (error.message as string[]).join(",")
|
||||
: error.message;
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
console.error("Error while registering person", err);
|
||||
console.error("Errors while registering person", errors);
|
||||
sendingValidation.value = false;
|
||||
});
|
||||
|
||||
const submit = async (): Promise<void> => {
|
||||
sendingValidation.value = true;
|
||||
errors.value = {};
|
||||
mutate(
|
||||
{ email: props.email, ...identity.value },
|
||||
{ context: { userAlreadyActivated: props.userAlreadyActivated } }
|
||||
);
|
||||
};
|
||||
</script>
|
||||
759
src/views/Account/children/EditIdentity.vue
Normal file
759
src/views/Account/children/EditIdentity.vue
Normal file
@@ -0,0 +1,759 @@
|
||||
<template>
|
||||
<div>
|
||||
<breadcrumbs-nav :links="breadcrumbsLinks" />
|
||||
<div v-if="identity">
|
||||
<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>
|
||||
</h1>
|
||||
<o-field horizontal :label="t('Avatar')">
|
||||
<picture-upload
|
||||
v-model="avatarFile"
|
||||
:defaultImage="identity.avatar"
|
||||
:maxSize="avatarMaxSize"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<o-field
|
||||
horizontal
|
||||
:label="t('Display name')"
|
||||
label-for="identity-display-name"
|
||||
>
|
||||
<o-input
|
||||
aria-required="true"
|
||||
required
|
||||
v-model="identity.name"
|
||||
@input="(event: any) => updateUsername(event.target.value)"
|
||||
id="identity-display-name"
|
||||
dir="auto"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<o-field
|
||||
horizontal
|
||||
class="username-field"
|
||||
:label="t('Username')"
|
||||
label-for="identity-username"
|
||||
:message="message"
|
||||
>
|
||||
<o-field class="!mt-0">
|
||||
<o-input
|
||||
expanded
|
||||
class="!mt-0"
|
||||
aria-required="true"
|
||||
required
|
||||
v-model="identity.preferredUsername"
|
||||
:disabled="isUpdate"
|
||||
dir="auto"
|
||||
:use-html5-validation="!isUpdate"
|
||||
pattern="[a-z0-9_]+"
|
||||
id="identity-username"
|
||||
/>
|
||||
|
||||
<p class="control">
|
||||
<span class="button is-static !h-auto">@{{ getInstanceHost }}</span>
|
||||
</p>
|
||||
</o-field>
|
||||
</o-field>
|
||||
|
||||
<o-field
|
||||
horizontal
|
||||
:label="t('Description')"
|
||||
label-for="identity-summary"
|
||||
>
|
||||
<o-input
|
||||
type="textarea"
|
||||
dir="auto"
|
||||
aria-required="false"
|
||||
v-model="identity.summary"
|
||||
id="identity-summary"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<o-notification
|
||||
variant="danger"
|
||||
has-icon
|
||||
aria-close-label="Close notification"
|
||||
role="alert"
|
||||
:key="error"
|
||||
v-for="error in errors"
|
||||
>{{ error }}</o-notification
|
||||
>
|
||||
|
||||
<o-field class="flex justify-center !my-6">
|
||||
<div class="control">
|
||||
<o-button type="button" variant="primary" @click="submit()">
|
||||
{{ t("Save") }}
|
||||
</o-button>
|
||||
</div>
|
||||
</o-field>
|
||||
|
||||
<o-field class="flex justify-center">
|
||||
<o-button
|
||||
v-if="isUpdate"
|
||||
@click="openDeleteIdentityConfirmation()"
|
||||
variant="text"
|
||||
>
|
||||
{{ t("Delete this identity") }}
|
||||
</o-button>
|
||||
</o-field>
|
||||
|
||||
<section v-if="isUpdate">
|
||||
<h2>{{ t("Profile feeds") }}</h2>
|
||||
<p>
|
||||
{{
|
||||
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."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<div v-if="identity.feedTokens && identity.feedTokens.length > 0">
|
||||
<div
|
||||
class="flex flex-wrap gap-2"
|
||||
v-for="feedToken in identity.feedTokens"
|
||||
:key="feedToken.token"
|
||||
>
|
||||
<o-tooltip
|
||||
:label="t('URL copied to clipboard')"
|
||||
:active="showCopiedTooltip.atom"
|
||||
always
|
||||
variant="success"
|
||||
position="left"
|
||||
>
|
||||
<o-button
|
||||
tag="a"
|
||||
icon-left="rss"
|
||||
@click="
|
||||
(e: Event) =>
|
||||
copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
|
||||
"
|
||||
:href="tokenToURL(feedToken.token, 'atom')"
|
||||
target="_blank"
|
||||
>{{ t("RSS/Atom Feed") }}</o-button
|
||||
>
|
||||
</o-tooltip>
|
||||
<o-tooltip
|
||||
:label="t('URL copied to clipboard')"
|
||||
:active="showCopiedTooltip.ics"
|
||||
always
|
||||
variant="success"
|
||||
position="left"
|
||||
>
|
||||
<o-button
|
||||
tag="a"
|
||||
@click="
|
||||
(e: Event) =>
|
||||
copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
|
||||
"
|
||||
icon-left="calendar-sync"
|
||||
:href="tokenToURL(feedToken.token, 'ics')"
|
||||
target="_blank"
|
||||
>{{ t("ICS/WebCal Feed") }}</o-button
|
||||
>
|
||||
</o-tooltip>
|
||||
<o-button
|
||||
icon-left="refresh"
|
||||
variant="text"
|
||||
@click="openRegenerateFeedTokensConfirmation"
|
||||
>{{ t("Regenerate new links") }}</o-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<o-button
|
||||
icon-left="refresh"
|
||||
variant="text"
|
||||
@click="generateFeedTokens"
|
||||
>{{ t("Create new links") }}</o-button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/_mixins" as *;
|
||||
// h1 {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
// .username-field + .field {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
|
||||
:deep(.buttons > *:not(:last-child) .button) {
|
||||
@include margin-right(0.5rem);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CREATE_PERSON,
|
||||
DELETE_PERSON,
|
||||
FETCH_PERSON,
|
||||
IDENTITIES,
|
||||
PERSON_FRAGMENT,
|
||||
PERSON_FRAGMENT_FEED_TOKENS,
|
||||
UPDATE_PERSON,
|
||||
} from "@/graphql/actor";
|
||||
import { IPerson, displayName } from "@/types/actor";
|
||||
import PictureUpload from "@/components/PictureUpload.vue";
|
||||
import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
|
||||
import RouteName from "@/router/name";
|
||||
import { buildFileFromIMedia, buildFileVariable } from "@/utils/image";
|
||||
import { changeIdentity } from "@/utils/identity";
|
||||
import {
|
||||
CREATE_FEED_TOKEN_ACTOR,
|
||||
DELETE_FEED_TOKEN,
|
||||
} from "@/graphql/feed_tokens";
|
||||
import { IFeedToken } from "@/types/feedtoken.model";
|
||||
import { ServerParseError } from "@apollo/client/link/http";
|
||||
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
|
||||
import pick from "lodash/pick";
|
||||
import { ActorType } from "@/types/enums";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCurrentActorClient } from "@/composition/apollo/actor";
|
||||
import { useMutation, useQuery, useApolloClient } from "@vue/apollo-composable";
|
||||
import { useAvatarMaxSize } from "@/composition/config";
|
||||
import { computed, inject, reactive, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { convertToUsername } from "@/utils/username";
|
||||
import { Dialog } from "@/plugins/dialog";
|
||||
import { Notifier } from "@/plugins/notifier";
|
||||
import { AbsintheGraphQLErrors } from "@/types/errors.model";
|
||||
import { ICurrentUser } from "@/types/current-user.model";
|
||||
import { useHead } from "@vueuse/head";
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps<{ isUpdate: boolean; identityName?: string }>();
|
||||
|
||||
const { currentActor } = useCurrentActorClient();
|
||||
|
||||
const {
|
||||
result: personResult,
|
||||
onError: onPersonError,
|
||||
onResult: onPersonResult,
|
||||
} = useQuery<{
|
||||
fetchPerson: IPerson;
|
||||
}>(
|
||||
FETCH_PERSON,
|
||||
() => ({
|
||||
username: props.identityName,
|
||||
}),
|
||||
() => ({
|
||||
enabled: props.identityName !== undefined,
|
||||
})
|
||||
);
|
||||
|
||||
onPersonResult(async ({ data }) => {
|
||||
avatarFile.value = await buildFileFromIMedia(data?.fetchPerson?.avatar);
|
||||
});
|
||||
|
||||
onPersonError((err) => handleErrors(err as unknown as AbsintheGraphQLErrors));
|
||||
|
||||
const person = computed(() => personResult.value?.fetchPerson);
|
||||
|
||||
const baseIdentity: IPerson = {
|
||||
id: undefined,
|
||||
avatar: null,
|
||||
name: "",
|
||||
preferredUsername: "",
|
||||
summary: "",
|
||||
feedTokens: [],
|
||||
url: "",
|
||||
domain: null,
|
||||
type: ActorType.PERSON,
|
||||
suspended: false,
|
||||
};
|
||||
|
||||
const identity = ref<IPerson>(baseIdentity);
|
||||
|
||||
watch(person, () => {
|
||||
console.debug("person changed", person.value);
|
||||
if (person.value) {
|
||||
identity.value = { ...person.value };
|
||||
}
|
||||
});
|
||||
|
||||
const avatarMaxSize = useAvatarMaxSize();
|
||||
|
||||
const errors = ref<string[]>([]);
|
||||
const avatarFile = ref<File | null>(null);
|
||||
const showCopiedTooltip = reactive({ ics: false, atom: false });
|
||||
|
||||
const isUpdate = computed(() => props.isUpdate);
|
||||
const identityName = computed(() => props.identityName);
|
||||
|
||||
const message = computed((): string | null => {
|
||||
if (props.isUpdate) return null;
|
||||
return t(
|
||||
"Only alphanumeric lowercased characters and underscores are supported."
|
||||
);
|
||||
});
|
||||
|
||||
watch(isUpdate, () => {
|
||||
resetFields();
|
||||
});
|
||||
|
||||
watch(identityName, async () => {
|
||||
// Only used when we update the identity
|
||||
if (!isUpdate.value) {
|
||||
identity.value = baseIdentity;
|
||||
return;
|
||||
}
|
||||
|
||||
await redirectIfNoIdentitySelected(identityName.value);
|
||||
|
||||
if (!identityName.value) {
|
||||
router.push({ name: "CreateIdentity" });
|
||||
}
|
||||
|
||||
if (identityName.value && identity.value) {
|
||||
avatarFile.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
const submit = (): Promise<void> => {
|
||||
if (props.isUpdate) return updateIdentity();
|
||||
|
||||
return createIdentity();
|
||||
};
|
||||
|
||||
const {
|
||||
mutate: deletePersonMutation,
|
||||
onDone: deletePersonDone,
|
||||
onError: deletePersonError,
|
||||
} = useMutation(DELETE_PERSON, () => ({
|
||||
update: (store: ApolloCache<InMemoryCache>) => {
|
||||
const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, "actors"> }>({
|
||||
query: IDENTITIES,
|
||||
});
|
||||
|
||||
if (data) {
|
||||
store.writeQuery({
|
||||
query: IDENTITIES,
|
||||
data: {
|
||||
loggedUser: {
|
||||
...data.loggedUser,
|
||||
actors: data.loggedUser.actors.filter(
|
||||
(i) => i.id !== identity.value.id
|
||||
),
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
const notifier = inject<Notifier>("notifier");
|
||||
|
||||
const { resolveClient } = useApolloClient();
|
||||
|
||||
deletePersonDone(async () => {
|
||||
notifier?.success(
|
||||
t("Identity {displayName} deleted", {
|
||||
displayName: displayName(identity.value),
|
||||
})
|
||||
);
|
||||
/**
|
||||
* If we just deleted the current identity,
|
||||
* we need to change it to the next one
|
||||
*/
|
||||
const client = resolveClient();
|
||||
const data = client.readQuery<{
|
||||
loggedUser: Pick<ICurrentUser, "actors">;
|
||||
}>({ query: IDENTITIES });
|
||||
if (data) {
|
||||
await maybeUpdateCurrentActorCache(data.loggedUser.actors[0]);
|
||||
}
|
||||
|
||||
await redirectIfNoIdentitySelected();
|
||||
});
|
||||
|
||||
deletePersonError((err) => handleError(err));
|
||||
|
||||
/**
|
||||
* Delete an identity
|
||||
*/
|
||||
const deleteIdentity = async (): Promise<void> => {
|
||||
deletePersonMutation({
|
||||
id: identity.value?.id,
|
||||
});
|
||||
};
|
||||
|
||||
const {
|
||||
mutate: updateIdentityMutation,
|
||||
onDone: updateIdentityDone,
|
||||
onError: updateIdentityError,
|
||||
} = useMutation(UPDATE_PERSON, () => ({
|
||||
update: (
|
||||
store: ApolloCache<InMemoryCache>,
|
||||
{ data: updateData }: FetchResult
|
||||
) => {
|
||||
const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, "actors"> }>({
|
||||
query: IDENTITIES,
|
||||
});
|
||||
|
||||
if (data && updateData?.updatePerson) {
|
||||
maybeUpdateCurrentActorCache(updateData?.updatePerson);
|
||||
|
||||
store.writeFragment({
|
||||
fragment: PERSON_FRAGMENT,
|
||||
id: `Person:${updateData?.updatePerson.id}`,
|
||||
data: {
|
||||
...updateData?.updatePerson,
|
||||
type: ActorType.PERSON,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
updateIdentityDone(() => {
|
||||
notifier?.success(
|
||||
t("Identity {displayName} updated", {
|
||||
displayName: displayName(identity.value),
|
||||
}) as string
|
||||
);
|
||||
});
|
||||
|
||||
updateIdentityError((err) => handleError(err));
|
||||
|
||||
const updateIdentity = async (): Promise<void> => {
|
||||
const variables = await buildVariables();
|
||||
|
||||
updateIdentityMutation(variables);
|
||||
};
|
||||
|
||||
const {
|
||||
mutate: createIdentityMutation,
|
||||
onDone: createIdentityDone,
|
||||
onError: createIdentityError,
|
||||
} = useMutation(CREATE_PERSON, () => ({
|
||||
update: (
|
||||
store: ApolloCache<InMemoryCache>,
|
||||
{ data: updateData }: FetchResult
|
||||
) => {
|
||||
const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, "actors"> }>({
|
||||
query: IDENTITIES,
|
||||
});
|
||||
|
||||
if (data && updateData?.createPerson) {
|
||||
store.writeQuery({
|
||||
query: IDENTITIES,
|
||||
data: {
|
||||
loggedUser: {
|
||||
...data.loggedUser,
|
||||
actors: [
|
||||
...data.loggedUser.actors,
|
||||
{ ...updateData?.createPerson, type: ActorType.PERSON },
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
createIdentityDone(() => {
|
||||
notifier?.success(
|
||||
t("Identity {displayName} created", {
|
||||
displayName: displayName(identity.value),
|
||||
})
|
||||
);
|
||||
|
||||
router.push({
|
||||
name: RouteName.UPDATE_IDENTITY,
|
||||
params: { identityName: identity.value.preferredUsername },
|
||||
});
|
||||
});
|
||||
|
||||
createIdentityError((err) => handleError(err));
|
||||
|
||||
const createIdentity = async (): Promise<void> => {
|
||||
const variables = await buildVariables();
|
||||
|
||||
createIdentityMutation(variables);
|
||||
};
|
||||
|
||||
const handleErrors = (absintheErrors: AbsintheGraphQLErrors): void => {
|
||||
if (absintheErrors.some((error) => error.status_code === 401)) {
|
||||
router.push({ name: RouteName.LOGIN });
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
const getInstanceHost = computed((): string => {
|
||||
return MOBILIZON_INSTANCE_HOST;
|
||||
});
|
||||
|
||||
const tokenToURL = (token: string, format: string): string => {
|
||||
return `${window.location.origin}/events/going/${token}/${format}`;
|
||||
};
|
||||
|
||||
const copyURL = (e: Event, url: string, format: "ics" | "atom"): void => {
|
||||
if (navigator.clipboard) {
|
||||
e.preventDefault();
|
||||
navigator.clipboard.writeText(url);
|
||||
showCopiedTooltip[format] = true;
|
||||
setTimeout(() => {
|
||||
showCopiedTooltip[format] = false;
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const generateFeedTokens = async (): Promise<void> => {
|
||||
await createNewFeedToken({ actorId: identity.value?.id });
|
||||
};
|
||||
|
||||
const regenerateFeedTokens = async (): Promise<void> => {
|
||||
if (identity.value?.feedTokens.length < 1) return;
|
||||
await deleteFeedToken({ token: identity.value.feedTokens[0].token });
|
||||
await createNewFeedToken(
|
||||
{ actorId: identity.value?.id },
|
||||
{
|
||||
update(cache, { data }) {
|
||||
const actorId = data?.createFeedToken.actor?.id;
|
||||
const newFeedToken = data?.createFeedToken.token;
|
||||
|
||||
if (!newFeedToken) return;
|
||||
|
||||
let cachedData = cache.readFragment<{
|
||||
id: string | undefined;
|
||||
feedTokens: { token: string }[];
|
||||
}>({
|
||||
id: `Person:${actorId}`,
|
||||
fragment: PERSON_FRAGMENT_FEED_TOKENS,
|
||||
});
|
||||
// Remove the old token
|
||||
cachedData = {
|
||||
id: cachedData?.id,
|
||||
feedTokens: [
|
||||
...(cachedData?.feedTokens ?? []).slice(0, -1),
|
||||
{ token: newFeedToken },
|
||||
],
|
||||
};
|
||||
cache.writeFragment({
|
||||
id: `Person:${actorId}`,
|
||||
fragment: PERSON_FRAGMENT_FEED_TOKENS,
|
||||
data: cachedData,
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const { mutate: deleteFeedToken } = useMutation(DELETE_FEED_TOKEN);
|
||||
|
||||
const { mutate: createNewFeedToken } = useMutation<{
|
||||
createFeedToken: IFeedToken;
|
||||
}>(CREATE_FEED_TOKEN_ACTOR, () => ({
|
||||
update(cache, { data }) {
|
||||
const actorId = data?.createFeedToken.actor?.id;
|
||||
const newFeedToken = data?.createFeedToken.token;
|
||||
|
||||
if (!newFeedToken) return;
|
||||
|
||||
let cachedData = cache.readFragment<{
|
||||
id: string | undefined;
|
||||
feedTokens: { token: string }[];
|
||||
}>({
|
||||
id: `Person:${actorId}`,
|
||||
fragment: PERSON_FRAGMENT_FEED_TOKENS,
|
||||
});
|
||||
// Add the new token to the list
|
||||
cachedData = {
|
||||
id: cachedData?.id,
|
||||
feedTokens: [...(cachedData?.feedTokens ?? []), { token: newFeedToken }],
|
||||
};
|
||||
cache.writeFragment({
|
||||
id: `Person:${actorId}`,
|
||||
fragment: PERSON_FRAGMENT_FEED_TOKENS,
|
||||
data: cachedData,
|
||||
});
|
||||
},
|
||||
}));
|
||||
|
||||
const dialog = inject<Dialog>("dialog");
|
||||
|
||||
const openRegenerateFeedTokensConfirmation = (): void => {
|
||||
dialog?.confirm({
|
||||
variant: "warning",
|
||||
title: t("Regenerate new links") as string,
|
||||
message: t(
|
||||
"You'll need to change the URLs where there were previously entered."
|
||||
) as string,
|
||||
confirmText: t("Regenerate new links") as string,
|
||||
cancelText: t("Cancel") as string,
|
||||
onConfirm: () => regenerateFeedTokens(),
|
||||
});
|
||||
};
|
||||
|
||||
const openDeleteIdentityConfirmation = (): void => {
|
||||
dialog?.prompt({
|
||||
variant: "danger",
|
||||
title: t("Delete your identity") as string,
|
||||
message: `${t(
|
||||
"This will delete / anonymize all content (events, comments, messages, participations…) created from this identity."
|
||||
)}
|
||||
<br /><br />
|
||||
${t(
|
||||
"If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity."
|
||||
)}
|
||||
${t(
|
||||
"Otherwise this identity will just be removed from the group administrators."
|
||||
)}
|
||||
<br /><br />
|
||||
${t(
|
||||
'To confirm, type your identity username "{preferredUsername}"',
|
||||
{
|
||||
preferredUsername: identity.value.preferredUsername,
|
||||
}
|
||||
)}`,
|
||||
confirmText: t("Delete {preferredUsername}", {
|
||||
preferredUsername: identity.value.preferredUsername,
|
||||
}),
|
||||
inputAttrs: {
|
||||
placeholder: identity.value.preferredUsername,
|
||||
pattern: identity.value.preferredUsername,
|
||||
},
|
||||
onConfirm: () => deleteIdentity(),
|
||||
});
|
||||
};
|
||||
|
||||
const handleError = (err: any) => {
|
||||
console.error(err);
|
||||
|
||||
if (err?.networkError?.name === "ServerParseError") {
|
||||
const error = err?.networkError as ServerParseError;
|
||||
|
||||
if (error?.response?.status === 413) {
|
||||
const errorMessage = props.isUpdate
|
||||
? t(
|
||||
"Unable to update the profile. The avatar picture may be too heavy."
|
||||
)
|
||||
: t(
|
||||
"Unable to create the profile. The avatar picture may be too heavy."
|
||||
);
|
||||
errors.value.push(errorMessage as string);
|
||||
}
|
||||
}
|
||||
|
||||
if (err.graphQLErrors !== undefined) {
|
||||
err.graphQLErrors.forEach(
|
||||
({ message: errorMessage }: { message: string }) => {
|
||||
notifier?.error(errorMessage);
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const buildVariables = async (): Promise<Record<string, unknown>> => {
|
||||
/**
|
||||
* We set the avatar only if user has selected one
|
||||
*/
|
||||
let avatarObj: Record<string, unknown> = { avatar: null };
|
||||
if (avatarFile.value) {
|
||||
avatarObj = buildFileVariable(
|
||||
avatarFile.value,
|
||||
"avatar",
|
||||
`${identity.value.preferredUsername}'s avatar`
|
||||
);
|
||||
}
|
||||
return pick({ ...identity.value, ...avatarObj }, [
|
||||
"id",
|
||||
"preferredUsername",
|
||||
"name",
|
||||
"summary",
|
||||
"avatar",
|
||||
]);
|
||||
};
|
||||
|
||||
const redirectIfNoIdentitySelected = async (identityParam?: string) => {
|
||||
if (identityParam) return;
|
||||
|
||||
// await loadLoggedPersonIfNeeded();
|
||||
|
||||
if (currentActor.value) {
|
||||
await router.push({
|
||||
params: { identityName: currentActor.value?.preferredUsername },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const maybeUpdateCurrentActorCache = async (newIdentity: IPerson) => {
|
||||
if (currentActor.value) {
|
||||
if (
|
||||
currentActor.value.preferredUsername === identity.value.preferredUsername
|
||||
) {
|
||||
await changeIdentity(newIdentity);
|
||||
}
|
||||
// currentActor.value = newIdentity;
|
||||
}
|
||||
};
|
||||
|
||||
// const loadLoggedPersonIfNeeded = async (bypassCache = false) => {
|
||||
// if (currentActor.value) return;
|
||||
|
||||
// const result = await this.$apollo.query({
|
||||
// query: CURRENT_ACTOR_CLIENT,
|
||||
// fetchPolicy: bypassCache ? "network-only" : undefined,
|
||||
// });
|
||||
|
||||
// currentActor.value = result.data.currentActor;
|
||||
// };
|
||||
|
||||
const resetFields = () => {
|
||||
// identity.value = new Person();
|
||||
// oldDisplayName.value = null;
|
||||
avatarFile.value = null;
|
||||
};
|
||||
|
||||
const breadcrumbsLinks = computed(
|
||||
(): { name: string; params: Record<string, any>; text: string }[] => {
|
||||
const links = [
|
||||
{
|
||||
name: RouteName.IDENTITIES,
|
||||
params: {},
|
||||
text: t("Profiles") as string,
|
||||
},
|
||||
];
|
||||
if (props.isUpdate && identity.value) {
|
||||
links.push({
|
||||
name: RouteName.UPDATE_IDENTITY,
|
||||
params: { identityName: identity.value.preferredUsername },
|
||||
text: identity.value.name,
|
||||
});
|
||||
} else {
|
||||
links.push({
|
||||
name: RouteName.CREATE_IDENTITY,
|
||||
params: {},
|
||||
text: t("New profile") as string,
|
||||
});
|
||||
}
|
||||
return links;
|
||||
}
|
||||
);
|
||||
|
||||
const updateUsername = (value: string) => {
|
||||
identity.value.preferredUsername = convertToUsername(value);
|
||||
};
|
||||
|
||||
useHead({
|
||||
title: computed(() => {
|
||||
let title = t("Create a new profile") as string;
|
||||
if (isUpdate.value) {
|
||||
title = t("Edit profile {profile}", {
|
||||
profile: identityName.value,
|
||||
}) as string;
|
||||
}
|
||||
return title;
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user