122 lines
3.0 KiB
Vue
122 lines
3.0 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { RouterLink, RouterView } from 'vue-router'
|
|
import Sidebar from './components/main/Sidebar.vue'
|
|
import Alerts from './components/main/Alerts.vue'
|
|
import ContextMenu from './components/main/ContextMenu.vue'
|
|
|
|
import * as ui from './ui';
|
|
import * as backend from './backend';
|
|
import * as runs from './runs';
|
|
|
|
// possible states: loading, login, signup, logged
|
|
const loginState = ref('loading');
|
|
|
|
function handleAuthResult (success) {
|
|
loginState.value = success ? 'logged' : 'login';
|
|
}
|
|
|
|
function loginSubmit (formElem) {
|
|
let username = formElem.username.value;
|
|
let password = formElem.password.value;
|
|
|
|
loginState.value = 'loading';
|
|
backend.login(username, password).then(handleAuthResult);
|
|
}
|
|
|
|
function signupSubmit (formElem) {
|
|
let email = formElem.email.value;
|
|
let username = formElem.username.value;
|
|
let password = formElem.password.value;
|
|
let passwordRepeat = formElem.passwordRepeat.value;
|
|
|
|
if (password != passwordRepeat) {
|
|
ui.alert("Passwords don't match");
|
|
return;
|
|
}
|
|
|
|
loginState.value = 'loading';
|
|
backend.signup(username, email, password).then(handleAuthResult);
|
|
}
|
|
|
|
const runsListener = runs.onCreated(run => {
|
|
console.log("new run", run);
|
|
});
|
|
runsListener.allRuns = true; // hack?
|
|
|
|
backend.authResult().then(handleAuthResult);
|
|
</script>
|
|
|
|
<template>
|
|
<Alerts />
|
|
<ContextMenu />
|
|
|
|
<div class="container" v-if="loginState=='loading'">
|
|
<div class="content">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" v-if="loginState=='login'">
|
|
<div class="content">
|
|
<h3>Login</h3>
|
|
|
|
<form @submit.prevent="loginSubmit($event.target)">
|
|
<input name="username" type="text" placeholder="username">
|
|
<input name="password" type="password" placeholder="password">
|
|
<button class="button" type="submit">Login</button>
|
|
<p style="margin-top: 2em;">
|
|
Don't have a user?
|
|
<a href="#" @click.prevent="loginState='signup'">Signup</a>.
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" v-if="loginState=='signup'">
|
|
<div class="content">
|
|
<h3>Signup</h3>
|
|
|
|
<form @submit.prevent="signupSubmit($event.target)">
|
|
<input name="email" type="text" placeholder="email">
|
|
<input name="username" type="text" placeholder="username">
|
|
<input name="password" type="password" placeholder="password">
|
|
<input name="passwordRepeat" type="password" placeholder="password">
|
|
<button class="button" type="submit">Signup</button>
|
|
|
|
<p style="margin-top: 2em;">
|
|
Already have a user?
|
|
<a href="#" @click.prevent="loginState='login'">Login</a>.
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="loginState=='logged'">
|
|
<Sidebar />
|
|
<RouterView />
|
|
</template>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
max-width: 700px;
|
|
padding: 2em;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|