settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: set up start page layout

Browse Source
This commit is contained in:
Settel 2022-07-28 15:13:27 +02:00
parent 226a40437e
commit 9642100d8c
2 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/assets/css/colors.scss
View File

@ -22,9 +22,9 @@ $button-background-color: #00a0e0;
$button-text-color: #304048;
$button-border: 4px solid #007098;
$button-hover-background-color: $button-background-color;
$button-hover-background-color: #00c0ff;
$button-hover-text-color: #ffffff;
$button-hover-border: $button-border;
$button-hover-border: 4px solid #00a0c0;
$button-disabled-background-color: #006080;
$button-disabled-text-color: #102028;

23
client/src/components/LoginBox.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="login-box__container-outer">
<form class="login-box__container-inner" @submit.prevent="login">
<input v-model="authCode" v-focus class="login-box__authinput" type="text" size="6" maxlength="6"
placeholder="Code" />
<Button type="submit">Go!</Button>
<div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
</form>
</div>
<div class="login-box__container-outer">
<form class="login-box__container-inner" @submit.prevent="login">
<input v-model="authCode" v-focus class="login-box__authinput" type="text" size="6" maxlength="6"
placeholder="Code" />
<Button type="submit">Go!</Button>
<div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
</form>
</div>
</template>
<script setup lang="ts">
@ -16,14 +16,12 @@ import { watch, ref, Ref } from 'vue'
const authCode: Ref<string> = ref('')
const errorMessage: Ref<string> = ref('')
const vFocus = {
mounted: (el: HTMLElement) => el.focus()
}
const vFocus = { mounted: (el: HTMLElement) => el.focus() }
const login = (): void => {
errorMessage.value = ''
const { data, pending, error } = useFetch(`/api/login?code=${authCode.value}`)
const { data, pending } = useFetch(`/api/login?code=${authCode.value}`)
watch(pending, (newVal) => {
if (!newVal && data.value === 'ok') {
@ -44,6 +42,7 @@ const login = (): void => {
display: flex;
width: 240px;
}
&__container-inner {
margin: 0 0 0 auto;
}