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-text-color: #304048;
$button-border: 4px solid #007098; $button-border: 4px solid #007098;
$button-hover-background-color: $button-background-color; $button-hover-background-color: #00c0ff;
$button-hover-text-color: #ffffff; $button-hover-text-color: #ffffff;
$button-hover-border: $button-border; $button-hover-border: 4px solid #00a0c0;
$button-disabled-background-color: #006080; $button-disabled-background-color: #006080;
$button-disabled-text-color: #102028; $button-disabled-text-color: #102028;

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

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