feat(auth): register page

apps/web/src/modules/auth/routes.ts

@@ -1,26 +1,29 @@
-import { RawLocation, Route, RouteConfig } from 'vue-router';
+import { NavigationGuard, RawLocation, Route, RouteConfig } from 'vue-router';
 import store from '~app/core/store';
 import { authActions, authGetters } from './store';
 
 export enum AuthRoute {
   LOGIN = 'auth-login',
   LOGOUT = 'auth-logout',
+  REGISTER = 'auth-register',
   PROFILE = 'auth-profile',
 }
 
+const loggedInGuard: NavigationGuard = (to, from, next) => {
+  const loggedIn = store.getters[authGetters.loggedIn];
+  if (loggedIn) {
+    return next(from.name ? from.fullPath : { name: 'home' });
+  }
+
+  next();
+};
+
 export const authRoutes: RouteConfig[] = [
   {
     path: '/login',
     name: AuthRoute.LOGIN,
     component: () => import(/* webpackChunkName: "auth" */ './views/login.vue'),
-    beforeEnter(to, from, next) {
-      const loggedIn = store.getters[authGetters.loggedIn];
-      if (loggedIn) {
-        return next(from.name ? from.fullPath : { name: 'home' });
-      }
-
-      next();
-    },
+    beforeEnter: loggedInGuard,
   },
   {
     path: '/logout',
@@ -36,6 +39,12 @@ export const authRoutes: RouteConfig[] = [
       },
     },
   },
+  {
+    path: '/register',
+    name: AuthRoute.REGISTER,
+    component: () => import(/* webpackChunkName: "auth" */ './views/register.vue'),
+    beforeEnter: loggedInGuard,
+  },
   {
     path: '/profile',
     name: AuthRoute.PROFILE,

apps/web/src/modules/auth/views/login.vue

@@ -3,12 +3,12 @@
     <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3">
       <div class="card">
         <article class="card-body">
-          <h4 class="card-title text-center mb-4 mt-1">Sign in</h4>
-          <hr />
+          <b-form novalidate @submit.prevent="submit">
+            <h4 class="card-title text-center mb-4 mt-1">Sign in</h4>
+            <hr />
 
-          <p class="alert alert-danger text-center" v-if="error">{{ error }}</p>
+            <p class="alert alert-danger text-center" v-if="error">{{ error }}</p>
 
-          <b-form novalidate @submit.prevent="submit">
             <b-form-group invalid-feedback="Field required" :state="valid.login">
               <b-input-group>
                 <!-- TODO
@@ -54,6 +54,13 @@
             <p class="text-center"><a href="#" class="btn">Forgot password?</a></p>
             -->
           </b-form>
+
+          <div class="text-center">
+            <p>Don't have an account?</p>
+            <b-button variant="outline-primary" :to="{ name: authRoute.REGISTER }"
+              >Create account
+            </b-button>
+          </div>
         </article>
       </div>
     </div>
@@ -63,12 +70,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import { mapActions } from 'vuex';
+import { AuthRoute } from '../routes';
 import { authActions } from '../store';
 
 export default Vue.extend({
   name: 'auth-login',
   data() {
     return {
+      authRoute: AuthRoute,
       form: {
         login: this.$config.demoMode ? 'demo' : '',
         password: this.$config.demoMode ? 'demo' : '',

apps/web/src/modules/auth/views/register.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    register works!
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'register',
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+});
+</script>
+
+<style lang="scss" scoped></style>