quasar update

quasar/src/App.vue

@@ -7,10 +7,29 @@
       <q-tabs slot="navigation" class="purple">
         <q-tab 
           v-if="this.$store.state.login" 
+          icon="cast" 
+          route="/os" 
+          exact 
+          replace
+          @click="trigger()"
+        >OS 배포
+        </q-tab>
+        <q-tab 
+          v-if="this.$store.state.login" 
+          icon="send" 
+          route="/play" 
+          exact 
+          replace
+          @click="trigger()"
+        >App 배포
+        </q-tab>
+        <q-tab 
+          v-if="this.$store.state.login" 
           icon="create_new_folder" 
           route="/section" 
           exact 
           replace
+          @click="trigger()"
         >그룹
         </q-tab>
         <q-tab 
@@ -19,6 +38,7 @@
           route="/machine" 
           exact 
           replace
+          @click="trigger()"
         >서버
         </q-tab>
         <q-tab 
@@ -27,6 +47,7 @@
           route="/app" 
           exact 
           replace
+          @click="trigger()"
         >애플리케이션
         </q-tab>
         <q-tab 
@@ -35,6 +56,7 @@
           route="/account" 
           exact 
           replace
+          @click="trigger()"
         >사용자
         </q-tab>
         <q-tab 
@@ -61,6 +83,13 @@
       <div class="layout-padding">
         <div id="q-app">
           <router-view></router-view>
+          <q-ajax-bar
+            ref="bar" 
+            :position="position"
+            :size="computedSize"
+            :color="color"
+          >
+          </q-ajax-bar>
         </div>
       </div>
     </div>
@@ -74,12 +103,36 @@ export default {
   name: 'app',
   data () {
     return {
-      porchVersion: '0.0.1'
+      porchVersion: '0.0.1',
+      position: 'bottom',
+      reverse: false,
+      size: 12,
+      color: '#e21b0c'
+    }
+  },
+  computed: {
+    computedSize () {
+      return this.size + 'px'
     }
   },
   methods: {
     updateMenu: function () {
-      this.login = this.$store.state.login
+      if (this.$cookie.get('token')) {
+        this.$store.commit('loggedIn', true)
+        this.$store.commit('setName', this.$cookie.get('name'))
+        this.$store.commit('setRole', this.$cookie.get('role'))
+        this.$store.commit('setToken', this.$cookie.get('token'))
+        this.$store.commit('setRefreshToken', this.$cookie.get('refreshToken'))
+      }
+    },
+    trigger () {
+      this.$refs.bar.start()
+
+      setTimeout(() => {
+        if (this.$refs.bar) {
+          this.$refs.bar.stop()
+        }
+      }, 5000)
     }
   },
   updated () {

quasar/src/components/Login.vue

@@ -35,7 +35,13 @@
             </button>
           </div>
         </div>
-
+        <p></p>
+        <p></p>
+        <div>
+          <router-link to="/admin/login">
+            관리자 로그인
+          </router-link>
+        </div>
       </div>
     </div>
   </div>
@@ -67,10 +73,10 @@ export default {
       }
       this.$http.post(url, dReqBody, headers).then(response => {
         // save token cookie
-        // this.$cookie.set('token', response.body.token)
-        // this.$cookie.set('refresh_token', response.body.refresh_token)
-        // this.$cookie.set('role', response.body.role)
-        // this.$cookie.set('name', response.body.name)
+        this.$cookie.set('token', response.body.token)
+        this.$cookie.set('refreshToken', response.body.refresh_token)
+        this.$cookie.set('role', response.body.role)
+        this.$cookie.set('name', this.name)
         // state update
         this.$store.commit('loggedIn', true)
         this.$store.commit('setName', this.name)

quasar/src/components/adminLogin.vue

+<template>
+
+  <div class="login-page bg-light column items-center">
+    <div class="login-logo bg-purple flex items-center justify-center">
+      UDAM 관리자 로그인
+    </div>
+    <div>
+      <div class="login-card card bg-white column items-center justify-center">
+
+        <div class="column">
+          <div class="stacked-label width-1of3">
+            <input 
+              type="text" 
+              v-model="name" 
+              ref="name" 
+              placeholder="사용자 ID를 입력하세요."
+            >
+            <label>사용자 ID</label>
+          </div>
+          <div class="stacked-label">
+            <input 
+              type="password" 
+              v-model="pass" 
+              v-on:keyup.enter="auth" 
+              placeholder="비밀번호를 입력하세요."
+            >
+            <label>비밀번호</label>
+          </div>
+          <div>
+            <button class="purple" @click="auth">관리자 로그인</button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { API_URL } from 'config'
+import { Toast } from 'quasar'
+
+export default {
+  name: 'login',
+  data () {
+    return {
+      name: '',
+      pass: ''
+    }
+  },
+  methods: {
+    auth: function () {
+      const url = API_URL + '/account/admin/login/'
+      const dReqBody = {
+        name: this.name,
+        pass: this.pass
+      }
+      const headers = {
+        headers: {
+        }
+      }
+      this.$http.post(url, dReqBody, headers).then(response => {
+        this.$cookie.set('token', response.body.token)
+        this.$cookie.set('refreshToken', response.body.refresh_token)
+        this.$cookie.set('role', response.body.role)
+        this.$cookie.set('name', this.name)
+
+        this.$store.commit('loggedIn', true)
+        this.$store.commit('setName', this.name)
+        this.$store.commit('setRole', response.body.role)
+        this.$store.commit('setToken', response.body.token)
+        this.$store.commit('setRefreshToken', response.body.refresh_token)
+
+        this.$router.push('/machine')
+      }, response => {
+        Toast.create.negative({
+          html: '로그인 실패: ' + response.body.error,
+          timeout: 5000
+        })
+        this.name = ''
+        this.pass = ''
+        this.$refs.name.focus()
+      })
+    }
+  },
+  mounted () {
+    this.$refs.name.focus()
+  }
+}
+</script>
+
+<style lang="stylus">
+.login-page
+  .login-logo
+    height 10vh
+    width 60%
+    padding-top 1vh
+    font-size 3vmax
+    color rgba(255, 255, 255, .7)
+    overflow hidden
+  .login-card
+    margin-top 10px
+    width 90vw
+    max-width 600px
+    padding 20px
+</style>

quasar/src/router.js

@@ -22,6 +22,11 @@ export default new VueRouter({
 
   routes: [
     {
+      path: '/admin/login',
+      name: 'adminLogin',
+      component: load('adminLogin')
+    },
+    {
       path: '/login',
       name: 'login',
       component: load('Login')
@@ -82,6 +87,11 @@ export default new VueRouter({
       component: load('account/Pass')
     },
     {
+      path: '/os',
+      name: 'os',
+      component: load('os/List')
+    },
+    {
       path: '/',
       name: 'index',
       component: load('Index')