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,106 +1,99 @@
 <template>
-  <section class="container mx-auto hero">
-    <div class="hero-body" v-if="event">
-      <div class="container mx-auto">
-        <h2 class="text-2xl">
-          {{ $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">
-                <img
-                  src="../../assets/undraw_profile.svg"
-                  alt="Profile illustration"
-                />
-              </figure>
-              <o-button variant="primary">{{
-                $t("I have a Mobilizon account")
-              }}</o-button>
-            </router-link>
-            <p>
-              <small>
-                {{
-                  $t(
-                    "Either on the {instance} instance or on another instance.",
-                    {
-                      instance: host,
-                    }
-                  )
-                }}
-              </small>
-              <o-tooltip
-                variant="dark"
-                :label="
-                  $t(
-                    'Mobilizon is a federated network. You can interact with this event from a different server.'
-                  )
-                "
-              >
-                <o-icon size="small" icon="help-circle-outline" />
-              </o-tooltip>
-            </p>
-          </div>
-          <vertical-divider
-            :content="$t('Or')"
-            v-if="anonymousParticipationAllowed"
-          />
-          <div
-            class="column"
-            v-if="
-              anonymousParticipationAllowed &&
-              hasAnonymousEmailParticipationMethod
+  <section class="container mx-auto max-w-2xl">
+    <h2 class="text-2xl">
+      {{ t("You wish to participate to the following event") }}
+    </h2>
+    <EventListViewCard v-if="event" :event="event" />
+    <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="/img/undraw_profile.svg"
+              alt="Profile illustration"
+              width="128"
+              height="128"
+            />
+          </figure>
+          <o-button variant="primary">{{
+            t("I have a Mobilizon account")
+          }}</o-button>
+        </router-link>
+        <p>
+          <small>
+            {{
+              t("Either on the {instance} instance or on another instance.", {
+                instance: host,
+              })
+            }}
+          </small>
+          <o-tooltip
+            variant="dark"
+            :label="
+              t(
+                'Mobilizon is a federated network. You can interact with this event from a different server.'
+              )
             "
           >
-            <router-link
-              :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
-              v-if="event.local"
-            >
-              <figure class="image is-128x128">
-                <img
-                  src="../../assets/undraw_mail_2.svg"
-                  alt="Privacy illustration"
-                />
-              </figure>
-              <o-button variant="primary">{{
-                $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">
-                <img
-                  src="../../assets/undraw_mail_2.svg"
-                  alt="Privacy illustration"
-                />
-              </figure>
-              <o-button variant="primary">{{
-                $t("I don't have a Mobilizon account")
-              }}</o-button>
-            </a>
-            <p>
-              <small>{{ $t("Participate using your email address") }}</small>
-              <br />
-              <small v-if="!event.local">
-                {{ $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")
-          }}</o-button>
-        </div>
+            <o-icon size="small" icon="help-circle-outline" />
+          </o-tooltip>
+        </p>
       </div>
+      <div
+        class="bg-white dark:bg-zinc-700 rounded-md p-4 flex-1"
+        v-if="
+          event &&
+          anonymousParticipationAllowed &&
+          hasAnonymousEmailParticipationMethod
+        "
+      >
+        <router-link
+          :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
+          v-if="event.local"
+        >
+          <figure class="flex justify-center my-2">
+            <img
+              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")
+          }}</o-button>
+        </router-link>
+        <a :href="`${event.url}/participate/without-account`" v-else>
+          <figure class="flex justify-center my-2">
+            <img
+              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")
+          }}</o-button>
+        </a>
+        <p>
+          <small>{{ t("Participate using your email address") }}</small>
+          <br />
+          <small v-if="!event.local">
+            {{ 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")
+      }}</o-button>
     </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,66 +1,77 @@
 <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">
-            <o-button
-              variant="primary"
-              size="medium"
-              tag="router-link"
-              :to="{
-                name: RouteName.LOGIN,
-                query: {
-                  code: LoginErrorCode.NEED_TO_LOGIN,
-                  redirect: pathAfterLogin,
-                },
-              }"
-              >{{ $t("Login on {instance}", { instance: host }) }}</o-button
-            >
-          </div>
-          <vertical-divider :content="$t('Or')" />
-          <div class="column">
-            <h2 class="text-2xl">
-              {{ $t("I have an account on another Mobilizon instance.") }}
-            </h2>
-            <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>
-                  <o-input
-                    expanded
-                    autocapitalize="none"
-                    autocorrect="off"
-                    v-model="remoteActorAddress"
-                    :placeholder="$t('profile@instance')"
-                  ></o-input>
-                  <p class="control">
-                    <button class="button is-primary" type="submit">
-                      {{ $t("Go") }}
-                    </button>
-                  </p>
-                </o-field>
-              </o-field>
-            </form>
-          </div>
-        </div>
-        <div class="has-text-centered">
-          <o-button tag="a" variant="text" @click="$router.go(-1)">{{
-            $t("Back to previous page")
-          }}</o-button>
-        </div>
+  <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: {
+              code: LoginErrorCode.NEED_TO_LOGIN,
+              redirect: pathAfterLogin,
+            },
+          }"
+          >{{ t("Login on {instance}", { instance: host }) }}</o-button
+        >
       </div>
+      <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.") }}
+        </h2>
+        <p>{{ t("Other software may also support this.") }}</p>
+        <p>{{ sentence }}</p>
+        <form @submit.prevent="redirectToInstance">
+          <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')"
+              ></o-input>
+              <p class="control">
+                <o-button type="submit">
+                  {{ t("Go") }}
+                </o-button>
+              </p>
+            </o-field>
+          </o-field>
+        </form>
+      </div>
+    </div>
+    <div class="text-center">
+      <o-button tag="a" variant="text" @click="$router.go(-1)">{{
+        t("Back to previous page")
+      }}</o-button>
     </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}"
 }