Mercurial > gemma

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
32
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
2 <div :class="loginStyle">
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 <div>
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
4 <div class="logogroup d-flex flex-row justify-content-center">
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
5 <div class="logo"><img src="../assets/logo.png"></div>
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
6 <div class="title"><h1>{{ appTitle }}</h1></div>
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7 </div>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 </div>
17
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
9 <div class="login-wrapper d-flex flex-row justify-content-center">
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
10 <form class="loginform form-signin" @submit.prevent="login">
32
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
11 <div v-if="loginFailed" class="loginerrormessage alert alert-danger" role="alert">
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
12 <span class="loginerror">{{ loginAttemptFailed }}</span>
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
13 </div>
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
14 <div class="input-group mb-3 emailgroup">
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
15 <div class="input-group-prepend">
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
16 <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
17 </div>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
18 <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
19 </div>
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
20 <div class="input-group mb-3 passwordgroup">
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
21 <div class="input-group-prepend">
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
22 <span class="input-group-text"><span class="password-icon">*</span></span>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
23 </div>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
24 <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
25 <div class="input-group-append">
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
26 <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
27 </div>
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
28 </div>
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
29 <button class="submitbutton btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
30 <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div>
24
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
31 <div class="secondary-logo"><img :src="secondaryLogo"></div>
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 </form>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 </div>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 </div>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 </template>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
36
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
37 <style lang="scss">
19
c7fe6244528c Refactoring local SCSS to a application wide accessible SCSS
Thomas Junk <thomas.junk@intevation.de>
parents: 17
diff changeset
38 @import "../assets/application.scss";
32
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
39 $collapsedheight: 470px;
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
40 $fullheight: 550px;
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
41
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
42 .emailgroup {
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
43 box-shadow: $basic-shadow-light !important;
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
44 }
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
45 .forgottenlink {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
46 text-align: right;
17
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
47 margin-top: $small-offset;
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
48 margin-bottom: $small-offset;
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
49 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
50 #inputPassword {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
51 border-right: none;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
52 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
53 .input-group-text {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
54 background-color: white !important;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
55 }
32
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
56
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 .login {
24
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
58 width: 375px;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
59 @extend %fully-centered;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
60 padding-top: $offset;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
61 padding-bottom: $offset;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
62 box-shadow: $basic-shadow;
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 }
32
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
64 .logincollapsed {
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
65 height: $collapsedheight;
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
66 }
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
67
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
68 .loginfull {
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
69 height: $fullheight;
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
70 }
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
71 .loginerror {
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
72 white-space: pre;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
73 }
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
74 .loginerrormessage {
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
75 box-shadow: $basic-shadow-light !important;
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
76 }
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
77 .loginform {
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
78 width: 300px;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
79 }
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
80 .logogroup {
17
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
81 margin-top: $offset;
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
82 margin-bottom: $offset;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
83 }
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
84 .mail-icon {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
85 width: $iconwidth;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
86 }
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
87 .passwordgroup {
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
88 box-shadow: $basic-shadow-light !important;
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
89 }
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
90 .password-icon {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
91 position: relative;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
92 top: 10px;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
93 font-size: $iconsize;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
94 line-height: $iconLineHeight;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
95 width: $iconwidth;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
96 }
25
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
97 .submitbutton {
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
98 box-shadow: $basic-shadow-light !important;
a728610b3812 Add Light visual hints
Thomas Junk <thomas.junk@intevation.de>
parents: 24
diff changeset
99 }
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
100 .title {
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
101 margin-left: $offset;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
102 }
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 </style>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 <script>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 import { mapGetters } from "vuex";
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 export default {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 name: "login",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 data() {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 return {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
112 username: "",
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
113 password: "",
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
114 submitted: false,
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
115 loginFailed: false
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116 };
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
117 },
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
118 computed: {
32
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
119 loginStyle: function() {
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
120 return {
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
121 login: true,
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
122 logincollapsed: !this.loginFailed,
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
123 loginfull: this.loginFailed,
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
124 "bg-white": true,
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
125 rounded: true
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
126 };
0c19dcc352f9 Dynamic height of dialogbox
Thomas Junk <thomas.junk@intevation.de>
parents: 25
diff changeset
127 },
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
128 ...mapGetters("application", ["appTitle", "secondaryLogo"]),
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
129 ...mapGetters("i18n", [
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
130 "signinHeader",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
131 "emailLabel",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
132 "passwordLabel",
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
133 "loginButtonLabel",
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
134 "loginAttemptFailed",
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
135 "passPhraseForgotten"
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
136 ])
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
137 },
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
138 methods: {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
139 login() {
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
140 this.submitted = true;
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
141 const { username, password } = this;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
142 this.$store
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
143 .dispatch("user/login", { username, password })
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
144 .then(() => {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
145 this.loginFailed = false;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
146 this.$router.push("/");
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
147 })
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
148 .catch(() => {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
149 this.loginFailed = true;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
150 this.submitted = false;
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
151 });
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
152 }
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
153 }
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
154 };
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
155 </script>