Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit eafc6fb

Browse files
implement login page front-end
1 parent dcec528 commit eafc6fb

File tree

12 files changed

+392
-82
lines changed

12 files changed

+392
-82
lines changed

‎front-end/src/App.vue

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,31 @@ export default {
1414
html {
1515
font-size: 14px;
1616
}
17-
.form-group {
18-
.error {
19-
line-height: 1;
20-
display: none;
21-
margin-top: 5px;
17+
18+
.public.container {
19+
max-width: 900px;
20+
}
21+
22+
.public {
23+
.form {
24+
margin-top: 50px;
25+
width: 320px;
26+
27+
.form-group {
28+
label {
29+
font-weight: bold;
30+
color: #555;
31+
}
32+
33+
.error {
34+
line-height: 1;
35+
display: none;
36+
margin-top: 5px;
37+
}
38+
}
2239
}
2340
}
41+
2442
.field-error {
2543
.error {
2644
display: block;

‎front-end/src/components/.gitkeep

Whitespace-only changes.

‎front-end/src/components/Logo.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="logo-wrapper">
3+
<img class="logo" src="/static/images/logo.png">
4+
<div class="tagline">Open source task management tool</div>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'Logo'
11+
}
12+
</script>
13+
14+
<style lang="scss" scoped>
15+
.logo-wrapper {
16+
text-align: center;
17+
margin-bottom: 40px;
18+
19+
.tagline {
20+
line-height: 180%;
21+
color: #666;
22+
}
23+
24+
.logo {
25+
max-width: 150px;
26+
margin: 0 auto;
27+
}
28+
}
29+
</style>

‎front-end/src/components/PageFooter.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<footer class="footer">
3+
<span class="copyright">&copy; 2018 TaskAgile.com</span>
4+
<ul class="footer-links list-inline float-right">
5+
<li class="list-inline-item"><a href="#">About</a></li>
6+
<li class="list-inline-item"><a href="#">Terms of Service</a></li>
7+
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
8+
<li class="list-inline-item"><a href="https://github.com/taskagile/vuejs.spring-boot.mysql" target="_blank">GitHub</a></li>
9+
</ul>
10+
</footer>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'PageFooter'
16+
}
17+
</script>
18+
19+
<style lang="scss" scoped>
20+
.footer {
21+
width: 100%;
22+
font-size: 13px;
23+
color: #666;
24+
line-height: 40px;
25+
border-top: 1px solid #ddd;
26+
margin-top: 50px;
27+
28+
.list-inline-item {
29+
margin-right: 10px;
30+
}
31+
32+
a {
33+
color: #666;
34+
}
35+
}
36+
</style>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
authenticate (detail) {
3+
return new Promise((resolve, reject) => {
4+
(detail.username === 'sunny' || detail.username === 'sunny@taskagile.com') &&
5+
detail.password === 'JestRocks!'
6+
? resolve({result: 'success'})
7+
: reject(new Error('Invalid credentials'))
8+
})
9+
}
10+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import axios from 'axios'
2+
3+
export default {
4+
/**
5+
* Authenticate a login request
6+
* @param {Object} detail login detail
7+
*/
8+
authenticate (detail) {
9+
return new Promise((resolve, reject) => {
10+
axios.post('/authentications', detail).then(({data}) => {
11+
resolve(data)
12+
}).catch((error) => {
13+
reject(error)
14+
})
15+
})
16+
}
17+
}

‎front-end/src/views/HomePage.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div>Home Page</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'HomePage'
8+
}
9+
</script>

‎front-end/src/views/LoginPage.vue

Lines changed: 79 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,87 @@
11
<template>
2-
<div>
3-
<h1>TaskAgile</h1>
2+
<div class="container public">
3+
<div class="row justify-content-center">
4+
<div class="form">
5+
<Logo/>
6+
<form @submit.prevent="submitForm">
7+
<div v-show="errorMessage" class="alert alert-danger failed">{{ errorMessage }}</div>
8+
<div class="form-group">
9+
<label for="username">Username or email address</label>
10+
<input type="text" class="form-control" id="username" v-model="form.username">
11+
<div class="field-error" v-if="$v.form.username.$dirty">
12+
<div class="error" v-if="!$v.form.username.required">Username or email address is required</div>
13+
</div>
14+
</div>
15+
<div class="form-group">
16+
<label for="password">Password</label>
17+
<input type="password" class="form-control" id="password" v-model="form.password">
18+
<div class="field-error" v-if="$v.form.password.$dirty">
19+
<div class="error" v-if="!$v.form.password.required">Password is required</div>
20+
</div>
21+
</div>
22+
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
23+
<div class="links">
24+
<p class="sign-up text-muted">Don't have an account yet? <a href="/register" class="link-sign-up">Sign up here</a></p>
25+
<p><a href="#">Forgot your password?</a></p>
26+
</div>
27+
</form>
28+
</div>
29+
</div>
30+
<PageFooter/>
431
</div>
532
</template>
633

734
<script>
35+
import { required } from 'vuelidate/lib/validators'
36+
import authenticationService from '@/services/authentication'
37+
import Logo from '@/components/Logo.vue'
38+
import PageFooter from '@/components/PageFooter.vue'
39+
840
export default {
9-
name: 'LoginPage'
41+
name: 'LoginPage',
42+
data: function () {
43+
return {
44+
form: {
45+
username: '',
46+
password: ''
47+
},
48+
errorMessage: ''
49+
}
50+
},
51+
components: {
52+
Logo,
53+
PageFooter
54+
},
55+
validations: {
56+
form: {
57+
username: {
58+
required
59+
},
60+
password: {
61+
required
62+
}
63+
}
64+
},
65+
methods: {
66+
submitForm () {
67+
this.$v.$touch()
68+
if (this.$v.$invalid) {
69+
return
70+
}
71+
72+
authenticationService.authenticate(this.form).then(() => {
73+
this.$router.push({name: 'HomePage'})
74+
}).catch((error) => {
75+
this.errorMessage = error.message
76+
})
77+
}
78+
}
1079
}
1180
</script>
81+
82+
<style lang="scss" scoped>
83+
.links {
84+
margin: 30px 0 50px 0;
85+
text-align: center;
86+
}
87+
</style>

‎front-end/src/views/RegisterPage.vue

Lines changed: 12 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
<template>
2-
<div class="container">
2+
<div class="container public">
33
<div class="row justify-content-center">
4-
<div class="register-form">
5-
<div class="logo-wrapper">
6-
<img class="logo" src="/static/images/logo.png">
7-
<div class="tagline">Open source task management tool</div>
8-
</div>
4+
<div class="form">
5+
<Logo/>
96
<form @submit.prevent="submitForm">
107
<div v-show="errorMessage" class="alert alert-danger failed">{{ errorMessage }}</div>
118
<div class="form-group">
@@ -42,21 +39,15 @@
4239
</form>
4340
</div>
4441
</div>
45-
<footer class="footer">
46-
<span class="copyright">&copy; 2018 TaskAgile.com</span>
47-
<ul class="footer-links list-inline float-right">
48-
<li class="list-inline-item"><a href="#">About</a></li>
49-
<li class="list-inline-item"><a href="#">Terms of Service</a></li>
50-
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
51-
<li class="list-inline-item"><a href="https://github.com/taskagile/vuejs.spring-boot.mysql" target="_blank">GitHub</a></li>
52-
</ul>
53-
</footer>
42+
<PageFooter/>
5443
</div>
5544
</template>
5645

5746
<script>
5847
import { required, email, minLength, maxLength, alphaNum } from 'vuelidate/lib/validators'
5948
import registrationService from '@/services/registration'
49+
import Logo from '@/components/Logo.vue'
50+
import PageFooter from '@/components/PageFooter.vue'
6051
6152
export default {
6253
name: 'RegisterPage',
@@ -70,6 +61,10 @@ export default {
7061
errorMessage: ''
7162
}
7263
},
64+
components: {
65+
Logo,
66+
PageFooter
67+
},
7368
validations: {
7469
form: {
7570
username: {
@@ -108,57 +103,7 @@ export default {
108103
</script>
109104

110105
<style lang="scss" scoped>
111-
.container {
112-
max-width: 900px;
113-
}
114-
115-
.register-form {
116-
margin-top: 50px;
117-
max-width: 320px;
118-
}
119-
120-
.logo-wrapper {
121-
text-align: center;
122-
margin-bottom: 40px;
123-
124-
.tagline {
125-
line-height: 180%;
126-
color: #666;
127-
}
128-
129-
.logo {
130-
max-width: 150px;
131-
margin: 0 auto;
132-
}
133-
}
134-
135-
.register-form {
136-
137-
.form-group label {
138-
font-weight: bold;
139-
color: #555;
140-
}
141-
142-
.accept-terms {
143-
margin: 20px 0 40px 0;
144-
}
106+
.accept-terms {
107+
margin: 20px 0 40px 0;
145108
}
146-
147-
.footer {
148-
width: 100%;
149-
font-size: 13px;
150-
color: #666;
151-
line-height: 40px;
152-
border-top: 1px solid #ddd;
153-
margin-top: 50px;
154-
155-
.list-inline-item {
156-
margin-right: 10px;
157-
}
158-
159-
a {
160-
color: #666;
161-
}
162-
}
163-
164109
</style>

‎front-end/tests/e2e/specs/login.e2e.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module.exports = {
33
browser
44
.url(process.env.VUE_DEV_SERVER_URL + 'login')
55
.waitForElementVisible('#app', 5000)
6-
.assert.containsText('h1', 'TaskAgile')
6+
.assert.attributeContains('.logo', 'src','/static/images/logo.png')
77
.end()
88
}
99
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /