Add basic signup form

This commit is contained in:
aldrin 2021-04-13 11:01:50 +02:00
parent 31151e184c
commit b1bb9f6e38
4 changed files with 43 additions and 28 deletions

View file

@ -13,25 +13,4 @@ import Navbar from "@/components/Navbar.vue";
export default class App extends Vue {}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
<style lang="scss"></style>

View file

@ -0,0 +1,31 @@
<template>
<form class="box" @submit.prevent="">
<b-field label="E-Mail-Adresse">
<b-input type="email" icon="user" ref="email" />
</b-field>
<b-field label="Kennwort">
<b-input type="password" icon="key" />
</b-field>
<div v-if="false" class="notification is-danger">
Email or password was wrong.
</div>
<div class="buttons">
<b-button
native-type="submit"
type="is-primary"
style="margin-left: auto; margin-right: 0; order: 10"
>
Konto anlegen
</b-button>
</div>
</form>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class LoginForm extends Vue {}
</script>

View file

@ -21,9 +21,9 @@
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
<strong>Konto anlegen</strong>
</a>
<a class="button is-light"> Log in </a>
<a class="button is-light">Anmelden</a>
</div>
</b-navbar-item>
</template>

View file

@ -1,12 +1,17 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<section class="container">
<div class="columns is-centered">
<div class="column is-3-widescreen is-4-desktop is-3-tablet">
<LoginForm />
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import LoginForm from "@/components/LoginForm.vue";
@Component
@Component({ components: { LoginForm } })
export default class Home extends Vue {}
</script>