Various UI stuff (mainly implement mookup)

Fix lint

Disable modern mode

Fixes

UI fixes

Fixes

Ignore .po~ files

Fixes

Fix homepage

Fixes

Fixes

Mix format

Fix tests

Fix tests (yeah…)

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

js/src/views/User/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <section class="hero">
       <h1 class="title">
         <translate>Welcome back!</translate>
@@ -12,14 +12,14 @@
 
     <section v-if="!currentUser.isLoggedIn">
       <div class="columns is-mobile is-centered">
-        <div class="column is-half card">
+        <div class="column is-half">
           <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
           <form @submit="loginAction">
-            <b-field label="Email">
+            <b-field :label="$gettext('Email')">
               <b-input aria-required="true" required type="email" v-model="credentials.email"/>
             </b-field>
 
-            <b-field label="Password">
+            <b-field :label="$gettext('Password')">
               <b-input
                 aria-required="true"
                 required
@@ -70,20 +70,20 @@ import { ILogin } from '@/types/login.model';
 import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
 import { onLogin } from '@/vue-apollo';
 import { RouteName } from '@/router';
-import { LoginErrorCode } from '@/types/login-error-code.model'
-import { ICurrentUser } from '@/types/current-user.model'
-import { CONFIG } from '@/graphql/config'
-import { IConfig } from '@/types/config.model'
+import { LoginErrorCode } from '@/types/login-error-code.model';
+import { ICurrentUser } from '@/types/current-user.model';
+import { CONFIG } from '@/graphql/config';
+import { IConfig } from '@/types/config.model';
 
 @Component({
   apollo: {
     config: {
-      query: CONFIG
+      query: CONFIG,
     },
     currentUser: {
-      query: CURRENT_USER_CLIENT
-    }
-  }
+      query: CURRENT_USER_CLIENT,
+    },
+  },
 })
 export default class Login extends Vue {
   @Prop({ type: String, required: false, default: '' }) email!: string;
@@ -113,9 +113,9 @@ export default class Login extends Vue {
     this.credentials.email = this.email;
     this.credentials.password = this.password;
 
-    let query = this.$route.query;
-    this.errorCode = query[ 'code' ] as LoginErrorCode;
-    this.redirect = query[ 'redirect' ] as string;
+    const query = this.$route.query;
+    this.errorCode = query['code'] as LoginErrorCode;
+    this.redirect = query['redirect'] as string;
   }
 
   async loginAction(e: Event) {
@@ -146,7 +146,7 @@ export default class Login extends Vue {
       onLogin(this.$apollo);
 
       if (this.redirect) {
-        this.$router.push(this.redirect)
+        this.$router.push(this.redirect);
       } else {
         this.$router.push({ name: RouteName.HOME });
       }

js/src/views/User/Register.vue

@@ -12,7 +12,7 @@
         <div class="columns is-mobile">
           <div class="column">
             <div class="content">
-              <h2 class="subtitle" v-translate>Features</h2>
+              <h3 class="title" v-translate>Features</h3>
               <ul>
                 <li v-translate>Create your communities and your events</li>
                 <li v-translate>Other stuff…</li>
@@ -24,7 +24,7 @@
             </p>
             <hr>
             <div class="content">
-              <h2 class="subtitle" v-translate>About this instance</h2>
+              <h3 class="title" v-translate>About this instance</h3>
               <p>
                 <translate>Your local administrator resumed it's policy:</translate>
               </p>
@@ -96,9 +96,7 @@
             </form>
 
             <div v-if="errors.length > 0">
-              <b-message type="is-danger" v-for="error in errors" :key="error">
-                <translate>{{ error }}</translate>
-              </b-message>
+              <b-message type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
             </div>
           </div>
         </div>
@@ -154,6 +152,8 @@ export default class Register extends Vue {
 </script>
 
 <style lang="scss">
+  @import "../../variables";
+
 .avatar-enter-active {
   transition: opacity 1s ease;
 }
@@ -166,4 +166,9 @@ export default class Register extends Vue {
 .avatar-leave {
   display: none;
 }
+
+  h3.title {
+    background: $secondary;
+    display: inline;
+  }
 </style>

js/src/views/User/ResendConfirmation.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="columns">
-    <div class="column card">
+  <section class="container">
+    <div class="column">
       <h1 class="title">
         <translate>Resend confirmation email</translate>
       </h1>

js/src/views/User/SendPasswordReset.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="columns">
-    <div class="card column">
+  <section class="container">
+    <div class="column">
       <h1 class="title">
         <translate>Password reset</translate>
       </h1>