Mercurial > gemma

annotate client/src/views/Login.vue @ 19:c7fe6244528c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Refactoring local SCSS to a application wide accessible SCSS Having an application wide accessible scss increases reuse.
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 21 Jun 2018 12:11:00 +0200
parents 7d242100af46
children d53de4169d11
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>
17
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
2 <div class="login border border-dark 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>
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
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
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
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 {
17
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
52 margin-left: auto;
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
53 margin-right: auto;
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 margin-top: 200px;
17
7d242100af46 Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents: 13
diff changeset
55 width: 600px;
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 }
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
57 .loginerror {
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
58 white-space: pre;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
59 }
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
60 .loginform {
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
61 width: 300px;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
62 }
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
63 .logo {
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
64 position: relative;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
65 left: -85px;
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 line-height: $iconLineHeight;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
71 font-size: $iconsize;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
72 width: $iconwidth;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
73 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
74 .password-icon {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
75 position: relative;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
76 top: 10px;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
77 font-size: $iconsize;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
78 line-height: $iconLineHeight;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
79 width: $iconwidth;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
80 }
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
81 .secondary-logo {
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
82 position: relative;
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
83 top: -$offset;
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 }
11
e0b5dd98665e current frontend with asset server configured
Thomas Junk <thomas.junk@intevation.de>
parents: 10
diff changeset
86 .title {
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
87 margin-left: $offset;
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
88 }
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 </style>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 <script>
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
92 import { mapGetters } from "vuex";
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
93
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
94 export default {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 name: "login",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 data() {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 return {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 username: "",
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
99 password: "",
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
100 submitted: false,
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
101 loginFailed: false
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 };
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 },
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104 computed: {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
105 ...mapGetters("application", ["appTitle", "secondaryLogo"]),
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 ...mapGetters("i18n", [
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 "signinHeader",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 "emailLabel",
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 "passwordLabel",
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
110 "loginButtonLabel",
9
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
111 "loginAttemptFailed",
ee6d3836014e current version of login
Thomas Junk <thomas.junk@intevation.de>
parents: 6
diff changeset
112 "passPhraseForgotten"
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
113 ])
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
114 },
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
115 methods: {
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116 login() {
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
117 this.submitted = true;
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
118 const { username, password } = this;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
119 this.$store
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
120 .dispatch("user/login", { username, password })
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
121 .then(() => {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
122 this.loginFailed = false;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
123 this.$router.push("/");
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
124 })
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
125 .catch(() => {
10
361ae8211991 refactored to component local state
Thomas Junk <thomas.junk@intevation.de>
parents: 9
diff changeset
126 this.loginFailed = true;
6
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
127 this.submitted = false;
7c1bde663c8e current frontend
Thomas Junk <thomas.junk@intevation.de>
parents: 3
diff changeset
128 });
3
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
129 }
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
130 }
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
131 };
1597506a2241 merge with vue-cli
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
132 </script>