Fix anonymous & remote participation pages

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

js/src/components/Event/EventListViewCard.vue

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="bg-white dark:bg-gray-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2"
+    class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2"
   >
     <div class="flex gap-2">
       <div class="">

js/src/components/Participation/UnloggedParticipation.vue

@@ -1,41 +1,36 @@
 <template>
-  <section class="container mx-auto hero">
-    <div class="hero-body" v-if="event">
-      <div class="container mx-auto">
+  <section class="container mx-auto max-w-2xl">
     <h2 class="text-2xl">
-          {{ $t("You wish to participate to the following event") }}
+      {{ t("You wish to participate to the following event") }}
     </h2>
     <EventListViewCard v-if="event" :event="event" />
-        <div class="columns has-text-centered">
-          <div class="column">
-            <router-link
-              :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }"
-            >
-              <figure class="image is-128x128">
+    <div class="flex flex-wrap gap-4 items-center w-full my-6">
+      <div class="bg-white dark:bg-zinc-700 rounded-md p-4 flex-1">
+        <router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }">
+          <figure class="flex justify-center my-2">
             <img
-                  src="../../assets/undraw_profile.svg"
+              src="/img/undraw_profile.svg"
               alt="Profile illustration"
+              width="128"
+              height="128"
             />
           </figure>
           <o-button variant="primary">{{
-                $t("I have a Mobilizon account")
+            t("I have a Mobilizon account")
           }}</o-button>
         </router-link>
         <p>
           <small>
             {{
-                  $t(
-                    "Either on the {instance} instance or on another instance.",
-                    {
+              t("Either on the {instance} instance or on another instance.", {
                 instance: host,
-                    }
-                  )
+              })
             }}
           </small>
           <o-tooltip
             variant="dark"
             :label="
-                  $t(
+              t(
                 'Mobilizon is a federated network. You can interact with this event from a different server.'
               )
             "
@@ -44,13 +39,10 @@
           </o-tooltip>
         </p>
       </div>
-          <vertical-divider
-            :content="$t('Or')"
-            v-if="anonymousParticipationAllowed"
-          />
       <div
-            class="column"
+        class="bg-white dark:bg-zinc-700 rounded-md p-4 flex-1"
         v-if="
+          event &&
           anonymousParticipationAllowed &&
           hasAnonymousEmailParticipationMethod
         "
@@ -59,48 +51,49 @@
           :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
           v-if="event.local"
         >
-              <figure class="image is-128x128">
+          <figure class="flex justify-center my-2">
             <img
-                  src="../../assets/undraw_mail_2.svg"
+              width="128"
+              height="128"
+              src="/img/undraw_mail_2.svg"
               alt="Privacy illustration"
             />
           </figure>
           <o-button variant="primary">{{
-                $t("I don't have a Mobilizon account")
+            t("I don't have a Mobilizon account")
           }}</o-button>
         </router-link>
         <a :href="`${event.url}/participate/without-account`" v-else>
-              <figure class="image is-128x128">
+          <figure class="flex justify-center my-2">
             <img
-                  src="../../assets/undraw_mail_2.svg"
+              src="/img/undraw_mail_2.svg"
+              width="128"
+              height="128"
               alt="Privacy illustration"
             />
           </figure>
           <o-button variant="primary">{{
-                $t("I don't have a Mobilizon account")
+            t("I don't have a Mobilizon account")
           }}</o-button>
         </a>
         <p>
-              <small>{{ $t("Participate using your email address") }}</small>
+          <small>{{ t("Participate using your email address") }}</small>
           <br />
           <small v-if="!event.local">
-                {{ $t("You will be redirected to the original instance") }}
+            {{ t("You will be redirected to the original instance") }}
           </small>
         </p>
       </div>
     </div>
     <div class="has-text-centered">
       <o-button tag="a" variant="text" @click="router.go(-1)">{{
-            $t("Back to previous page")
+        t("Back to previous page")
       }}</o-button>
     </div>
-      </div>
-    </div>
   </section>
 </template>
 <script lang="ts" setup>
 import EventListViewCard from "@/components/Event/EventListViewCard.vue";
-import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
 import RouteName from "../../router/name";
 import { useFetchEvent } from "@/composition/apollo/event";
 import { useAnonymousParticipationConfig } from "@/composition/apollo/config";

js/src/components/Utils/RedirectWithAccount.vue

@@ -1,13 +1,22 @@
 <template>
-  <section class="container mx-auto hero is-fullheight">
-    <div class="hero-body">
-      <div class="container mx-auto">
-        <div class="columns is-vcentered">
-          <div class="column has-text-centered">
+  <section class="container mx-auto max-w-2xl">
+    <div class="flex flex-wrap gap-4 items-center w-full">
+      <div class="px-2 flex-1">
+        <h2 class="text-2xl">
+          {{
+            t("I have an account on {instance}.", { instance: instanceName })
+          }}
+        </h2>
+        <i18n-t keypath="My federated identity ends in {domain}">
+          <template #domain>
+            <code>@{{ host }}</code>
+          </template>
+        </i18n-t>
         <o-button
           variant="primary"
           size="medium"
           tag="router-link"
+          class="mt-4"
           :to="{
             name: RouteName.LOGIN,
             query: {
@@ -15,52 +24,54 @@
               redirect: pathAfterLogin,
             },
           }"
-              >{{ $t("Login on {instance}", { instance: host }) }}</o-button
+          >{{ t("Login on {instance}", { instance: host }) }}</o-button
         >
       </div>
-          <vertical-divider :content="$t('Or')" />
-          <div class="column">
+      <div class="sm:border-l-4 px-2 sm:px-4 flex-1">
         <h2 class="text-2xl">
-              {{ $t("I have an account on another Mobilizon instance.") }}
+          {{ t("I have an account on another Mobilizon instance.") }}
         </h2>
-            <p>{{ $t("Other software may also support this.") }}</p>
+        <p>{{ t("Other software may also support this.") }}</p>
         <p>{{ sentence }}</p>
         <form @submit.prevent="redirectToInstance">
-              <o-field :label="$t('Your federated identity')">
+          <o-field
+            :label="t('Your federated identity')"
+            label-for="remoteProfileInput"
+          >
             <o-field>
               <o-input
+                id="remoteProfileInput"
                 expanded
                 autocapitalize="none"
                 autocorrect="off"
                 v-model="remoteActorAddress"
-                    :placeholder="$t('profile@instance')"
+                :placeholder="t('profile{\'@\'}instance')"
               ></o-input>
               <p class="control">
-                    <button class="button is-primary" type="submit">
-                      {{ $t("Go") }}
-                    </button>
+                <o-button type="submit">
+                  {{ t("Go") }}
+                </o-button>
               </p>
             </o-field>
           </o-field>
         </form>
       </div>
     </div>
-        <div class="has-text-centered">
+    <div class="text-center">
       <o-button tag="a" variant="text" @click="$router.go(-1)">{{
-            $t("Back to previous page")
+        t("Back to previous page")
       }}</o-button>
     </div>
-      </div>
-    </div>
   </section>
 </template>
 <script lang="ts" setup>
-import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
 import { LoginErrorCode } from "@/types/enums";
 import RouteName from "../../router/name";
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useInstanceName } from "@/composition/apollo/config";
 
-defineProps<{
+const props = defineProps<{
   uri: string;
   pathAfterLogin?: string;
   sentence?: string;
@@ -68,7 +79,10 @@ defineProps<{
 
 const remoteActorAddress = ref("");
 
-// eslint-disable-next-line class-methods-use-this
+const { t } = useI18n({ useScope: "global" });
+
+const { instanceName } = useInstanceName();
+
 const host = computed((): string => {
   return window.location.hostname;
 });
@@ -101,7 +115,7 @@ const webFingerFetch = async (
     );
 
     if (link && link.template.includes("{uri}")) {
-      return link.template.replace("{uri}", encodeURIComponent(this.uri));
+      return link.template.replace("{uri}", encodeURIComponent(props.uri));
     }
   }
   throw new Error("No interaction path found in webfinger data");

js/src/components/Utils/VerticalDivider.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="is-divider-vertical" :data-content="dataContent"></div>
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-
-const props = withDefaults(defineProps<{ content?: string }>(), {
-  content: "Or",
-});
-
-const dataContent = computed((): string => {
-  return props.content.toLocaleUpperCase();
-});
-</script>

js/src/i18n/cs.json

@@ -1311,7 +1311,7 @@
   "more than 1360 contributors": "více než 1360 přispěvatelů",
   "multitude of interconnected Mobilizon websites": "množství propojených webových stránek Mobilizon",
   "new{'@'}email.com": "nový{'@'}email.com",
-  "profile@instance": "profil@instance",
+  "profile{'@'}instance": "profil{'@'}instance",
   "report #{report_number}": "hlášení #{report_number}",
   "return to the event's page": "návrat na stránku události",
   "return to the homepage": "zpět na domovskou stránku",

js/src/i18n/en_US.json

@@ -1435,5 +1435,8 @@
   "No results found for {search}": "No results found for {search}",
   "No events found for {search}": "No events found for {search}",
   "No groups found for {search}": "No groups found for {search}",
-  "No event found at this address": "No event found at this address"
+  "No event found at this address": "No event found at this address",
+  "I have an account on {instance}.": "I have an account on {instance}.",
+  "profile{\\'@\\'}instance": "profile{\\'@\\'}instance",
+  "My federated identity ends in {domain}": "My federated identity ends in {domain}"
 }

js/src/i18n/fr_FR.json

@@ -1312,7 +1312,7 @@
   "more than 1360 contributors": "plus de 1360 contributeur·rice·s",
   "multitude of interconnected Mobilizon websites": "multitude de sites web Mobilizon interconnectés",
   "new{'@'}email.com": "nouvel{'@'}email.com",
-  "profile@instance": "profil@instance",
+  "profile{'@'}instance": "profil{'@'}instance",
   "report #{report_number}": "le signalement #{report_number}",
   "return to the event's page": "retourner sur la page de l'événement",
   "return to the homepage": "retour à la page d'accueil",
@@ -1433,5 +1433,8 @@
   "No results found for {search}": "Aucun résultat trouvé pour {search}",
   "No events found for {search}": "Aucun événement trouvé pour {search}",
   "No groups found for {search}": "Aucun groupe trouvé pour {search}",
-  "No event found at this address": "Aucun événement trouvé à cette addresse"
+  "No event found at this address": "Aucun événement trouvé à cette addresse",
+  "I have an account on {instance}.": "J'ai un compte sur {instance}.",
+  "profile{\\'@\\'}instance": "profil{\\'@\\'}instance",
+  "My federated identity ends in {domain}": "Mon identité fédérée se termine par {domain}"
 }