1. add login page
This commit is contained in:
parent
6e05f70723
commit
06e2bfded6
|
|
@ -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=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
|
||||
},
|
||||
"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=",
|
||||
"dev": true
|
||||
"integrity": "sha1-+XJgj/DOrWi4QaFqky0LGDeRgU4="
|
||||
},
|
||||
"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=",
|
||||
"dev": true
|
||||
"integrity": "sha1-G3eTz3JZ6jj7NmHU04syYK+K5Oc="
|
||||
},
|
||||
"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=",
|
||||
"dev": true
|
||||
"integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
|
||||
},
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
39
src/App.vue
39
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>
|
||||
|
||||
<style lang="less">
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-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;
|
||||
}
|
||||
<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 {
|
||||
height: 100%;
|
||||
background-color: #eee;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,5 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
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>
|
||||
<sui-container>
|
||||
hello world
|
||||
</sui-container>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
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')
|
||||
name: 'Login',
|
||||
component: Login
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export const getLoading = state => !!state.loading
|
||||
|
|
@ -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: {
|
||||
|
||||
},
|
||||
mutations: {
|
||||
|
||||
loading: false
|
||||
},
|
||||
mutations,
|
||||
getters,
|
||||
actions: {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
toggleLoading (state, loading = null) {
|
||||
state.loading = !!loading
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
baseUrl: process.env.BASE_URL || '/'
|
||||
}
|
||||
Loading…
Reference in New Issue