vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Styled login

This commit is contained in:
kolaente 2018-09-06 20:15:49 +02:00
parent 0349a4ad4a
commit efb0088ebf
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div id="app"> <div id="app">
<h1>Test</h1>
<router-view/> <router-view/>
</div> </div>
</template> </template>
@ -12,12 +11,8 @@
</script> </script>
<style> <style>
#app { body {
font-family: 'Avenir', Helvetica, Arial, sans-serif; background: #f5f5f5;
-webkit-font-smoothing: antialiased; min-height: 100vh;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} }
</style> </style>

45
src/components/Login.vue
View File

@ -1,20 +1,35 @@
<template> <template>
<div> <div class="container has-text-centered">
<h2> <div class="column is-4 is-offset-4">
Login <h2 class="title">Login</h2>
</h2> <div class="box">
<form id="loginform" @submit.prevent="submit"> <form id="loginform" @submit.prevent="submit">
<input type="text" name="username" placeholder="Username" v-model="credentials.username" required> <div class="field">
<input type="password" name="password" placeholder="Password" v-model="credentials.password" required> <div class="control">
<button type="submit" class="ui fluid large blue submit button">Login</button> <input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
<div class="ui info message" v-if="loading"> </div>
<icon name="refresh" spin></icon>&nbsp;&nbsp; </div>
Loading... <div class="field">
<div class="control">
<input type="password" class="input" name="password" placeholder="Password" v-model="credentials.password" required>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-link">Login</button>
</div>
</div>
<div class="notification is-info" v-if="loading">
Loading...
</div>
<div class="notification is-danger" v-if="error">
{{ error }}
</div>
</form>
</div> </div>
<div class="ui error message" v-if="error" style="display: block;"> </div>
{{ error }}
</div>
</form>
</div> </div>
</template> </template>