From db402fa818f3e3636344ca16d59344f1ffd5f427 Mon Sep 17 00:00:00 2001
From: Rafal Galka <rafal.galka@modernweb.pl>
Date: Sat, 24 Oct 2020 16:57:03 +0200
Subject: [PATCH] feat(auth): login integration

closes #16
---
 .../domain/{auth.service.ts => auth.api.ts}   |  5 +-
 apps/web/src/modules/auth/store/actions.ts    |  2 +-
 apps/web/src/modules/auth/views/login.vue     | 96 ++++++++++++-------
 apps/web/src/shared/bootstrap-vue.ts          | 14 ++-
 apps/web/src/styles/vendors/_bootstrap.scss   |  4 +-
 5 files changed, 80 insertions(+), 41 deletions(-)
 rename apps/web/src/modules/auth/domain/{auth.service.ts => auth.api.ts} (75%)

diff --git a/apps/web/src/modules/auth/domain/auth.service.ts b/apps/web/src/modules/auth/domain/auth.api.ts
similarity index 75%
rename from apps/web/src/modules/auth/domain/auth.service.ts
rename to apps/web/src/modules/auth/domain/auth.api.ts
index cd7a35f..42a4745 100644
--- a/apps/web/src/modules/auth/domain/auth.service.ts
+++ b/apps/web/src/modules/auth/domain/auth.api.ts
@@ -4,5 +4,8 @@ import axios from 'axios';
 export function authenticate(login: string, password: string): Promise<AuthTokenDto> {
   return axios
     .post<AuthTokenDto>('/auth', { login, password } as AuthRequestDto)
-    .then((res) => res.data);
+    .then((res) => res.data)
+    .catch((res) => {
+      throw res.response;
+    });
 }
diff --git a/apps/web/src/modules/auth/store/actions.ts b/apps/web/src/modules/auth/store/actions.ts
index cb1e172..70c87aa 100644
--- a/apps/web/src/modules/auth/store/actions.ts
+++ b/apps/web/src/modules/auth/store/actions.ts
@@ -1,6 +1,6 @@
 import { RootState } from '~app/core/store';
 import { createActionFactory } from '~app/shared/store';
-import { authenticate } from '../domain/auth.service';
+import { authenticate } from '../domain/auth.api';
 import { loadStoredToken } from '../domain/token';
 import { authGetters, authMutations } from './index';
 import { AuthState } from './state';
diff --git a/apps/web/src/modules/auth/views/login.vue b/apps/web/src/modules/auth/views/login.vue
index 87824a3..46b1647 100644
--- a/apps/web/src/modules/auth/views/login.vue
+++ b/apps/web/src/modules/auth/views/login.vue
@@ -5,54 +5,55 @@
         <article class="card-body">
           <h4 class="card-title text-center mb-4 mt-1">Sign in</h4>
           <hr />
-          <!-- TODO
-          <p class="text-success text-center">Some message goes here</p>
-          -->
-          <form @submit.prevent="submit">
-            <div class="form-group">
-              <div class="input-group">
+
+          <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
-                <div class="input-group-prepend">
-                  <span class="input-group-text"> <i class="fa fa-user"></i> </span>
-                </div>
+                <template #prepend>
+                  <b-input-group-text><i class="fa fa-user"></i></b-input-group-text>
+                </template>
                 -->
-                <input
-                  name="login"
-                  class="form-control"
-                  type="text"
+                <b-form-input
+                  autofocus
                   placeholder="Login"
                   v-model="form.login"
+                  :state="valid.login"
                 />
-              </div>
-            </div>
-            <div class="form-group">
-              <div class="input-group">
+              </b-input-group>
+            </b-form-group>
+
+            <b-form-group invalid-feedback="Field required" :state="valid.password">
+              <b-input-group>
                 <!-- TODO
-                <div class="input-group-prepend">
-                  <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
-                </div>
+                <template #prepend>
+                  <b-input-group-text><i class="fa fa-lock"></i></b-input-group-text>
+                </template>
                 -->
-                <input
-                  class="form-control"
-                  name="password"
+                <b-form-input
                   type="password"
-                  placeholder="Password"
                   v-model="form.password"
+                  placeholder="Password"
+                  :state="valid.password"
                 />
-              </div>
-            </div>
-            <div class="form-group text-center">
+              </b-input-group>
+            </b-form-group>
+
+            <b-form-group class="text-center">
+              <!-- TODO demo mode -->
               <small class="text-muted">
                 Use <strong>demo</strong> / <strong>demo</strong> to login
               </small>
-            </div>
-            <div class="form-group">
-              <button type="submit" class="btn btn-primary btn-block">Login</button>
-            </div>
+            </b-form-group>
+            <b-form-group>
+              <b-button type="submit" variant="primary" block>Login</b-button>
+            </b-form-group>
             <!-- TODO
             <p class="text-center"><a href="#" class="btn">Forgot password?</a></p>
             -->
-          </form>
+          </b-form>
         </article>
       </div>
     </div>
@@ -72,6 +73,11 @@ export default Vue.extend({
         login: '',
         password: '',
       },
+      valid: {
+        login: void 0,
+        password: void 0,
+      } as { login?: boolean; password?: boolean },
+      error: '',
     };
   },
   methods: {
@@ -79,10 +85,28 @@ export default Vue.extend({
       login: authActions.login,
     }),
     submit() {
-      this.login(this.form).then(() => {
-        const back = this.$route.query.back as string;
-        this.$router.push(back || { name: 'home' });
-      });
+      this.valid = { login: void 0, password: void 0 };
+
+      const login = this.form.login.trim();
+      this.valid.login = !login ? false : void 0;
+
+      const password = this.form.password.trim();
+      this.valid.password = !password ? false : void 0;
+
+      if (!login || !password) {
+        return;
+      }
+
+      this.error = false;
+
+      return this.login({ login, password })
+        .then(() => {
+          const back = this.$route.query.back as string;
+          this.$router.push(back || { name: 'home' });
+        })
+        .catch((e) => {
+          this.error = e.status === 401 ? 'Wrong login and/or password' : 'Unexpected server error';
+        });
     },
   },
 });
diff --git a/apps/web/src/shared/bootstrap-vue.ts b/apps/web/src/shared/bootstrap-vue.ts
index 934a55a..91f5d31 100644
--- a/apps/web/src/shared/bootstrap-vue.ts
+++ b/apps/web/src/shared/bootstrap-vue.ts
@@ -1,4 +1,16 @@
-import { NavbarPlugin } from 'bootstrap-vue';
+import {
+  ButtonPlugin,
+  FormGroupPlugin,
+  FormInputPlugin,
+  FormPlugin,
+  InputGroupPlugin,
+  NavbarPlugin,
+} from 'bootstrap-vue';
 import Vue from 'vue';
 
+Vue.use(ButtonPlugin);
+Vue.use(FormGroupPlugin);
+Vue.use(FormInputPlugin);
+Vue.use(FormPlugin);
+Vue.use(InputGroupPlugin);
 Vue.use(NavbarPlugin);
diff --git a/apps/web/src/styles/vendors/_bootstrap.scss b/apps/web/src/styles/vendors/_bootstrap.scss
index b245455..b78265c 100644
--- a/apps/web/src/styles/vendors/_bootstrap.scss
+++ b/apps/web/src/styles/vendors/_bootstrap.scss
@@ -18,7 +18,7 @@
 @import '~bootstrap/scss/dropdown';
 //@import '~bootstrap/scss/button-group';
 @import '~bootstrap/scss/input-group';
-//@import '~bootstrap/scss/custom-forms';
+@import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/navbar';
 //@import '~bootstrap/scss/card';
@@ -26,7 +26,7 @@
 //@import '~bootstrap/scss/pagination';
 //@import '~bootstrap/scss/badge';
 //@import '~bootstrap/scss/jumbotron';
-//@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/alert';
 //@import '~bootstrap/scss/progress';
 //@import '~bootstrap/scss/media';
 //@import '~bootstrap/scss/list-group';