Enable E2E tests in CI

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

js/src/App.vue

@@ -57,13 +57,17 @@ import {
 } from "vue";
 import { LocationType } from "@/types/user-location.model";
 import { useMutation, useQuery } from "@vue/apollo-composable";
-import { initializeCurrentActor } from "@/utils/identity";
+import {
+  initializeCurrentActor,
+  NoIdentitiesException,
+} from "@/utils/identity";
 import { useI18n } from "vue-i18n";
 import { Snackbar } from "@/plugins/snackbar";
 import { Notifier } from "@/plugins/notifier";
 import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
 import { useRouter } from "vue-router";
+import RouteName from "@/router/name";
 
 const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
 
@@ -130,7 +134,19 @@ interval.value = setInterval(async () => {
 
 onBeforeMount(async () => {
   if (initializeCurrentUser()) {
-    await initializeCurrentActor();
+    try {
+      await initializeCurrentActor();
+    } catch (err) {
+      if (err instanceof NoIdentitiesException) {
+        await router.push({
+          name: RouteName.REGISTER_PROFILE,
+          params: {
+            email: localStorage.getItem(AUTH_USER_EMAIL),
+            userAlreadyActivated: "true",
+          },
+        });
+      }
+    }
   }
 });
 

js/src/components/NavBar.vue

@@ -406,11 +406,11 @@ watch(identities, () => {
   // If we don't have any identities, the user has validated their account,
   // is logging for the first time but didn't create an identity somehow
   if (identities.value && identities.value.length === 0) {
-    console.debug(
+    console.warn(
       "We have no identities listed for current user",
       identities.value
     );
-    console.debug("Pushing route to REGISTER_PROFILE");
+    console.info("Pushing route to REGISTER_PROFILE");
     router.push({
       name: RouteName.REGISTER_PROFILE,
       params: {

js/src/composition/apollo/user.ts

@@ -66,15 +66,7 @@ export async function updateLocale(locale: string) {
   }));
 }
 
-export function registerAccount(
-  variables: {
-    preferredUsername: string;
-    name: string;
-    summary: string;
-    email: string;
-  },
-  userAlreadyActivated: boolean
-) {
+export function registerAccount() {
   return useMutation<
     { registerPerson: IPerson },
     {
@@ -84,12 +76,12 @@ export function registerAccount(
       email: string;
     }
   >(REGISTER_PERSON, () => ({
-    variables,
     update: (
       store: ApolloCache<{ registerPerson: IPerson }>,
-      { data: localData }: FetchResult
+      { data: localData }: FetchResult,
+      { context }
     ) => {
-      if (userAlreadyActivated) {
+      if (context?.userAlreadyActivated) {
         const identitiesData = store.readQuery<{ identities: IPerson[] }>({
           query: IDENTITIES,
         });

js/src/router/user.ts

@@ -28,7 +28,7 @@ export const userRoutes: RouteRecordRaw[] = [
     beforeEnter: beforeRegisterGuard,
   },
   {
-    path: "/register/profile",
+    path: "/register/profile/:email/:userAlreadyActivated?",
     name: UserRouteName.REGISTER_PROFILE,
     component: (): Promise<any> => import("@/views/Account/RegisterView.vue"),
     // We can only pass string values through params, therefore

js/src/utils/identity.ts

@@ -11,7 +11,7 @@ import { computed, watch } from "vue";
 
 export class NoIdentitiesException extends Error {}
 
-export function saveActorData(obj: IPerson): void {
+function saveActorData(obj: IPerson): void {
   localStorage.setItem(AUTH_USER_ACTOR_ID, `${obj.id}`);
 }
 

js/src/views/Account/RegisterView.vue

@@ -1,120 +1,127 @@
 <template>
-  <section class="container mx-auto">
-    <div class="">
-      <div class="">
-        <h1 class="text-2xl" v-if="userAlreadyActivated">
-          {{ $t("Congratulations, your account is now created!") }}
-        </h1>
-        <h1 class="text-2xl" v-else>
+  <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="autoUpdateUsername"
+        />
+      </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("Register an account on {instanceName}!", {
-              instanceName,
+            t("Your account is nearly ready, {username}", {
+              username: identity.name ?? identity.preferredUsername,
             })
           }}
-        </h1>
-        <p class="prose dark:prose-invert" v-if="userAlreadyActivated">
-          {{ $t("Now, create your first profile:") }}
+        </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>
-        <form v-if="!validationSent" @submit.prevent="submit">
-          <o-field :label="$t('Displayed nickname')">
-            <o-input
-              aria-required="true"
-              required
-              v-model="identity.name"
-              @input="autoUpdateUsername"
-            />
-          </o-field>
-
-          <o-field
-            :label="$t('Username')"
-            :type="errors.preferred_username ? 'is-danger' : null"
-            :message="errors.preferred_username"
-          >
-            <o-field
-              :message="
-                $t(
-                  'Only alphanumeric lowercased characters and underscores are supported.'
-                )
-              "
-            >
-              <o-input
-                aria-required="true"
-                required
-                expanded
-                v-model="identity.preferredUsername"
-                :validation-message="
-                  identity.preferredUsername
-                    ? $t(
-                        'Only alphanumeric lowercased characters and underscores are supported.'
-                      )
-                    : null
-                "
-              />
-              <p class="control">
-                <span class="button is-static">@{{ host }}</span>
-              </p>
-            </o-field>
-          </o-field>
-          <p class="description">
-            {{
-              $t(
-                "This identifier is unique to your profile. It allows others to find you."
-              )
-            }}
-          </p>
-
-          <o-field :label="$t('Short bio')">
-            <o-input
-              type="textarea"
-              maxlength="100"
-              rows="2"
-              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="control has-text-centered">
-            <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-notification>
-        </div>
-      </div>
+        <o-button tag="router-link" :to="{ name: RouteName.HOME }">{{
+          t("Back to homepage")
+        }}</o-button>
+      </o-notification>
     </div>
   </section>
 </template>
@@ -173,61 +180,42 @@ const autoUpdateUsername = () => {
   identity.value.preferredUsername = convertToUsername(identity.value.name);
 };
 
+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 = {};
-  const { onDone, onError } = registerAccount(
+  mutate(
     { email: props.email, ...identity.value },
-    props.userAlreadyActivated
+    { context: { userAlreadyActivated: props.userAlreadyActivated } }
   );
-
-  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] = error.message;
-        return acc;
-      },
-      {}
-    );
-    console.error("Error while registering person", err);
-    console.error("Errors while registering person", errors);
-    sendingValidation.value = false;
-  });
 };
 </script>
-
-<style lang="scss" scoped>
-.avatar-enter-active {
-  transition: opacity 1s ease;
-}
-
-.avatar-enter,
-.avatar-leave-to {
-  opacity: 0;
-}
-
-.avatar-leave {
-  display: none;
-}
-
-.container .columns {
-  margin: 1rem auto 3rem;
-}
-
-p.description {
-  font-size: 0.9rem;
-  margin-bottom: 15px;
-  margin-top: -10px;
-}
-</style>

js/src/views/HomeView.vue

@@ -365,7 +365,12 @@ onMounted(() => {
 const router = useRouter();
 
 watch(loggedUser, (loggedUserValue) => {
-  if (loggedUserValue?.id && loggedUserValue?.settings === null) {
+  if (
+    loggedUserValue?.id &&
+    loggedUserValue?.settings === null &&
+    loggedUserValue.defaultActor?.id
+  ) {
+    console.info("No user settings, going to onboarding", loggedUserValue);
     router.push({
       name: RouteName.WELCOME_SCREEN,
       params: { step: "1" },

js/src/views/User/RegisterView.vue

@@ -91,7 +91,7 @@
         <form @submit.prevent="submit">
           <o-field
             :label="t('Email')"
-            :type="errorEmailType"
+            :variant="errorEmailType"
             :message="errorEmailMessage"
             label-for="email"
           >