Skip to content
Snippets Groups Projects
Commit 01a78b0b authored by Trirst's avatar Trirst
Browse files

Remove authentication page. Make authentication component.

parent 0d60b997
Branches
No related tags found
No related merge requests found
<template>
<section id="login-section">
<div id="login-container">
<div>
<button v-show="!loggingIn" @click="loggingIn = true">Authenticate</button>
<input
v-model="snowflake"
placeholder="ID"
name="snowflake"
v-show="loggingIn"
type="text"
/>
</div>
<div>
<input
v-model="secret"
placeholder="Secret token"
name="secret-token"
type="text"
v-model="secret"
/>
</div>
<button
:disabled="!snowflake || !secret"
@click="authenticateUser(snowflake, secret)"
>
Submit
<button v-show="loggingIn" @click="authenticate(secret.trim())">
Authenticate
</button>
<div v-show="loginFailed">Authentication failed. Check ID or Secret.</div>
<button v-show="loggingIn" @click="loggingIn = false">Back</button>
</div>
</section>
</template>
<script>
......@@ -33,29 +19,23 @@ import { mapActions } from "vuex";
export default {
data: function () {
return {
snowflake: "",
loggingIn: false,
secret: "",
loginFailed: false,
};
},
// 6813039343691657216
// tKUfNCawFlQSSkhmjyFfWErgqBkdXzbIBwcNrpAOoUSpwyNbqUNwkRZsjkINkChU
methods: {
async authenticateUser(snowflake, secret) {
async authenticate(secret) {
try {
const response = await fetch(`/api/user/${snowflake}/secret`, {
const response = await fetch(`/api/user/this`, {
headers: { secret: secret },
});
const serverSecret = await response.text();
if (secret === serverSecret) {
console.log("Authenticated successfully");
this.saveStateSnowflake(snowflake);
const data = await response.json();
if (response.ok) {
this.saveStateSnowflake(data.id);
this.saveStateSecret(secret);
this.snowflake = "";
this.secret = "";
console.log("Authenticated successfully");
} else {
console.log("Please check ID or Secret Token");
this.loginFailed = true;
console.error("Authenticated failed");
}
} catch {
(error) => console.error("Something went terribly wrong... ", error);
......@@ -65,6 +45,3 @@ export default {
},
};
</script>
\ No newline at end of file
<style scoped>
</style>
\ No newline at end of file
......@@ -2,7 +2,6 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import ImageView from '../views/ImageView.vue'
import User from '../views/User.vue'
Vue.use(VueRouter)
......@@ -17,11 +16,6 @@ const routes = [
name: 'ImageView',
component: ImageView,
},
{
path: '/user',
name: 'User',
component: User,
}
]
const router = new VueRouter({
......
......@@ -4,7 +4,8 @@
<div>
<TagCreation></TagCreation>
<ImageUpload @image-submitted="updateHashArray"></ImageUpload>
<router-link id="user-settings" to="/user">User settings</router-link>
<!-- <router-link id="user-settings" to="/user">User settings</router-link> -->
<UserAuthentication id="auth"></UserAuthentication>
</div>
</section>
<ImageList :hashArray="stateHashArray"></ImageList>
......@@ -15,6 +16,7 @@
import ImageList from "@/components/ImageList.vue";
import ImageUpload from "@/components/ImageUpload.vue";
import TagCreation from "@/components/TagCreation.vue";
import UserAuthentication from "@/components/UserAuthentication.vue";
import { mapState, mapActions } from "vuex";
export default {
......@@ -22,6 +24,7 @@ export default {
ImageList,
ImageUpload,
TagCreation,
UserAuthentication,
},
computed: {
...mapState(["stateHashArray"]),
......@@ -56,7 +59,7 @@ export default {
display: flex;
flex-flow: row;
}
#user-settings {
#auth {
position: absolute;
bottom: 0;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment