Very first 2FAccounts index with OTP modal

resources/js/app.js

@@ -6,15 +6,23 @@ Vue.use(VueRouter)
 import App          from './views/App'
 import Login        from './views/Login'
 import Register     from './views/Register'
-import Home         from './views/Welcome'
+import Accounts         from './views/Accounts'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faPlusCircle);
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 const router = new VueRouter({
     mode: 'history',
     routes: [
         {
             path: '/',
-            name: 'home',
-            component: Home
+            name: 'accounts',
+            component: Accounts
         },
         {
             path: '/login',

resources/js/components/Modal.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }">
+      <div class="modal-background" @click.stop="isActive = false"></div>
+      <div class="modal-content">
+        <slot></slot>
+      </div>
+      <button class="modal-close is-large" aria-label="close" @click.stop="isActive = false"></button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Modal',
+    props: {
+        value: Boolean,
+
+    },
+    computed: {
+        isActive: {
+            get () {
+                return this.value
+            },
+            set (value) {
+                this.$emit('input', value)
+            }
+        }
+    }
+}
+</script>

resources/js/components/Nav.vue

@@ -0,0 +1,24 @@
+<template>
+    <nav class="navbar is-black level is-mobile has-text-grey-lighter">
+        <div class="level-left">
+            <p class="is-size-4 has-text-weight-light">2FAccount</p>
+        </div>
+        <div class="level-right">
+            <p class="level-item">
+                <a class="button is-black">
+                    <span class="icon has-text-grey-light">
+                        <font-awesome-icon :icon="['fas', 'plus-circle']" />
+                    </span>
+                </a>
+            </p>
+        </div>
+    </nav>
+</template>
+
+<script>
+
+    export default {
+        name: 'twofa-nav'
+    }
+
+</script>

resources/js/views/Accounts.vue

@@ -0,0 +1,117 @@
+<template>
+    <div>
+        <div class="container">
+            <div class="buttons are-large is-centered">
+                <span v-for="account in accounts" class="button is-black twofaccount" @click.stop="getOTP(account.id)">
+                    <img src="https://fakeimg.pl/64x64/">
+                    {{ account.name }}
+                    <span class="is-family-primary is-size-7 has-text-grey">{{ account.email }}</span>
+                </span>
+            </div>
+        </div>
+        <modal v-model="ModalIsActive">
+            <modal-twofaccount v-bind="twofaccount"></modal-twofaccount>
+        </modal>
+    </div>
+</template>
+
+
+
+
+<script>
+    import Modal from '../components/Modal'
+
+    const ModalTwofaccount = {
+        props: ['id', 'name', 'email', 'uri', 'icon', 'totp'],
+        template: `
+            <section class="section">
+                <div class="columns is-centered">
+                    <div class="column is-three-quarters">
+                        <div class="box has-text-centered has-background-black-ter ">
+                            <figure class="image is-64x64" style="display: inline-block">
+                                <img :src="icon">
+                            </figure>
+                            <p class="is-size-4 has-text-grey-light">{{ name }}</p>
+                            <p class="is-size-6 has-text-grey">{{ email }}</p>
+                            <p id="otp" title="refresh" class="is-size-1 has-text-white">{{ totp }}</p>
+                            <ul class="dots">
+                                <li></li>
+                                <li></li>
+                                <li></li>
+                                <li></li>
+                                <li></li>
+                                <li></li>
+                                <li></li>
+                                <li></li>
+                                <li data-is-active></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        `
+    }
+
+    export default {
+        name: 'Accounts',
+        data(){
+            return {
+                accounts : [],
+                ModalIsActive : false,
+                twofaccount: {}
+            }
+        },
+        mounted(){
+            let token = localStorage.getItem('jwt')
+
+            axios.defaults.headers.common['Content-Type'] = 'application/json'
+            axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+            axios.get('api/twofaccounts').then(response => {
+                response.data.forEach((data) => {
+                    this.accounts.push({
+                        id : data.id,
+                        name : data.name,
+                        email : data.email,
+                        uri : data.uri,
+                        icon : data.icon
+                    })
+                })
+                // this.loadTasks()
+            })
+        },
+        components: {
+            Modal,
+            ModalTwofaccount
+        },
+        methods: {
+            getOTP: function (id) {
+                let token = localStorage.getItem('jwt')
+                let twofa
+
+                axios.defaults.headers.common['Content-Type'] = 'application/json'
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+                axios.get('api/twofaccounts/' + id).then(response => {
+                    let res1 = response.data
+                    axios.get('api/twofaccounts/' + id + '/totp').then(response => {
+                        this.twofaccount = Object.assign(res1, response.data)
+                        this.twofaccount.totp = this.twofaccount.totp.substr(0, 3) + " " + this.twofaccount.totp.substr(3);
+                    })
+                })
+
+
+                console.log(this.twofaccount)
+                this.ModalIsActive = true
+            }
+        },
+        beforeRouteEnter (to, from, next) {
+            if ( ! localStorage.getItem('jwt')) {
+                return next('login')
+            }
+
+            next()
+        }
+    }
+</script>
+

resources/js/views/App.vue

@@ -1,26 +1,33 @@
 <template>
     <div>
-        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
-            <div class="container">
-                <router-link :to="{name: 'home'}" class="navbar-brand">Treclon</router-link>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                    <!-- Left Side Of Navbar -->
-                    <ul class="navbar-nav mr-auto"></ul>
-                    <!-- Right Side Of Navbar -->
-                    <ul class="navbar-nav ml-auto">
-                        <!-- Authentication Links -->
-                        <router-link :to="{ name: 'login' }" class="nav-link" v-if="!isLoggedIn">Login</router-link>
-                        <router-link :to="{ name: 'register' }" class="nav-link" v-if="!isLoggedIn">Register</router-link>
-                        <li class="nav-link" v-if="isLoggedIn"> Hi, {{name}}</li>
-                        <router-link :to="{ name: 'home' }" class="nav-link" v-if="isLoggedIn">Home</router-link>
-                    </ul>
-                </div>
+        <nav class="navbar is-black level is-mobile has-text-grey-lighter">
+            <div class="level-left">
+                <router-link :to="{ name: 'home' }" class="is-size-4 has-text-weight-light" v-if="isLoggedIn">2FAccount</router-link>
+            </div>
+            <div class="level-right">
+                <p class="level-item">
+                    <a class="button is-black">
+                        <span class="icon has-text-grey-light">
+                            <font-awesome-icon :icon="['fas', 'plus-circle']" />
+                        </span>
+                    </a>
+                </p>
+                <p class="level-item" v-if="!isLoggedIn">
+                    <router-link :to="{ name: 'login' }" class="button is-black">
+                        login
+                    </router-link>
+                </p>
+                <p class="level-item" v-if="!isLoggedIn">
+                    <router-link :to="{ name: 'register' }" class="button is-black">
+                        Register
+                    </router-link>
+                </p>
+                <p class="level-item" v-if="isLoggedIn">
+                    Hi, {{username}}
+                </p>
             </div>
         </nav>
+
         <main class="py-4">
             <router-view></router-view>
         </main>
@@ -29,15 +36,16 @@
 
 <script>
     export default {
+        name: 'App',
         data(){
             return {
                 isLoggedIn : null,
-                name : null
+                username : null
             }
         },
         mounted(){
             this.isLoggedIn = localStorage.getItem('jwt')
-            this.name = localStorage.getItem('user')
+            this.username = localStorage.getItem('user')
         }
     }
 </script>

resources/js/views/Welcome.vue

@@ -1,56 +0,0 @@
-<template>
-    <div class="flex-center position-ref full-height">
-        <div class="content">
-            <div  class="m-b-md">
-                <h2 class="title m-b-md">
-                    Treclon
-                </h2>
-                <h3>
-                    Your efficent task planner
-                </h3>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.full-height {
-    height: 100vh;
-}
-.flex-center {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-.position-ref {
-    position: relative;
-}
-.top-right {
-    position: absolute;
-    right: 10px;
-    top: 18px;
-}
-.content {
-    text-align: center;
-}
-.title {
-    font-size: 60px;
-}
-.links > a {
-    color: #636b6f;
-    padding: 0 25px;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: .1rem;
-    text-decoration: none;
-    text-transform: uppercase;
-}
-.m-b-md {
-    margin-bottom: 30px;
-    color: #000000;
-}
-</style>
-
-<script>
-    export default {}
-</script>

resources/views/landing.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="has-background-black-ter">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,7 +8,7 @@
     <title>{{ env("APP_NAME") }}</title>
     <link href=" {{ mix('css/app.css') }}" rel="stylesheet">
 </head>
-<body>
+<body class="has-text-lighter">
     <div id="app">
         <app></app>
     </div>