Mercurial > gemma

comparison client/src/views/Login.vue @ 13:88d0d60924cf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Move vuejs app into subdir `client` Using a subdirectory for the web application keeps more structure in the repo.
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 20 Jun 2018 17:02:06 +0200
parents src/views/Login.vue@e0b5dd98665e
children 7d242100af46
comparison
equal deleted inserted replaced
12:000adddf74c8 13:88d0d60924cf
1 <template>
2 <div class="login">
3 <div>
4 <div class="logo d-flex flex-row justify-content-center">
5 <div><img src="../assets/logo.png"></div>
6 <div class="title"><h1>{{ appTitle }}</h1></div>
7 </div>
8 </div>
9 <div class="login-wrapper border border-light d-flex flex-row justify-content-center">
10 <form class="loginform form-signin" @submit.prevent="login">
11 <div v-if="loginFailed" class="alert alert-danger" role="alert">
12 <span class="loginerror">{{ loginAttemptFailed }}</span>
13 </div>
14 <div class="input-group mb-3">
15 <div class="input-group-prepend">
16 <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span>
17 </div>
18 <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
19 </div>
20 <div class="input-group mb-3">
21 <div class="input-group-prepend">
22 <span class="input-group-text"><span class="password-icon">*</span></span>
23 </div>
24 <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
25 <div class="input-group-append">
26 <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span>
27 </div>
28 </div>
29 <button class="btn btn-lg btn-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
30 <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div>
31 </form>
32 <div class="secondary-logo"><img :src="secondaryLogo"></div>
33 </div>
34 </div>
35 </template>
36
37 <style lang="scss">
38 $offset: 20px;
39 $iconsize: 3em;
40 $iconLineHeight: 0.25em;
41 $iconwidth: 20px;
42
43 .forgottenlink {
44 text-align: right;
45 }
46 #inputPassword {
47 border-right: none;
48 }
49 .input-group-text {
50 background-color: white !important;
51 }
52 .login {
53 margin-top: 200px;
54 }
55 .loginerror {
56 white-space: pre;
57 }
58 .loginform {
59 width: 300px;
60 }
61 .logo {
62 position: relative;
63 left: -85px;
64 margin-bottom: $offset;
65 }
66 .mail-icon {
67 line-height: $iconLineHeight;
68 font-size: $iconsize;
69 width: $iconwidth;
70 }
71 .password-icon {
72 position: relative;
73 top: 10px;
74 font-size: $iconsize;
75 line-height: $iconLineHeight;
76 width: $iconwidth;
77 }
78 .secondary-logo {
79 position: relative;
80 top: -$offset;
81 margin-left: $offset;
82 }
83 .title {
84 margin-left: $offset;
85 }
86 </style>
87
88 <script>
89 import { mapGetters } from "vuex";
90
91 export default {
92 name: "login",
93 data() {
94 return {
95 username: "",
96 password: "",
97 submitted: false,
98 loginFailed: false
99 };
100 },
101 computed: {
102 ...mapGetters("application", ["appTitle", "secondaryLogo"]),
103 ...mapGetters("i18n", [
104 "signinHeader",
105 "emailLabel",
106 "passwordLabel",
107 "loginButtonLabel",
108 "loginAttemptFailed",
109 "passPhraseForgotten"
110 ])
111 },
112 methods: {
113 login() {
114 this.submitted = true;
115 const { username, password } = this;
116 this.$store
117 .dispatch("user/login", { username, password })
118 .then(() => {
119 this.loginFailed = false;
120 this.$router.push("/");
121 })
122 .catch(() => {
123 this.loginFailed = true;
124 this.submitted = false;
125 });
126 }
127 }
128 };
129 </script>