1. add login page

This commit is contained in:
Jay 2018-08-12 00:36:08 +08:00
parent 6e05f70723
commit 06e2bfded6
14 changed files with 161 additions and 122 deletions

44
package-lock.json generated
View File

@ -2087,8 +2087,7 @@
"babel-helper-vue-jsx-merge-props": { "babel-helper-vue-jsx-merge-props": {
"version": "2.0.3", "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", "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": { "babel-loader": {
"version": "8.0.0-beta.4", "version": "8.0.0-beta.4",
@ -2127,6 +2126,15 @@
"esutils": "2.0.2" "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": { "babylon": {
"version": "7.0.0-beta.47", "version": "7.0.0-beta.47",
"resolved": "http://registry.npm.taobao.org/babylon/download/babylon-7.0.0-beta.47.tgz", "resolved": "http://registry.npm.taobao.org/babylon/download/babylon-7.0.0-beta.47.tgz",
@ -3233,8 +3241,7 @@
"core-js": { "core-js": {
"version": "2.5.7", "version": "2.5.7",
"resolved": "http://registry.npm.taobao.org/core-js/download/core-js-2.5.7.tgz", "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": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -7269,6 +7276,11 @@
"topo": "3.0.0" "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": { "js-message": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "http://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz", "resolved": "http://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz",
@ -7604,8 +7616,7 @@
"lodash": { "lodash": {
"version": "4.17.10", "version": "4.17.10",
"resolved": "http://registry.npm.taobao.org/lodash/download/lodash-4.17.10.tgz", "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": { "lodash.camelcase": {
"version": "4.3.0", "version": "4.3.0",
@ -10242,8 +10253,7 @@
"regenerator-runtime": { "regenerator-runtime": {
"version": "0.11.1", "version": "0.11.1",
"resolved": "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz", "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": { "regenerator-transform": {
"version": "0.12.4", "version": "0.12.4",
@ -10681,6 +10691,24 @@
"node-forge": "0.7.5" "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": { "semver": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "http://registry.npm.taobao.org/semver/download/semver-5.5.0.tgz", "resolved": "http://registry.npm.taobao.org/semver/download/semver-5.5.0.tgz",

View File

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

View File

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

View File

@ -1,58 +1,5 @@
<template> <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> </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>

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -1,6 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Home from './views/Home.vue' // import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
Vue.use(Router) Vue.use(Router)
@ -10,16 +11,8 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', 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')
} }
] ]
}) })

1
src/store/getters.js Normal file
View File

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

View File

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

View File

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

View File

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

View File

@ -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>

3
vue.config.js Normal file
View File

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