almost finished admin auth system

src/webapp/src/router/mainRoutes.js

@@ -48,6 +48,14 @@ export default [
             title: 'Login :: Admin - libreevent'
         }
     },
+    {
+        path: '/admin/twoFactors',
+        name: 'admin2FA',
+        component: () => import( '../views/admin/TwoFA.vue' ),
+        meta: {
+            title: 'Two Factor Authentication :: Admin - libreevent'
+        }
+    },
     {
         path: '/signup',
         name: 'signup',

src/webapp/src/views/admin/AdminLoginView.vue

@@ -1,7 +1,7 @@
 <!--
 *				libreevent - AdminLoginView.vue
 *
-*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*	Created by Janis Hutz 07/16/2023, Licensed under the GPL V3 License
 *			https://janishutz.com, development@janishutz.com
 *
 *
@@ -12,32 +12,80 @@
         <div class="login-app">
             <h1>Log into your admin account</h1>
             <form>
-                <label for="mail">Email address</label><br>
+                <label for="mail">Email</label><br>
                 <input type="email" v-model="formData[ 'mail' ]" name="mail" id="mail" required><br><br>
                 <label for="password">Password</label><br>
-                <input type="text" v-model="formData[ 'password' ]" name="password" id="password" required>
+                <input type="password" v-model="formData[ 'password' ]" name="password" id="password" required>
             </form>
             <button @click="login();" class="button">Log in</button>
         </div>
+        <notifications ref="notification" location="topright" size="bigger"></notifications>
     </div>
 </template>
 
 <script>
+    import { useUserStore } from '@/stores/userStore';
+    import { mapStores } from 'pinia';
+    import notifications from '@/components/notifications/notifications.vue';
+
     export default {
         data () {
             return {
                 formData: {}
             }
         },
+        components: {
+            notifications,
+        },
+        computed: {
+            ...mapStores( useUserStore )
+        },
         methods: {
             login () {
-                this.$router.push( '/admin' );
-            }
+                if ( this.formData.mail ) { 
+                    if ( this.formData.password ) {
+                        let progress = this.$refs.notification.createNotification( 'Logging you in', 20, 'progress', 'normal' );
+                        let fetchOptions = {
+                            method: 'post',
+                            body: JSON.stringify( this.formData ),
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'charset': 'utf-8'
+                            }
+                        };
+                        fetch( localStorage.getItem( 'url' ) + '/admin/auth', fetchOptions ).then( res => {
+                            res.json().then( json => {
+                                if ( json.status === 'ok' ) {
+                                    this.userStore.setAdminAuth( true );
+                                    this.$router.push( sessionStorage.getItem( 'redirect' ) ? sessionStorage.getItem( 'redirect' ) : '/account' );
+                                    sessionStorage.removeItem( 'redirect' );
+                                } else if ( json.status === '2fa' ) {
+                                    this.userStore.setAdmin2fa( true );
+                                    this.$router.push( '/admin/twoFactors' );
+                                } else if ( json.status === '2fa+' ) {
+                                    this.userStore.setAdmin2fa( true );
+                                    sessionStorage.setItem( '2faCode', json.code );
+                                    this.$router.push( '/admin/twoFactors' );
+                                } else {
+                                    this.$refs.notification.cancelNotification( progress );
+                                    this.$refs.notification.createNotification( 'The credentials you provided do not match our records.', 5, 'error', 'normal' );
+                                }
+                            } );
+                        } );
+                    } else {
+                        this.$refs.notification.createNotification( 'A password is required to log in', 5, 'error', 'normal' );
+                    }
+                } else {
+                    this.$refs.notification.createNotification( 'An email address is required to log in', 5, 'error', 'normal' );
+                }
+            },
         },
     }
 </script>
 
 <style scoped>
+
+    /* TODO: Update colour to image */
     .login {
         background-color: green;
         width: 100%;
@@ -66,10 +114,13 @@
         padding: 5px 10px;
         margin-top: 2%;
     }
-</style>
 
-<style>
     nav {
-        display: block;
+        display: initial;
+    }
+
+    #missing-email, #missing-password, #credentials-wrong {
+        display: none;
+        margin-bottom: 20px;
     }
 </style>

src/webapp/src/views/admin/TwoFA.vue

@@ -1,6 +1,110 @@
 <template>
-    <div id="2fa">
-        <h1>Two Factor Authentication</h1>
+    <div id="twoFA">
+        <h1>Two-Factor Authentication</h1>
         <p>We have sent you an email containing a link for Authentication.</p>
+        <div class="code-container" v-if="code[ 1 ] != ''">
+            <p>Open the link in the email and enter this code:</p>
+            <div class="code">
+                <div class="code-sub" id="code-part1">{{ code[1] }}</div>
+                <div class="code-sub" id="code-part2">{{ code[2] }}</div>
+            </div>
+        </div>
+        <notifications ref="notification" location="bottomright" size="bigger"></notifications>
     </div>
-</template>
+</template>
+
+<script>
+    import notifications from '@/components/notifications/notifications.vue';
+    import { useUserStore } from '@/stores/userStore';
+    import { mapStores } from 'pinia';
+
+    export default {
+        name: 'twoFAAdmin',
+        components: {
+            notifications
+        },
+        data () { 
+            return {
+                code: { '1': '', '2': '' }
+            }
+        },
+        computed: {
+            ...mapStores( useUserStore ),
+        },
+        created () {
+            if ( !!window.EventSource ) {
+                setTimeout( () => {
+                    let startNotification = this.$refs.notification.createNotification( 'Connecting to status service', 20, 'progress', 'normal' );
+                    let source = new EventSource( localStorage.getItem( 'url' ) + '/admin/2fa/check', { withCredentials: true } );
+                    
+                    let self = this;
+
+                    source.onmessage = ( e ) => {
+                        if ( e.data === 'authenticated' ) {
+                            self.userStore.setAdminAuth( true );
+                            self.$router.push( '/admin' );
+                            console.log( e.data );
+                        }
+                    }
+
+                    source.onopen = e => {
+                        self.$refs.notification.createNotification( 'Connected to status service', 5, 'ok', 'normal' );
+                        self.$refs.notification.cancelNotification( startNotification );
+                    };
+                    
+                    source.addEventListener( 'error', function(e) {
+                        if (e.eventPhase == EventSource.CLOSED) source.close();
+
+                        if (e.target.readyState == EventSource.CLOSED) {
+                            console.log( e );
+                            self.$refs.notification.cancelNotification( startNotification );
+                            self.$refs.notification.createNotification( 'Could not connect to status service', 5, 'error', 'normal' );
+                        }
+                    }, false)
+                }, 300 );
+            } else {
+                setTimeout( () => {
+                    this.$refs.notification.createNotification( 'Unsupported browser detected. Redirection might take longer to occur!', 20, 'warning', 'normal' );
+                }, 300 );
+            }
+            let code = sessionStorage.getItem( '2faCode' ) ? sessionStorage.getItem( '2faCode' ) : '';
+            this.code = { '1': code.slice( 0, 3 ), '2': code.substring( 3 ) };
+        },
+    }
+</script>
+
+<style scoped>
+    #twoFA, .code-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+    .code-container {
+        width: fit-content;
+        padding: 5% 8%;
+        border: var( --primary-color ) solid 2px;
+        border-radius: 10px;
+        margin-top: 3%;
+        background-color: var( --popup-color );
+    }
+
+    .code {
+        background-color: var( --hover-color );
+        padding: 7% 10%;
+        margin-bottom: 0;
+        width: fit-content;
+        border-radius: 10px;
+        font-size: 200%;
+        font-family: monospace;
+        display: block;
+    }
+
+    .code-sub {
+        display: inline-block;
+    }
+
+    #code-part2 {
+        margin-left: 7px;
+    }
+</style>