konrad
/
Library
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Added login background
the build failed Details

This commit is contained in:
konrad 2017-11-20 16:40:31 +01:00 committed by kolaente
parent d577f0e425
commit b45ceeb3e5
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
3 changed files with 47 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/App.vue
View File

@ -64,7 +64,8 @@ export default {
} }
#app{ #app{
margin: 2em 1em; margin: 0 1em;
padding-top: 1.5em;
} }
.menu-avatar{ .menu-avatar{

82
frontend/src/components/Login.vue
View File

@ -1,38 +1,41 @@
<template> <template>
<div class="ui middle aligned center aligned grid"> <div class="login-wrapper">
<div class="column"> <div class="ui middle aligned center aligned grid">
<h2 class="ui blue image header"> <div class="column">
<div class="content"> <h2 class="ui blue image header">
Login <div class="content">
</div> Login
</h2>
<form class="ui large form" id="loginform">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input v-focus type="text" name="username" placeholder="Username" v-model="credentials.username">
</div>
</div> </div>
<div class="field"> </h2>
<div class="ui left icon input"> <form class="ui large form" id="loginform">
<i class="lock icon"></i> <div class="ui stacked segment">
<input type="password" name="password" placeholder="Password" v-model="credentials.password" @keyup.enter="submit"> <div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input v-focus type="text" name="username" placeholder="Username" v-model="credentials.username">
</div>
</div> </div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password" v-model="credentials.password"
@keyup.enter="submit">
</div>
</div>
<div class="ui fluid large blue submit button" @click="submit()">Login</div>
</div> </div>
<div class="ui fluid large blue submit button" @click="submit()">Login</div>
</div>
<div class="ui info message" v-if="loading"> <div class="ui info message" v-if="loading">
<icon name="refresh" spin></icon>&nbsp;&nbsp; <icon name="refresh" spin></icon>&nbsp;&nbsp;
Loggig you in... Loggig you in...
</div> </div>
<div class="ui error message" v-if="error" style="display: block;"> <div class="ui error message" v-if="error" style="display: block;">
{{ error }} {{ error }}
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -56,7 +59,7 @@
beforeMount () { beforeMount () {
// Check if the user is already logged in, if so, redirect him to the homepage // Check if the user is already logged in, if so, redirect him to the homepage
if (auth.user.authenticated) { if (auth.user.authenticated) {
router.push({ name: 'home' }) router.push({name: 'home'})
} }
}, },
@ -76,21 +79,26 @@
</script> </script>
<style scoped> <style scoped>
body {
background-color: #efefef;
margin-top: -1em;
}
body > .grid {
height: 100%;
}
.image { .image {
margin-top: -100px; margin-top: -100px;
} }
.column { .column {
max-width: 450px; max-width: 450px;
} }
.error.message{ .error.message {
display: block; display: block;
} }
.login-wrapper {
background: url("../../static/bg.jpg") no-repeat center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding-top: 5em;
}
</style> </style>

BIN
frontend/static/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB