1. add login page

package-lock.json

@@ -2087,8 +2087,7 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "http://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
-      "dev": true
     },
     "babel-loader": {
       "version": "8.0.0-beta.4",
@@ -2127,6 +2126,15 @@
         "esutils": "2.0.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "2.5.7",
+        "regenerator-runtime": "0.11.1"
+      }
+    },
     "babylon": {
       "version": "7.0.0-beta.47",
       "resolved": "http://registry.npm.taobao.org/babylon/download/babylon-7.0.0-beta.47.tgz",
@@ -3233,8 +3241,7 @@
     "core-js": {
       "version": "2.5.7",
       "resolved": "http://registry.npm.taobao.org/core-js/download/core-js-2.5.7.tgz",
-      "integrity": "sha1-+XJgj/DOrWi4QaFqky0LGDeRgU4=",
+      "integrity": "sha1-+XJgj/DOrWi4QaFqky0LGDeRgU4="
-      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -7269,6 +7276,11 @@
         "topo": "3.0.0"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "http://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz",
@@ -7604,8 +7616,7 @@
     "lodash": {
       "version": "4.17.10",
       "resolved": "http://registry.npm.taobao.org/lodash/download/lodash-4.17.10.tgz",
-      "integrity": "sha1-G3eTz3JZ6jj7NmHU04syYK+K5Oc=",
+      "integrity": "sha1-G3eTz3JZ6jj7NmHU04syYK+K5Oc="
-      "dev": true
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -10242,8 +10253,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=",
+      "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.12.4",
@@ -10681,6 +10691,24 @@
         "node-forge": "0.7.5"
       }
     },
+    "semantic-ui-css": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.3.3.tgz",
+      "integrity": "sha512-/UDs+a07LdxmYgVNqkbW9x5Gil1Dt4HnVq4LrHKKUAD/DUDh0fnwmCxbQFyKKD+YsVDQWFqftyVbYKlClBFLDw==",
+      "requires": {
+        "jquery": "3.3.1"
+      }
+    },
+    "semantic-ui-vue": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/semantic-ui-vue/-/semantic-ui-vue-0.2.11.tgz",
+      "integrity": "sha512-YlkWFP3q5Mp0ZzvI85llg1ih4gIx6balNYN0F+2xNZHfMPRt1+CVgq1X1JN4xRZ1bz2iPPGk0LCB5HIJq0mzFw==",
+      "requires": {
+        "babel-helper-vue-jsx-merge-props": "2.0.3",
+        "babel-runtime": "6.26.0",
+        "lodash": "4.17.10"
+      }
+    },
     "semver": {
       "version": "5.5.0",
       "resolved": "http://registry.npm.taobao.org/semver/download/semver-5.5.0.tgz",

package.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "semantic-ui-css": "^2.3.3",
+    "semantic-ui-vue": "^0.2.11",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/App.vue

@@ -1,29 +1,28 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
+    <Loading />
   </div>
 </template>
 
+<script>
+import Loading from '@/components/Loading'
+export default {
+  name: 'root-view',
+  components: {
+    Loading
+  }
+}
+</script>
+
 <style lang="less">
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
   #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    height: 100%;
-  -webkit-font-smoothing: antialiased;
+    background-color: #eee;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
   }
 </style>

src/components/HelloWorld.vue

@@ -1,58 +1,5 @@
 <template>
-  <div class="hello">
+  <sui-container>
-    <h1>{{ msg }}</h1>
+    hello world
-    <p>
+  </sui-container>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
 </template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Loading.vue

@@ -0,0 +1,18 @@
+<template>
+  <sui-dimmer :active="getLoading">
+    <sui-loader>Loading...</sui-loader>
+  </sui-dimmer>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+
+export default {
+  data () {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['getLoading'])
+  }
+}
+</script>

src/components/Login/index.vue

@@ -0,0 +1,61 @@
+<template>
+    <sui-container>
+        <div class="login-form">
+          <sui-header textAlign='center' color='teal'>OPay Donate</sui-header>
+          <sui-segment>
+            <sui-form @submit.prevent="login">
+              <sui-form-field>
+                <input placeholder="Account" v-model="account">
+              </sui-form-field>
+              <sui-form-field>
+                <input placeholder="Password" v-model="password">
+              </sui-form-field>
+              <sui-button type="submit" fluid color='teal'>Login</sui-button>
+            </sui-form>
+          </sui-segment>
+          <sui-message>
+            <div class="oauth">
+              or login with <a href="#">twitch</a> ?
+            </div>
+          </sui-message>
+        </div>
+    </sui-container>
+</template>
+
+<style lang="less" scoped>
+.login-form {
+  max-width: 450px;
+  margin: 0 auto;
+  padding-top: 100px;
+
+  .oauth {
+    text-align: center;
+  }
+}
+</style>
+
+<script>
+import {mapMutations} from 'vuex'
+export default {
+  name: 'LoginForm',
+  data () {
+    return {
+      account: '',
+      password: ''
+    }
+  },
+  methods: {
+    ...mapMutations(['toggleLoading']),
+    login: function () {
+      console.log('login submit')
+      this.toggleLoading(1)
+      setTimeout(() => {
+        this.toggleLoading(0)
+      }, 1000)
+    }
+  },
+  mounted: function () {
+
+  }
+}
+</script>

src/main.js

@@ -2,6 +2,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import SuiVue from 'semantic-ui-vue'
+import 'semantic-ui-css/semantic.min.css'
+
+Vue.use(SuiVue)
 
 Vue.config.productionTip = false
 

src/router.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+// import HelloWorld from '@/components/HelloWorld'
+import Login from '@/components/Login'
 
 Vue.use(Router)
 
@@ -10,16 +11,8 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'Login',
-      component: Home
+      component: Login
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
     }
   ]
 })

src/store/getters.js

@@ -0,0 +1 @@
+export const getLoading = state => !!state.loading

src/store/index.js

@@ -1,15 +1,16 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import mutations from './mutations'
+import * as getters from './getters'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
+    loading: false
-  },
-  mutations: {
-
   },
+  mutations,
+  getters,
   actions: {
 
   }

src/store/mutations/index.js

@@ -0,0 +1,5 @@
+export default {
+  toggleLoading (state, loading = null) {
+    state.loading = !!loading
+  }
+}

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    baseUrl: process.env.BASE_URL || '/'
+}