Merge branch 'ui-fixes' into 'master'

Improve UI on home & register pages

See merge request framasoft/mobilizon!603

js/src/i18n/en_US.json

@@ -66,13 +66,11 @@
   "Create a new event": "Create a new event",
   "Create a new group": "Create a new group",
   "Create a new identity": "Create a new identity",
-  "Create and manage several identities from the same account": "Create and manage several identities from the same account",
   "Create group": "Create group",
   "Create my event": "Create my event",
   "Create my group": "Create my group",
   "Create my profile": "Create my profile",
   "Create token": "Create token",
-  "Create, edit or delete events": "Create, edit or delete events",
   "Create": "Create",
   "Creator": "Creator",
   "Current identity has been changed to {identityName} in order to manage this event.": "Current identity has been changed to {identityName} in order to manage this event.",
@@ -134,7 +132,6 @@
   "Explore": "Explore",
   "Failed to save admin settings": "Failed to save admin settings",
   "Featured events": "Featured events",
-  "Features": "Features",
   "Federation": "Federation",
   "Find an address": "Find an address",
   "Find an instance": "Find an instance",
@@ -290,7 +287,6 @@
   "Redirecting to event…": "Redirecting to event…",
   "Region": "Region",
   "Register an account on Mobilizon!": "Register an account on Mobilizon!",
-  "Register for an event by choosing one of your identities": "Register for an event by choosing one of your identities",
   "Register": "Register",
   "Registration is allowed, anyone can register.": "Registration is allowed, anyone can register.",
   "Registration is closed.": "Registration is closed.",
@@ -578,7 +574,6 @@
   "full rules": "full rules",
   "instance rules": "instance rules",
   "terms of service": "terms of service",
-  "Please read the instance's {fullRules}": "Please read the instance's {fullRules}",
   "I agree to the {instanceRules} and {termsOfService}": "I agree to the {instanceRules} and {termsOfService}",
   "Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}.": "Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}.",
   "more than 1360 contributors": "more than 1360 contributors",
@@ -727,7 +722,6 @@
   "Federated Group Name": "Federated Group Name",
   "This is like your federated username (<code>{username}</code>) for groups. It will allow you to be found on the federation, and is guaranteed to be unique.": "This is like your federated username (<code>{username}</code>) for groups. It will allow you to be found on the federation, and is guaranteed to be unique.",
   "Banner": "Banner",
-  "Create or join an group and start organizing with other people": "Create or join an group and start organizing with other people",
   "From a birthday party with friends and family to a march for climate change, right now, our gatherings are <b>trapped inside the tech giants’ platforms</b>. How can we organize, how can we click “Attend,” without <b>providing private data</b> to Facebook or <b>locking ourselves</b> inside MeetUp?": "From a birthday party with friends and family to a march for climate change, right now, our gatherings are <b>trapped inside the tech giants’ platforms</b>. How can we organize, how can we click “Attend,” without <b>providing private data</b> to Facebook or <b>locking ourselves</b> inside MeetUp?",
   "We want to develop a <b>digital common</b> that everyone can make their own, one which respects <b>privacy and activism by design</b>.": "We want to develop a <b>digital common</b> that everyone can make their own, one which respects <b>privacy and activism by design</b>.",
   "We can’t change the world from within Facebook. The tool we dream of, surveillance capitalism corporations won’t develop, as they cannot profit from it. This is an opportunity to build something better, by taking another approach.": "We can’t change the world from within Facebook. The tool we dream of, surveillance capitalism corporations won’t develop, as they cannot profit from it. This is an opportunity to build something better, by taking another approach.",
@@ -798,5 +792,14 @@
   "Go to the event page": "Go to the event page",
   "Request for participation confirmation sent": "Request for participation confirmation sent",
   "Check your inbox (and your junk mail folder).": "Check your inbox (and your junk mail folder).",
-  "You may now close this window.": "You may now close this window."
+  "You may now close this window.": "You may now close this window.",
+  "Create an account": "Create an account",
+  "You are not an administrator for this group.": "You are not an administrator for this group.",
+  "Why create an account?": "Why create an account?",
+  "To create and manage your events": "To create and manage your events",
+  "To create and manage multiples identities from a same account": "To create and manage multiples identities from a same account",
+  "To register for an event by choosing one of your identities": "To register for an event by choosing one of your identities",
+  "To create or join an group and start organizing with other people": "To create or join an group and start organizing with other people",
+  "About {instance}": "About {instance}",
+  "Please read the {fullRules} published by {instance}'s administrators.": "Please read the {fullRules} published by {instance}'s administrators."
 }

js/src/i18n/fr_FR.json

@@ -346,7 +346,7 @@
   "Last week": "La semaine dernière",
   "Latest posts": "Derniers billets",
   "Learn more": "En apprendre plus",
-  "Learn more about Mobilizon": "En apprendre plus à propos de Mobilizon",
+  "Learn more about Mobilizon": "En savoir plus sur Mobilizon",
   "Leave": "Quitter",
   "Leave event": "Annuler ma participation à l'évènement",
   "Leave group": "Quitter le groupe",
@@ -841,5 +841,14 @@
   "{number} posts": "Aucun billet|Un billet|{number} billets",
   "{profile} (by default)": "{profile} (par défault)",
   "{title} ({count} todos)": "{title} ({count} todos)",
-  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
+  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
+  "Create an account": "Créer un compte",
+  "You are not an administrator for this group.": "Vous n'êtes pas une administrateur·ice de ce groupe.",
+  "Why create an account?": "Pourquoi se créer un compte ?",
+  "To create and manage your events": "Pour créer et gérer vos évènements",
+  "To create and manage multiples identities from a same account": "Pour pouvoir créer et gérer plusieurs identités avec un même compte",
+  "To register for an event by choosing one of your identities": "Pour s'inscrire à un évènement en choisissant une de vos identités",
+  "To create or join an group and start organizing with other people": "Pour créer ou rejoindre un groupe et commencer à vous organiser avec d'autres personnes",
+  "About {instance}": "À propos de {instance}",
+  "Please read the {fullRules} published by {instance}'s administrators.": "Merci de lire les {fullRules} publiées par les administrateur·ices de {instance}."
 }

js/src/views/About.vue

@@ -84,7 +84,7 @@
                 size="is-large"
                 tag="router-link"
                 :to="{ name: RouteName.REGISTER }"
-                >{{ $t("Register") }}</b-button
+                >{{ $t("Create an account") }}</b-button
               >
             </div>
             <!-- <div class="column">

js/src/views/Home.vue

@@ -19,7 +19,7 @@
               tag="router-link"
               :to="{ name: RouteName.REGISTER }"
               v-if="config.registrationsOpen"
-              >{{ $t("Sign up") }}</b-button
+              >{{ $t("Create an account") }}</b-button
             >
             <!-- We don't invite to find other instances yet -->
             <!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
@@ -125,7 +125,6 @@
 </template>
 
 <script lang="ts">
-import ngeohash from "ngeohash";
 import { Component, Vue } from "vue-property-decorator";
 import { FETCH_EVENTS } from "../graphql/event";
 import EventListCard from "../components/Event/EventListCard.vue";
@@ -135,13 +134,7 @@ import { IPerson, Person } from "../types/actor";
 import { ICurrentUser } from "../types/current-user.model";
 import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
 import RouteName from "../router/name";
-import {
+import { IEvent, IParticipant, Participant, ParticipantRole } from "../types/event.model";
-  EventModel,
-  IEvent,
-  IParticipant,
-  Participant,
-  ParticipantRole,
-} from "../types/event.model";
 import DateComponent from "../components/Event/DateCalendarIcon.vue";
 import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
@@ -192,6 +185,7 @@ import Subtitle from "../components/Utils/Subtitle.vue";
   metaInfo() {
     return {
       // if no subcomponents specify a metaInfo.title, this title will be used
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       title: this.instanceName,
       // all titles will be injected into this template
@@ -226,20 +220,23 @@ export default class Home extends Vue {
   //     : this.loggedPerson.name;
   // }
 
-  get instanceName() {
+  get instanceName(): string | undefined {
     if (!this.config) return undefined;
     return this.config.name;
   }
 
-  get welcomeBack() {
+  // eslint-disable-next-line class-methods-use-this
+  get welcomeBack(): boolean {
     return window.localStorage.getItem("welcome-back") === "yes";
   }
 
-  get newRegisteredUser() {
+  // eslint-disable-next-line class-methods-use-this
+  get newRegisteredUser(): boolean {
     return window.localStorage.getItem("new-registered-user") === "yes";
   }
 
-  mounted() {
+  // eslint-disable-next-line class-methods-use-this
+  mounted(): void {
     if (window.localStorage.getItem("welcome-back")) {
       window.localStorage.removeItem("welcome-back");
     }
@@ -248,7 +245,8 @@ export default class Home extends Vue {
     }
   }
 
-  isToday(date: Date) {
+  // eslint-disable-next-line class-methods-use-this
+  isToday(date: Date): boolean {
     return new Date(date).toDateString() === new Date().toDateString();
   }
 
@@ -272,6 +270,7 @@ export default class Home extends Vue {
     return this.isBefore(date, 7);
   }
 
+  // eslint-disable-next-line class-methods-use-this
   calculateDiffDays(date: string): number {
     return Math.ceil((new Date(date).getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24);
   }
@@ -300,7 +299,7 @@ export default class Home extends Vue {
     );
   }
 
-  get lastWeekEvents() {
+  get lastWeekEvents(): IParticipant[] {
     const res = this.currentUserParticipations.filter(
       ({ event, role }) =>
         event.beginsOn != null &&
@@ -316,73 +315,25 @@ export default class Home extends Vue {
   /**
    * Return all events from server excluding the ones shown as participating
    */
-  get filteredFeaturedEvents() {
+  get filteredFeaturedEvents(): IEvent[] {
     return this.events.filter(
       ({ id }) =>
         !this.currentUserParticipations
           .filter((participation) => participation.role === ParticipantRole.CREATOR)
-          .map(({ event: { id } }) => id)
+          .map(({ event: { id: eventId } }) => eventId)
           .includes(id)
     );
   }
 
-  geoLocalize() {
+  eventDeleted(eventid: string): void {
-    const router = this.$router;
-    const sessionCity = sessionStorage.getItem("City");
-
-    if (sessionCity) {
-      return router.push({
-        name: "EventList",
-        params: { location: sessionCity },
-      });
-    }
-
-    navigator.geolocation.getCurrentPosition(
-      (pos) => {
-        const crd = pos.coords;
-
-        const geoHash = ngeohash.encode(crd.latitude, crd.longitude, 11);
-        sessionStorage.setItem("City", geoHash);
-        router.push({
-          name: RouteName.EVENT_LIST,
-          params: { location: geoHash },
-        });
-      },
-
-      (err) => console.warn(`ERROR(${err.code}): ${err.message}`),
-
-      {
-        enableHighAccuracy: true,
-        timeout: 5000,
-        maximumAge: 0,
-      }
-    );
-  }
-
-  eventDeleted(eventid: string) {
     this.currentUserParticipations = this.currentUserParticipations.filter(
       (participation) => participation.event.id !== eventid
     );
   }
 
-  // getAddressData(addressData) {
+  viewEvent(event: IEvent): void {
-  //   const geoHash = ngeohash.encode(
-  //     addressData.latitude,
-  //     addressData.longitude,
-  //     11,
-  //   );
-  //   sessionStorage.setItem('City', geoHash);
-
-  //   this.$router.push({ name: RouteName.EVENT_LIST, params: { location: geoHash } });
-  // }
-
-  viewEvent(event: IEvent) {
     this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
   }
-
-  // ipLocation() {
-  //   return this.city.name ? this.city.name : this.country.name;
-  // }
 }
 </script>
 
@@ -399,6 +350,10 @@ main > div > .container {
 }
 
 .events-featured {
+  & > h3 {
+    padding-left: 0.75rem;
+  }
+
   .columns {
     margin: 1rem auto 3rem;
   }

js/src/views/User/Login.vue

@@ -86,7 +86,7 @@
                   default_password: credentials.password,
                 },
               }"
-              >{{ $t("Register") }}</router-link
+              >{{ $t("Create an account") }}</router-link
             >
           </p>
         </form>

js/src/views/User/Register.vue

@@ -17,14 +17,14 @@
       <div class="columns">
         <div class="column">
           <div>
-            <subtitle>{{ $t("Features") }}</subtitle>
+            <subtitle>{{ $t("Why create an account?") }}</subtitle>
             <div class="content">
               <ul>
-                <li>{{ $t("Create and manage several identities from the same account") }}</li>
+                <li>{{ $t("To create and manage your events") }}</li>
-                <li>{{ $t("Create, edit or delete events") }}</li>
+                <li>{{ $t("To create and manage multiples identities from a same account") }}</li>
-                <li>{{ $t("Register for an event by choosing one of your identities") }}</li>
+                <li>{{ $t("To register for an event by choosing one of your identities") }}</li>
                 <li v-if="config.features.groups">
-                  {{ $t("Create or join an group and start organizing with other people") }}
+                  {{ $t("To create or join an group and start organizing with other people") }}
                 </li>
               </ul>
             </div>
@@ -34,12 +34,16 @@
           }}</router-link>
           <hr />
           <div class="content">
-            <subtitle>{{ $t("About this instance") }}</subtitle>
+            <subtitle>{{ $t("About {instance}", { instance: config.name }) }}</subtitle>
             <div class="content" v-html="config.description"></div>
-            <i18n path="Please read the instance's {fullRules}" tag="p">
+            <i18n
+              path="Please read the {fullRules} published by {instance}'s administrators."
+              tag="p"
+            >
               <router-link slot="fullRules" :to="{ name: RouteName.RULES }">{{
                 $t("full rules")
               }}</router-link>
+              <b slot="instance">{{ config.name }}</b>
             </i18n>
           </div>
         </div>
@@ -93,25 +97,25 @@
               </i18n>
             </b-checkbox>
 
-            <p class="control has-text-centered">
+            <p class="create-account control has-text-centered">
               <b-button
                 type="is-primary"
                 size="is-large"
                 :disabled="sendingForm"
                 native-type="submit"
               >
-                {{ $t("Register") }}
+                {{ $t("Create an account") }}
               </b-button>
             </p>
 
-            <p class="control">
+            <p class="control has-text-centered">
               <router-link
                 class="button is-text"
                 :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email } }"
                 >{{ $t("Didn't receive the instructions?") }}</router-link
               >
             </p>
-            <p class="control">
+            <p class="control has-text-centered">
               <router-link
                 class="button is-text"
                 :to="{
@@ -235,4 +239,10 @@ h2.title {
   text-decoration-color: $secondary;
   display: inline;
 }
+
+p.create-account {
+  /deep/ button {
+    margin: 1rem auto 2rem;
+  }
+}
 </style>