feat: Redefine login and register pages

src/components/button/button.html

@@ -1,4 +1,15 @@
-<button :class="{'btn':true, 'btn-block': block}" :type="type">
-    <font-awesome-icon :icon="['fab', icon]" class="mr-2" />
+<button
+    :class="{'btn':true, 'btn-block': block}"
+    :type="type"
+    :disabled="isDisabled"
+>
+    <font-awesome-icon
+        v-if="icon"
+        class="font-awesome-icon mr-2"
+        :icon="['fab', icon]"
+    />
     <slot />
+    <div v-if="loading" class="spinner-border ml-2" role="status">
+        <span class="sr-only">Loading...</span>
+    </div>
 </button>

src/components/button/button.scss

@@ -0,0 +1,11 @@
+.btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.spinner-border {
+    border-width: 0.15em;
+    width: 1rem;
+    height: 1rem;
+}

src/components/button/button.ts

@@ -6,11 +6,19 @@ import {Options, Vue} from 'vue-class-component';
         icon: String,
         type: String,
         block: String,
-        theme: String
+        theme: String,
+        loading: Boolean,
+        disabled: Boolean
     }
 })
 export default class Button extends Vue {
     private icon: string;
     private type: string = 'button';
     private block: boolean;
+    private loading: boolean = false;
+    private disabled: boolean = false;
+
+    get isDisabled(): boolean {
+        return this.loading || this.disabled;
+    }
 }

src/components/button/button.vue

@@ -1,3 +1,3 @@
 <template src="./button.html"></template>
 <script src="./button.ts" lang="ts"></script>
-<style src="./button.scss" lang="scss"></style>
+<style src="./button.scss" lang="scss" scoped></style>

src/main.ts

@@ -7,11 +7,18 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 import {library} from '@fortawesome/fontawesome-svg-core';
 import {faLock, faEnvelope} from '@fortawesome/free-solid-svg-icons';
 import {faFacebook, faGooglePlus} from '@fortawesome/free-brands-svg-icons';
+import {Gatekeeper} from 'gatekeeper-client-sdk';
 
 library.add(faLock, faEnvelope, faFacebook, faGooglePlus);
 
 import './index.scss';
 
+Gatekeeper.configure('de378d9c-38c8-42c1-b961-9e4fa92d6a5e', {
+    googleClientID:
+        '816324818723-e2hokn0pvjgkf8jcks6quido903ukeri.apps.googleusercontent.com',
+    facebookAppID: '243170807046422'
+});
+
 createApp(App)
     .component('font-awesome-icon', FontAwesomeIcon)
     .use(store)

src/modules/login/login.html

@@ -2,7 +2,7 @@
     <!-- /.login-logo -->
     <div class="card card-outline card-primary">
         <div class="card-header text-center">
-            <a href="../../index2.html" class="h1"><b>Admin</b>LTE</a>
+            <router-link to="/" class="h1"><b>Admin</b>LTE</router-link>
         </div>
         <div class="card-body">
             <p class="login-box-msg">Sign in to start your session</p>
@@ -26,18 +26,18 @@
                 />
 
                 <div class="row">
-                    <div class="col-8">
+                    <div class="col-7">
                         <app-checkbox v-model="rememberMe">
                             Remember Me
                         </app-checkbox>
                     </div>
                     <!-- /.col -->
-                    <div class="col-4">
+                    <div class="col-5">
                         <app-button
                             class="btn-primary"
                             type="submit"
                             block="true"
-                            @click="loginByGoogle"
+                            :loading="isAuthLoading || isFacebookLoading || isGoogleLoading"
                         >
                             Sign In
                         </app-button>
@@ -47,25 +47,21 @@
             </form>
 
             <div class="social-auth-links text-center mt-2 mb-3">
-                <!-- <button
-                    @click="loginByFacebook"
-                    class="btn btn-block btn-primary"
-                >
-                    <i class="fab fa-facebook mr-2"></i> Sign in using Facebook
-                </button> -->
                 <app-button
                     class="btn-primary"
                     icon="facebook"
                     block="true"
                     @click="loginByFacebook"
+                    :loading="isAuthLoading || isFacebookLoading || isGoogleLoading"
                 >
                     Sign in using Facebook
                 </app-button>
                 <app-button
                     class="btn-danger"
-                    icon="googlePlus"
+                    icon="google-plus"
                     block="true"
                     @click="loginByGoogle"
+                    :loading="isAuthLoading || isFacebookLoading || isGoogleLoading"
                 >
                     Sign in using Google
                 </app-button>

src/modules/login/login.ts

@@ -16,6 +16,9 @@ export default class Login extends Vue {
     public email: string = '';
     public password: string = '';
     public rememberMe: boolean = false;
+    public isAuthLoading: boolean = false;
+    public isFacebookLoading: boolean = false;
+    public isGoogleLoading: boolean = false;
 
     public mounted(): void {
         this.appElement = document.getElementById('app') as HTMLElement;
@@ -28,28 +31,37 @@ export default class Login extends Vue {
 
     public async loginByAuth(): Promise<void> {
         try {
+            this.isAuthLoading = true;
             const token = await loginByAuth(this.email, this.password);
+            this.isAuthLoading = false;
             console.log(token);
         } catch (error) {
+            this.isAuthLoading = false;
             console.log(error);
         }
     }
 
     public async loginByFacebook(): Promise<void> {
         try {
+            this.isFacebookLoading = true;
             const token = await loginByFacebook();
             console.log(token);
+            this.isFacebookLoading = false;
         } catch (error) {
             console.log(error);
+            this.isFacebookLoading = false;
         }
     }
 
     public async loginByGoogle(): Promise<void> {
         try {
+            this.isGoogleLoading = true;
             const token = await loginByGoogle();
             console.log(token);
+            this.isGoogleLoading = false;
         } catch (error) {
             console.log(error);
+            this.isGoogleLoading = false;
         }
     }
 }

src/modules/register/register.html

@@ -1,100 +1,76 @@
 <div class="register-box">
     <div class="card card-outline card-primary">
         <div class="card-header text-center">
-            <a href="../../index2.html" class="h1"><b>Admin</b>LTE</a>
+            <router-link to="/" class="h1"><b>Admin</b>LTE</router-link>
         </div>
         <div class="card-body">
             <p class="login-box-msg">Register a new membership</p>
 
-            <form action="../../index.html" method="post">
-                <div class="input-group mb-3">
-                    <input
-                        type="text"
-                        class="form-control"
-                        placeholder="Full name"
-                    />
-                    <div class="input-group-append">
-                        <div class="input-group-text">
-                            <span class="fas fa-user"></span>
-                        </div>
-                    </div>
-                </div>
-                <div class="input-group mb-3">
-                    <input
-                        type="email"
-                        class="form-control"
-                        placeholder="Email"
-                    />
-                    <div class="input-group-append">
-                        <div class="input-group-text">
-                            <span class="fas fa-envelope"></span>
-                        </div>
-                    </div>
-                </div>
-                <div class="input-group mb-3">
-                    <input
-                        type="password"
-                        class="form-control"
-                        placeholder="Password"
-                    />
-                    <div class="input-group-append">
-                        <div class="input-group-text">
-                            <span class="fas fa-lock"></span>
-                        </div>
-                    </div>
-                </div>
-                <div class="input-group mb-3">
-                    <input
-                        type="password"
-                        class="form-control"
-                        placeholder="Retype password"
-                    />
-                    <div class="input-group-append">
-                        <div class="input-group-text">
-                            <span class="fas fa-lock"></span>
-                        </div>
-                    </div>
-                </div>
+            <form @submit.prevent="registerByAuth">
+                <app-input
+                    icon="envelope"
+                    class="mb-3"
+                    type="email"
+                    placeholder="Email"
+                    autocomplete="off"
+                    v-model="email"
+                />
+                <app-input
+                    icon="lock"
+                    class="mb-3"
+                    type="password"
+                    placeholder="Password"
+                    autocomplete="off"
+                    v-model="password"
+                />
+                <app-input
+                    icon="lock"
+                    class="mb-3"
+                    type="password"
+                    placeholder="Retype password"
+                    autocomplete="off"
+                    v-model="rePassword"
+                />
                 <div class="row">
-                    <div class="col-8">
-                        <div class="icheck-primary">
-                            <input
-                                type="checkbox"
-                                id="agreeTerms"
-                                name="terms"
-                                value="agree"
-                            />
-                            <label for="agreeTerms">
-                                I agree to the <a href="#">terms</a>
-                            </label>
-                        </div>
+                    <div class="col-7">
+                        <app-checkbox v-model="agreeTerms">
+                            I agree to the <a href="#">terms</a>
+                        </app-checkbox>
                     </div>
                     <!-- /.col -->
-                    <div class="col-4">
-                        <button
+                    <div class="col-5">
+                        <app-button
+                            class="btn-primary"
                             type="submit"
-                            @click="login"
-                            class="btn btn-primary btn-block"
+                            block="true"
+                            :loading="isAuthLoading || isFacebookLoading || isGoogleLoading"
                         >
                             Register
-                        </button>
+                        </app-button>
                     </div>
                     <!-- /.col -->
                 </div>
             </form>
 
             <div class="social-auth-links text-center">
-                <button
-                    @click="loginByFacebook"
-                    class="btn btn-block btn-primary"
+                <app-button
+                    class="btn-primary"
+                    icon="facebook"
+                    block="true"
+                    @click="registerByFacebook"
+                    :loading="isAuthLoading || isFacebookLoading || isGoogleLoading"
                 >
-                    <i class="fab fa-facebook mr-2"></i>
                     Sign up using Facebook
-                </button>
-                <button @click="loginByGoogle" class="btn btn-block btn-danger">
-                    <i class="fab fa-google-plus mr-2"></i>
-                    Sign up using Google+
-                </button>
+                </app-button>
+                <app-button
+                    class="btn-danger"
+                    icon="google-plus"
+                    block="true"
+                    @click="registerBygoogle"
+                    :loading="isAuthLoading || isFacebookLoading || isGoogleLoading"
+                >
+                    Sign up using Google
+                </app-button>
             </div>
 
             <router-link to="/login" class="text-center">