Minimal login.

This commit is contained in:
aminecmi 2022-01-28 09:12:56 +01:00
parent f7bbde95b4
commit 7a95ab8d3e
5 changed files with 64 additions and 62 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 162 KiB

View File

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

View File

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