Merge pull request 'Frontend was merged prematurely, this fixes that' (#3) from frontend/feature/login-view into feature/user-auth
Reviewed-on: https://git.tams.tech/scott/kalkutago/pulls/3
This commit is contained in:
commit
f32a188750
|
@ -1,5 +1,14 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterLink } from 'vue-router';
|
import { RouterLink } from 'vue-router';
|
||||||
|
import { error } from '../error'
|
||||||
|
import router from "../router";
|
||||||
|
|
||||||
|
async function logOut() {
|
||||||
|
const result = await fetch('/api/v1/auth', {method: 'DELETE'})
|
||||||
|
if(!result.ok) return error('failed to log out')
|
||||||
|
console.debug('logged out')
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
|
@ -9,7 +18,6 @@ import { RouterLink } from 'vue-router';
|
||||||
<div class="navbar-menu"></div>
|
<div class="navbar-menu"></div>
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<div class="buttons">
|
|
||||||
<RouterLink to="/" v-if="$route.path === '/new-track'">
|
<RouterLink to="/" v-if="$route.path === '/new-track'">
|
||||||
<button class="button is-info">
|
<button class="button is-info">
|
||||||
Go Back
|
Go Back
|
||||||
|
@ -22,6 +30,14 @@ import { RouterLink } from 'vue-router';
|
||||||
</button>
|
</button>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<button class="button is-info" @click="logOut">
|
||||||
|
Log Out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<!-- spacer -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { reactive } from "vue"
|
||||||
import { Track } from "./track"
|
import { Track } from "./track"
|
||||||
import { Tick } from './ticks'
|
import { Tick } from './ticks'
|
||||||
import { error } from "./error"
|
import { error } from "./error"
|
||||||
|
import { getCookie } from "./util";
|
||||||
|
|
||||||
enum State {
|
enum State {
|
||||||
Unfetched,
|
Unfetched,
|
||||||
|
@ -31,6 +32,8 @@ class AppState {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.tracks = new Array<Track>
|
this.tracks = new Array<Track>
|
||||||
this.state = State.Unfetched
|
this.state = State.Unfetched
|
||||||
|
const name = getCookie("name")
|
||||||
|
if (name) this.user = { name }
|
||||||
}
|
}
|
||||||
streamUpdatesFromServer() {
|
streamUpdatesFromServer() {
|
||||||
const source = new EventSource("/api/v1/updates")
|
const source = new EventSource("/api/v1/updates")
|
||||||
|
|
8
client/src/util.ts
Normal file
8
client/src/util.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
export function getCookie(key: string): string | null {
|
||||||
|
const start = document.cookie.indexOf(key + '=')
|
||||||
|
if(start === -1) return null
|
||||||
|
let end: number | undefined = document.cookie.indexOf(';', start)
|
||||||
|
if(end === -1)
|
||||||
|
end = undefined
|
||||||
|
return document.cookie.substring(start + key.length + 1, end)
|
||||||
|
}
|
|
@ -1,13 +1,18 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { state } from '../state';
|
import { state } from '../state';
|
||||||
import router from '../router'
|
import router from '../router'
|
||||||
|
|
||||||
const name = ref("")
|
const name = ref("")
|
||||||
const password = ref("")
|
const password = ref("")
|
||||||
|
const signUpWait = ref(false)
|
||||||
|
const loginWait = ref(false)
|
||||||
|
const signUpClass = computed(() => `submit button is-success ${signUpWait.value ? 'is-loading' : ''}`)
|
||||||
|
const loginClass = computed(() => `submit button is-info ${loginWait.value ? 'is-loading' : ''}`)
|
||||||
|
|
||||||
async function signUp() {
|
async function signUp() {
|
||||||
const $name = name.value
|
const $name = name.value
|
||||||
|
signUpWait.value = true
|
||||||
const result = await fetch("/api/v1/auth", {
|
const result = await fetch("/api/v1/auth", {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: JSON.stringify({ name: $name, password: password.value }),
|
body: JSON.stringify({ name: $name, password: password.value }),
|
||||||
|
@ -22,6 +27,7 @@ async function signUp() {
|
||||||
|
|
||||||
async function login() {
|
async function login() {
|
||||||
const $name = name.value
|
const $name = name.value
|
||||||
|
loginWait.value = true
|
||||||
const result = await fetch("/api/v1/auth", {
|
const result = await fetch("/api/v1/auth", {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
body: JSON.stringify({ name: $name, password: password.value }),
|
body: JSON.stringify({ name: $name, password: password.value }),
|
||||||
|
@ -34,6 +40,8 @@ async function login() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(state.user?.name) router.push("/")
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="modal is-active">
|
<div class="modal is-active">
|
||||||
|
@ -44,7 +52,7 @@ async function login() {
|
||||||
</header>
|
</header>
|
||||||
<section class="modal-card-body">
|
<section class="modal-card-body">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="username">Name</label>
|
<label for="username" class=label>Name</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input type="text" name="username" class="input" v-model="name" />
|
<input type="text" name="username" class="input" v-model="name" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -58,8 +66,8 @@ async function login() {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<footer class="modal-card-foot">
|
<footer class="modal-card-foot">
|
||||||
<button class="submit button is-success" @click="login">Log in</button>
|
<button :class="loginClass" @click="login">Log in</button>
|
||||||
<button class="submit button is-info" @click="signUp">Sign Up</button>
|
<button :class="signUpClass" @click="signUp">Sign Up</button>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
{ pkgs ? import <nixpkgs> {} }:
|
{ pkgs ? import <nixpkgs> {} }:
|
||||||
|
|
||||||
pkgs.mkShell {
|
pkgs.mkShell {
|
||||||
|
name = "kalkutago";
|
||||||
nativeBuildInputs = with pkgs.buildPackages; [
|
nativeBuildInputs = with pkgs.buildPackages; [
|
||||||
clang
|
clang
|
||||||
yarn nodejs
|
yarn nodejs
|
||||||
|
@ -9,6 +10,8 @@ pkgs.mkShell {
|
||||||
python3
|
python3
|
||||||
python3Packages.requests
|
python3Packages.requests
|
||||||
python3Packages.ipython
|
python3Packages.ipython
|
||||||
|
rustup
|
||||||
|
docker
|
||||||
|
gnumake
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue