Merge pull request #4 from ZorgCC/develop

Develop

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.26.0",
     "buefy": "^0.9.17",
     "core-js": "^3.8.3",
     "vue": "^2.6.14",

src/App.vue

@@ -1 +1 @@
-<template>
  <div id="app">
    <div class="container">
      <HeaderComponent />
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent'

export default {
  components: { HeaderComponent },
  data() {
    return {}
  },
}
</script>
+<template>
  <div id="app">
    <div class="container">
      <HeaderComponent @checkAuth="checkAuth" :auth="isAuth" :user="user" />
      <router-view @checkAuth="checkAuth"></router-view>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent'

export default {
  components: { HeaderComponent },
  data() {
    return {
      isAuth: null,
      user: '',
    }
  },
  methods: {
    loggedOut() {
      this.isAuth = false
    },
    async checkAuth() {
      this.isAuth = localStorage.getItem('jwt') != null
      if (this.isAuth) {
        await this.$http
          .get('me', {
            headers: { Authorization: `Bearer ${localStorage.getItem('jwt')}` },
          })
          .then((response) => {
            localStorage.setItem('user', JSON.stringify(response.data.user))
            this.user = response.data.user
          })
          .catch(function (error) {
            console.error(error.response)
          })
      }
    },
  },
  async mounted() {
    await this.checkAuth()
  },
}
</script>

src/components/HeaderComponent.vue

@@ -7,7 +7,7 @@
     </template>
     <template #start>
       <b-navbar-item
-        v-if="isAuth"
+        v-if="auth"
         class="is-link"
         exact-active-class="home-active"
         tag="router-link"
@@ -36,9 +36,12 @@
 
     <template #end>
       <b-navbar-item tag="div">
+        <p v-if="auth" class="mx-2 has-text-grey">
+          {{ user.username }}
+        </p>
         <div class="buttons">
           <router-link
-            v-if="isAuth"
+            v-if="auth"
             class="button is-light is-rounded"
             active-class="home-active"
             :to="{ name: 'settings' }"
@@ -46,9 +49,9 @@
             <b-icon icon="cog"></b-icon>
           </router-link>
           <b-button
-            v-if="isAuth"
+            v-if="auth"
             class="button is-light is-rounded"
-            @click="isAuth = false"
+            @click="loggedOut"
           >
             Log out
           </b-button>
@@ -68,10 +71,24 @@
 <script>
 export default {
   name: 'HeaderComponent',
+  props: {
+    auth: Boolean,
+    user: {
+      type: [String, Object],
+    },
+  },
   data() {
-    return {
+    return {}
-      isAuth: true,
+  },
-    }
+  methods: {
+    loggedOut() {
+      localStorage.removeItem('jwt')
+      localStorage.removeItem('user')
+      if (localStorage.getItem('jwt') == null) {
+        this.$emit('checkAuth')
+        this.$router.push('login')
+      }
+    },
   },
 }
 </script>

src/main.js

@@ -2,8 +2,12 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import Buefy from 'buefy'
+import Axios from 'axios'
 import './assets/scss/main.scss'
 
+Axios.defaults.baseURL = 'https://avatars.zorg.cc/api/'
+Vue.prototype.$http = Axios
+
 Vue.config.productionTip = false
 Vue.use(Buefy)
 

src/router/index.js

@@ -8,16 +8,25 @@ const routes = [
     path: '/',
     name: 'home',
     component: () => import('../views/HomeView'),
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: '/login',
     name: 'login',
     component: () => import('../views/LoginView.vue'),
+    meta: {
+      guest: true,
+    },
   },
   {
     path: '/settings',
     name: 'settings',
     component: () => import('../views/SettingsView.vue'),
+    meta: {
+      requiresAuth: true,
+    },
   },
 ]
 
@@ -25,9 +34,25 @@ const router = new VueRouter({
   routes,
 })
 
-// router.beforeEach((to, from, next) => {
+router.beforeEach((to, from, next) => {
-//   if (to.name !== 'login') next({ name: 'login' })
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
-//   else next()
+    if (localStorage.getItem('jwt') == null) {
-// })
+      next({
+        name: 'login',
+        query: { nextUrl: to.fullPath },
+      })
+    } else {
+      next()
+    }
+  } else if (to.matched.some((record) => record.meta.guest)) {
+    if (localStorage.getItem('jwt') == null) {
+      next()
+    } else {
+      next({ name: 'home' })
+    }
+  } else {
+    next()
+  }
+})
 
 export default router

src/views/LoginView.vue

@@ -18,9 +18,10 @@
                 <span class="has-text-grey">Username</span>
               </template>
               <b-input
+                v-model="username"
                 rounded
                 icon="account"
-                value="johnsilver"
+                placeholder="username"
                 @focus="isValid = true"
               ></b-input>
             </b-field>
@@ -32,10 +33,11 @@
                 <span class="has-text-grey">Password</span>
               </template>
               <b-input
+                v-model="password"
                 rounded
                 icon="lock"
                 value="123"
-                type="password"
+                placeholder="password"
                 @focus="isValid = true"
               ></b-input>
             </b-field>
@@ -44,7 +46,8 @@
                 class="m-0"
                 rounded
                 onclick="this.blur()"
-                @click.prevent="isValid = !isValid"
+                type="submit"
+                @click.prevent="handleSubmit"
               >
                 Log in
               </b-button>
@@ -62,8 +65,40 @@ export default {
   data() {
     return {
       isValid: true,
+      username: '',
+      password: '',
     }
   },
+  methods: {
+    async handleSubmit() {
+      let vm = this
+      if (this.password.length > 0 && this.username.length > 0) {
+        await this.$http
+          .post('login', {
+            username: this.username,
+            password: this.password,
+          })
+          .then((response) => {
+            localStorage.setItem('jwt', response.data.jwt_token)
+            if (localStorage.getItem('jwt') != null) {
+              // this.$emit('loggedIn')
+              this.$emit('checkAuth')
+              if (this.$route.query.nextUrl != null) {
+                this.$router.push({ path: `${this.$route.query.nextUrl}` })
+              } else {
+                this.$router.push({ name: 'home' })
+              }
+            }
+          })
+          .catch(function (error) {
+            vm.isValid = false
+            console.error(error.response)
+          })
+      } else {
+        this.isValid = false
+      }
+    },
+  },
 }
 </script>
 

yarn.lock

@@ -1836,6 +1836,13 @@ autoprefixer@^10.2.4:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
+  integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 babel-loader@^8.2.2:
   version "8.2.3"
   resolved "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d"
@@ -3179,7 +3186,7 @@ flatted@^3.1.0:
   resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==