neko/client/src/components/connect.vue
Reed Hummel 62082654b3 Change the login page to use "Display Name" instead of "Username"
This is better for new users, since "username" implies that there are
persistent accounts, which there are not.
2020-03-30 10:37:25 -07:00

171 lines
3.8 KiB
Vue

<template>
<div class="connect">
<div class="window">
<div class="logo">
<img src="@/assets/images/logo.svg" alt="n.eko" />
<span><b>n</b>.eko</span>
</div>
<form class="message" v-if="!connecting" @submit.stop.prevent="connect">
<span>Please Login</span>
<input type="text" placeholder="Display Name" v-model="username" />
<input type="password" placeholder="Password" v-model="password" />
<button type="submit" @click.stop.prevent="login">
Connect
</button>
</form>
<div class="loader" v-if="connecting">
<div class="bounce1"></div>
<div class="bounce2"></div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.connect {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($color: $background-floating, $alpha: 0.8);
display: flex;
justify-content: center;
align-items: center;
.window {
width: 300px;
background: $background-secondary;
border-radius: 5px;
padding: 10px;
.logo {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
img {
height: 90px;
margin-right: 10px;
}
span {
font-size: 30px;
line-height: 56px;
b {
font-weight: 900;
}
}
}
.message {
display: flex;
flex-direction: column;
span {
display: block;
text-align: center;
text-transform: uppercase;
line-height: 30px;
}
input {
border: none;
padding: 6px 8px;
line-height: 20px;
border-radius: 5px;
margin: 5px 0;
background: $background-tertiary;
color: $text-normal;
&::selection {
background: $text-link;
}
}
button {
cursor: pointer;
border-radius: 5px;
padding: 4px;
background: $style-primary;
color: $text-normal;
text-align: center;
text-transform: uppercase;
font-weight: bold;
line-height: 30px;
margin: 5px 0;
border: none;
}
}
.loader {
width: 90px;
height: 90px;
position: relative;
margin: 0 auto;
.bounce1,
.bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $style-primary;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2s infinite ease-in-out;
animation: bounce 2s infinite ease-in-out;
}
.bounce2 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
}
</style>
<script lang="ts">
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
import { get, set } from '~/utils/localstorage'
@Component({ name: 'neko-connect' })
export default class extends Vue {
private username = ''
private password = ''
mounted() {
if (this.$accessor.username !== '' && this.$accessor.password !== '') {
this.$accessor.login({ username: this.$accessor.username, password: this.$accessor.password })
}
}
get connecting() {
return this.$accessor.connecting
}
login() {
this.$accessor.login({ username: this.username, password: this.password })
}
}
</script>