Mercurial > gemma

annotate client/src/views/Login.vue @ 24:10ebbf197523

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Rework layout of login page Modernize layout Place logo below login button Add shadows
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 21 Jun 2018 17:30:26 +0200
parents d53de4169d11
children a728610b3812
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>
24
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
2 <div class="login rounded bg-white">
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
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
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
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
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">
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
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
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
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>
24
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
29 <button class="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";
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
39
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
40 .forgottenlink {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
41 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
42 margin-top: $small-offset;
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
43 margin-bottom: $offset;
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
44 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
45 #inputPassword {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
46 border-right: none;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
47 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
48 .input-group-text {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
49 background-color: white !important;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
50 }
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 .login {
24
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
52 height: 480px;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
53 width: 375px;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
54 @extend %fully-centered;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
55 padding-top: $offset;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
56 padding-bottom: $offset;
10ebbf197523 Rework layout of login page
Thomas Junk <thomas.junk@intevation.de>
parents: 22
diff changeset
57 box-shadow: $basic-shadow;
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 }
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
59 .loginerror {
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
60 white-space: pre;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
61 }
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
62 .loginform {
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
63 width: 300px;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
64 }
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
65 .logo {
17
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
66 margin-top: $offset;
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
67 margin-bottom: $offset;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
68 }
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
69 .mail-icon {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
70 width: $iconwidth;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
71 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
72 .password-icon {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
73 position: relative;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
74 top: 10px;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
75 font-size: $iconsize;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
76 line-height: $iconLineHeight;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
77 width: $iconwidth;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
78 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
79 .title {
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
80 margin-left: $offset;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
81 }
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 </style>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 <script>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
85 import { mapGetters } from "vuex";
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 export default {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 name: "login",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 data() {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 return {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 username: "",
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
92 password: "",
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
93 submitted: false,
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
94 loginFailed: false
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 };
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 },
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 computed: {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
98 ...mapGetters("application", ["appTitle", "secondaryLogo"]),
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 ...mapGetters("i18n", [
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 "signinHeader",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 "emailLabel",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 "passwordLabel",
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
103 "loginButtonLabel",
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
104 "loginAttemptFailed",
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
105 "passPhraseForgotten"
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 ])
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 methods: {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 login() {
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
110 this.submitted = true;
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 const { username, password } = this;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
112 this.$store
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
113 .dispatch("user/login", { username, password })
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
114 .then(() => {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
115 this.loginFailed = false;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
116 this.$router.push("/");
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
117 })
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
118 .catch(() => {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
119 this.loginFailed = true;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
120 this.submitted = false;
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
121 });
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
122 }
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
123 }
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
124 };
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
125 </script>