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">
|
||||
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>
|
||||
<template>
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
|
@ -9,20 +18,27 @@ import { RouterLink } from 'vue-router';
|
|||
<div class="navbar-menu"></div>
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<RouterLink to="/" v-if="$route.path === '/new-track'">
|
||||
<button class="button is-info">
|
||||
Go Back
|
||||
</button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/" v-if="$route.path === '/new-track'">
|
||||
<button class="button is-info">
|
||||
Go Back
|
||||
</button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/new-track" v-else>
|
||||
<button class="button is-primary">
|
||||
Add Track
|
||||
</button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<RouterLink to="/new-track" v-else>
|
||||
<button class="button is-primary">
|
||||
Add Track
|
||||
</button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="navbar-item">
|
||||
<button class="button is-info" @click="logOut">
|
||||
Log Out
|
||||
</button>
|
||||
</div>
|
||||
<div class="navbar-item">
|
||||
<!-- spacer -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
@ -2,6 +2,7 @@ import { reactive } from "vue"
|
|||
import { Track } from "./track"
|
||||
import { Tick } from './ticks'
|
||||
import { error } from "./error"
|
||||
import { getCookie } from "./util";
|
||||
|
||||
enum State {
|
||||
Unfetched,
|
||||
|
@ -31,6 +32,8 @@ class AppState {
|
|||
constructor() {
|
||||
this.tracks = new Array<Track>
|
||||
this.state = State.Unfetched
|
||||
const name = getCookie("name")
|
||||
if (name) this.user = { name }
|
||||
}
|
||||
streamUpdatesFromServer() {
|
||||
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">
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { state } from '../state';
|
||||
import router from '../router'
|
||||
|
||||
const name = 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() {
|
||||
const $name = name.value
|
||||
signUpWait.value = true
|
||||
const result = await fetch("/api/v1/auth", {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name: $name, password: password.value }),
|
||||
|
@ -22,6 +27,7 @@ async function signUp() {
|
|||
|
||||
async function login() {
|
||||
const $name = name.value
|
||||
loginWait.value = true
|
||||
const result = await fetch("/api/v1/auth", {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ name: $name, password: password.value }),
|
||||
|
@ -34,6 +40,8 @@ async function login() {
|
|||
}
|
||||
}
|
||||
|
||||
if(state.user?.name) router.push("/")
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="modal is-active">
|
||||
|
@ -44,7 +52,7 @@ async function login() {
|
|||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="field">
|
||||
<label for="username">Name</label>
|
||||
<label for="username" class=label>Name</label>
|
||||
<div class="control">
|
||||
<input type="text" name="username" class="input" v-model="name" />
|
||||
</div>
|
||||
|
@ -58,8 +66,8 @@ async function login() {
|
|||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="submit button is-success" @click="login">Log in</button>
|
||||
<button class="submit button is-info" @click="signUp">Sign Up</button>
|
||||
<button :class="loginClass" @click="login">Log in</button>
|
||||
<button :class="signUpClass" @click="signUp">Sign Up</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
|
19
shell.nix
19
shell.nix
|
@ -2,13 +2,16 @@
|
|||
{ pkgs ? import <nixpkgs> {} }:
|
||||
|
||||
pkgs.mkShell {
|
||||
nativeBuildInputs = with pkgs.buildPackages; [
|
||||
clang
|
||||
yarn nodejs
|
||||
openssl
|
||||
python3
|
||||
python3Packages.requests
|
||||
python3Packages.ipython
|
||||
name = "kalkutago";
|
||||
nativeBuildInputs = with pkgs.buildPackages; [
|
||||
clang
|
||||
yarn nodejs
|
||||
openssl
|
||||
python3
|
||||
python3Packages.requests
|
||||
python3Packages.ipython
|
||||
rustup
|
||||
docker
|
||||
gnumake
|
||||
];
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue