Add basic signup form
This commit is contained in:
parent
31151e184c
commit
b1bb9f6e38
4 changed files with 43 additions and 28 deletions
23
src/App.vue
23
src/App.vue
|
@ -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>
|
||||
|
|
31
src/components/LoginForm.vue
Normal file
31
src/components/LoginForm.vue
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in a new issue