Minimal login.
This commit is contained in:
parent
f7bbde95b4
commit
7a95ab8d3e
Binary file not shown.
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 162 KiB |
26
src/App.vue
26
src/App.vue
@ -1,17 +1,35 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div v-if="loading">LOADING...</div>
|
||||
<div v-show="!loading">
|
||||
<Login v-if="!authed" v-on:login="handleLoggedIn" v-on:loading="handleLoading"></Login>
|
||||
<span v-if="authed" class="bg-purple text-3xl font-bold underline">authed</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
import Login from "@/components/Login";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
Login
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
authed: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLoggedIn: function () {
|
||||
this.authed = true;
|
||||
this.loading = false;
|
||||
},
|
||||
handleLoading: function (event) {
|
||||
this.loading = event;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 6.7 KiB |
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a 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>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
42
src/components/Login.vue
Normal file
42
src/components/Login.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" v-model="key">
|
||||
<button type="button" v-on:click="sendKey"> Submit</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Login",
|
||||
data: function () {
|
||||
return {
|
||||
key: '',
|
||||
lsKey: 'KEY'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendKey: function () {
|
||||
fetch('http://localhost:7000/api/keys:check', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
body: this.key
|
||||
}).then(r => {
|
||||
if (r.statusCode !== 404) {
|
||||
localStorage.setItem(this.lsKey, this.key)
|
||||
this.$emit('login')
|
||||
}
|
||||
})
|
||||
}
|
||||
}, beforeMount() {
|
||||
this.$emit('loading', true)
|
||||
this.key = localStorage.getItem(this.lsKey);
|
||||
this.sendKey();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user