Mercurial > gemma
annotate src/views/Login.vue @ 11:e0b5dd98665e vue-cli
current frontend with asset server configured
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 20 Jun 2018 14:43:48 +0200 |
parents | 361ae8211991 |
children |
rev | line source |
---|---|
3 | 1 <template> |
2 <div class="login"> | |
3 <div> | |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
4 <div class="logo d-flex flex-row justify-content-center"> |
3 | 5 <div><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 | 7 </div> |
8 </div> | |
9 <div class="login-wrapper border border-light 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"> |
6 | 11 <div v-if="loginFailed" class="alert alert-danger" role="alert"> |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
12 <span class="loginerror">{{ loginAttemptFailed }}</span> |
6 | 13 </div> |
11
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
14 <div class="input-group mb-3"> |
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> |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
20 <div class="input-group mb-3"> |
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> |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
29 <button class="btn btn-lg btn-success 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> |
3 | 31 </form> |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
32 <div class="secondary-logo"><img :src="secondaryLogo"></div> |
3 | 33 </div> |
34 </div> | |
35 </template> | |
36 | |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
37 <style lang="scss"> |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
38 $offset: 20px; |
11
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
39 $iconsize: 3em; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
40 $iconLineHeight: 0.25em; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
41 $iconwidth: 20px; |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
42 |
11
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
43 .forgottenlink { |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
44 text-align: right; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
45 } |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
46 #inputPassword { |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
47 border-right: none; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
48 } |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
49 .input-group-text { |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
50 background-color: white !important; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
51 } |
3 | 52 .login { |
53 margin-top: 200px; | |
54 } | |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
55 .loginerror { |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
56 white-space: pre; |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
57 } |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
58 .loginform { |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
59 width: 300px; |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
60 } |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
61 .logo { |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
62 position: relative; |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
63 left: -85px; |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
64 margin-bottom: $offset; |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
65 } |
11
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
66 .mail-icon { |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
67 line-height: $iconLineHeight; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
68 font-size: $iconsize; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
69 width: $iconwidth; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
70 } |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
71 .password-icon { |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
72 position: relative; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
73 top: 10px; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
74 font-size: $iconsize; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
75 line-height: $iconLineHeight; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
76 width: $iconwidth; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
77 } |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
78 .secondary-logo { |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
79 position: relative; |
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
80 top: -$offset; |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
81 margin-left: $offset; |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
82 } |
11
e0b5dd98665e
current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents:
10
diff
changeset
|
83 .title { |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
84 margin-left: $offset; |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
85 } |
3 | 86 </style> |
87 | |
88 <script> | |
89 import { mapGetters } from "vuex"; | |
90 | |
91 export default { | |
92 name: "login", | |
93 data() { | |
94 return { | |
95 username: "", | |
6 | 96 password: "", |
10
361ae8211991
refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents:
9
diff
changeset
|
97 submitted: false, |
361ae8211991
refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents:
9
diff
changeset
|
98 loginFailed: false |
3 | 99 }; |
100 }, | |
101 computed: { | |
10
361ae8211991
refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents:
9
diff
changeset
|
102 ...mapGetters("application", ["appTitle", "secondaryLogo"]), |
3 | 103 ...mapGetters("i18n", [ |
104 "signinHeader", | |
105 "emailLabel", | |
106 "passwordLabel", | |
6 | 107 "loginButtonLabel", |
9
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
108 "loginAttemptFailed", |
ee6d3836014e
current version of login
Thomas Junk <thomas.junk@intevation.de>
parents:
6
diff
changeset
|
109 "passPhraseForgotten" |
3 | 110 ]) |
111 }, | |
112 methods: { | |
113 login() { | |
6 | 114 this.submitted = true; |
3 | 115 const { username, password } = this; |
6 | 116 this.$store |
117 .dispatch("user/login", { username, password }) | |
118 .then(() => { | |
10
361ae8211991
refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents:
9
diff
changeset
|
119 this.loginFailed = false; |
6 | 120 this.$router.push("/"); |
121 }) | |
122 .catch(() => { | |
10
361ae8211991
refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents:
9
diff
changeset
|
123 this.loginFailed = true; |
6 | 124 this.submitted = false; |
125 }); | |
3 | 126 } |
127 } | |
128 }; | |
129 </script> |