Merge pull request #58 from aitchiss/accessible-color-themes

Accessibility fixes for login, register and recover pages

api/src/app.module.ts

@@ -11,15 +11,18 @@ import { AuthModule } from './auth/auth.module';
 import { MailModule } from "./mail/mail.module"
 import { MailerModule } from "@nest-modules/mailer"
 
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost/ohmyform'
+const MAILER_URI = process.env.MAILER_URI || 'smtp://localhost:1025'
+
 @Module({
   imports: [
-    TypegooseModule.forRoot('mongodb://localhost/ohmyform', { useNewUrlParser: true }),
+    TypegooseModule.forRoot(MONGODB_URI, { useNewUrlParser: true }),
-    MongooseModule.forRoot('mongodb://localhost/ohmyform'),
+    MongooseModule.forRoot(MONGODB_URI),
     TerminusModule.forRootAsync({
       useClass: TerminusOptionsService,
     }),
     MailerModule.forRoot({
-      transport: 'smtp://localhost:1025',
+      transport: MAILER_URI,
       defaults: {
         from:'"OhMyForm" <noreply@ohmyform.com>',
       }

api/src/user/services/init.service.ts

@@ -0,0 +1,13 @@
+import { Injectable, OnModuleInit } from '@nestjs/common';
+
+@Injectable()
+export class InitService implements OnModuleInit {
+  onModuleInit() {
+    if (!process.env.CREATE_ADMIN || process.env.CREATE_ADMIN.toUpperCase() === 'FALSE') {
+      console.log('SKIP INITIAL ADMIN USER CREATION')
+      return
+    }
+
+    // TODO process user creation if ENV CREATE_ADMIN is set
+  }
+}

api/src/user/user.providers.ts

@@ -1,8 +1,10 @@
 import { UserService } from "./services/user.service"
 import { UsernameAlreadyInUse } from "./validators/UsernameAlreadyInUse"
 import { EmailAlreadyInUse } from "./validators/EmailAlreadyInUse"
+import { InitService } from "./services/init.service"
 
 export default [
+  InitService,
   UserService,
   UsernameAlreadyInUse,
   EmailAlreadyInUse,

ui/assets/css/base.scss

@@ -1,12 +1,15 @@
 $accent: #fae596;
-$primary: #3fb0ac;
+$primary: #379A96;
+
+$font-size-standard: 1rem;
+$font-size-md: 1.25rem;
 
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 1html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
   Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
+  font-size: $font-size-standard;
   word-spacing: 1px;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -36,6 +39,8 @@ $primary: #3fb0ac;
   color: #fff;
   background-color: $primary;
   border-color: $primary;
+  font-size: $font-size-md;
+  font-weight: bold;
 
   &:hover {
     color: #fff;

ui/layouts/screen.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="screen bg-primary dark">
-    <div class="content">
+    <main class="content">
       <nuxt />
-    </div>
+    </main>
 
-    <div class="footer">
+    <footer class="footer">
       <nuxt-link to="/login">Login</nuxt-link>
       <nuxt-link to="/register">Register</nuxt-link>
       <nuxt-link to="/admin">Manage</nuxt-link>
       <a href="https://ohmyform.com">OhMyForm</a>
-    </div>
+    </footer>
   </div>
 </template>
 

ui/nuxt.config.js

@@ -8,6 +8,9 @@ export default {
    */
   head: {
     title: pkg.name,
+    htmlAttrs: {
+      lang: 'en-US'
+    },
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },

ui/pages/login.vue

@@ -1,21 +1,25 @@
 <template>
   <div>
+    <h1 aria-label="Login">
       <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    </h1>
 
     <b-form class="box" @submit.prevent="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username or Email"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="password">
+      <b-form-group>
         <b-form-input
           id="password"
           v-model="password"
+          aria-label="Password"
           type="password"
           placeholder="Password"
           trim

ui/pages/recover.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
+    <h1 aria-label="Recover Password">
       <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    </h1>
 
     <b-form class="box" @submit.prevent="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username or Email"
         ></b-form-input>

ui/pages/register.vue

@@ -1,30 +1,35 @@
 <template>
   <div>
+    <h1 aria-label="Register">
       <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    </h1>
 
     <b-form class="box" @submit="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="email">
+      <b-form-group>
         <b-form-input
           id="email"
           v-model="email"
+          aria-label="Email"
           trim
           placeholder="Email"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="password">
+      <b-form-group>
         <b-form-input
           id="password"
           v-model="password"
+          aria-label="Password"
           type="password"
           placeholder="Password"
           trim