Mercurial > gemma

comparison client/src/views/Login.vue @ 32:0c19dcc352f9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Dynamic height of dialogbox Depending on status (loginfailed) the height of the loginmask is now dynamic.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 26 Jun 2018 13:43:14 +0200
parents a728610b3812
children ae6535d44563
comparison
equal deleted inserted replaced
31:e5a067051716 32:0c19dcc352f9
1 <template> 1 <template>
2 <div class="login rounded bg-white"> 2 <div :class="loginStyle">
3 <div> 3 <div>
4 <div class="logogroup d-flex flex-row justify-content-center"> 4 <div class="logogroup d-flex flex-row justify-content-center">
5 <div class="logo"><img src="../assets/logo.png"></div> 5 <div class="logo"><img src="../assets/logo.png"></div>
6 <div class="title"><h1>{{ appTitle }}</h1></div> 6 <div class="title"><h1>{{ appTitle }}</h1></div>
7 </div> 7 </div>
8 </div> 8 </div>
9 <div class="login-wrapper d-flex flex-row justify-content-center"> 9 <div class="login-wrapper d-flex flex-row justify-content-center">
10 <form class="loginform form-signin" @submit.prevent="login"> 10 <form class="loginform form-signin" @submit.prevent="login">
11 <div v-if="loginFailed" class="loginerrormessage alert alert-danger" role="alert"> 11 <div v-if="loginFailed" class="loginerrormessage alert alert-danger" role="alert">
12 <span class="loginerror">{{ loginAttemptFailed }}</span> 12 <span class="loginerror">{{ loginAttemptFailed }}</span>
13 </div> 13 </div>
14 <div class="input-group mb-3 emailgroup"> 14 <div class="input-group mb-3 emailgroup">
15 <div class="input-group-prepend"> 15 <div class="input-group-prepend">
16 <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span> 16 <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span>
17 </div> 17 </div>
18 <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus> 18 <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
34 </div> 34 </div>
35 </template> 35 </template>
36 36
37 <style lang="scss"> 37 <style lang="scss">
38 @import "../assets/application.scss"; 38 @import "../assets/application.scss";
39 $collapsedheight: 470px;
40 $fullheight: 550px;
39 41
40 .emailgroup { 42 .emailgroup {
41 box-shadow: $basic-shadow-light !important; 43 box-shadow: $basic-shadow-light !important;
42 } 44 }
43 .forgottenlink { 45 .forgottenlink {
49 border-right: none; 51 border-right: none;
50 } 52 }
51 .input-group-text { 53 .input-group-text {
52 background-color: white !important; 54 background-color: white !important;
53 } 55 }
56
54 .login { 57 .login {
55 height: 550px;
56 width: 375px; 58 width: 375px;
57 @extend %fully-centered; 59 @extend %fully-centered;
58 padding-top: $offset; 60 padding-top: $offset;
59 padding-bottom: $offset; 61 padding-bottom: $offset;
60 box-shadow: $basic-shadow; 62 box-shadow: $basic-shadow;
63 }
64 .logincollapsed {
65 height: $collapsedheight;
66 }
67
68 .loginfull {
69 height: $fullheight;
61 } 70 }
62 .loginerror { 71 .loginerror {
63 white-space: pre; 72 white-space: pre;
64 } 73 }
65 .loginerrormessage { 74 .loginerrormessage {
105 submitted: false, 114 submitted: false,
106 loginFailed: false 115 loginFailed: false
107 }; 116 };
108 }, 117 },
109 computed: { 118 computed: {
119 loginStyle: function() {
120 return {
121 login: true,
122 logincollapsed: !this.loginFailed,
123 loginfull: this.loginFailed,
124 "bg-white": true,
125 rounded: true
126 };
127 },
110 ...mapGetters("application", ["appTitle", "secondaryLogo"]), 128 ...mapGetters("application", ["appTitle", "secondaryLogo"]),
111 ...mapGetters("i18n", [ 129 ...mapGetters("i18n", [
112 "signinHeader", 130 "signinHeader",
113 "emailLabel", 131 "emailLabel",
114 "passwordLabel", 132 "passwordLabel",