Skip to content

Commit 4ed561e

Browse files
jamesjieyejamesjieye
committed
implement UI of register page
1 parent a5b351c commit 4ed561e

File tree

11 files changed

+150
-1
lines changed

11 files changed

+150
-1
lines changed

‎front-end/package-lock.json

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎front-end/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
"test": "npm run test:unit && npm run test:e2e"
1212
},
1313
"dependencies": {
14+
"bootstrap": "^4.1.3",
15+
"jquery": "^3.3.1",
16+
"popper.js": "^1.14.4",
1417
"vue": "^2.5.17",
1518
"vue-router": "^3.0.1",
1619
"vuex": "^3.0.1"

‎front-end/public/static/images/logo.png

4.17 KB
Loading

‎front-end/src/App.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,8 @@ export default {
1010
}
1111
</script>
1212

13-
<style>
13+
<style lang="scss">
14+
html {
15+
font-size: 14px;
16+
}
1417
</style>

‎front-end/src/assets/.gitkeep

Whitespace-only changes.

‎front-end/src/assets/logo.png

-6.69 KB
Binary file not shown.

‎front-end/src/router.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
33
import LoginPage from '@/views/LoginPage'
4+
import RegisterPage from '@/views/RegisterPage'
45

56
Vue.use(Router)
67

@@ -11,5 +12,9 @@ export default new Router({
1112
path: '/login',
1213
name: 'LoginPage',
1314
component: LoginPage
15+
}, {
16+
path: '/register',
17+
name: 'RegisterPage',
18+
component: RegisterPage
1419
}]
1520
})

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div class="container">
3+
<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>
9+
<form>
10+
<div class="form-group">
11+
<label for="username">Username</label>
12+
<input type="text" class="form-control" id="username">
13+
</div>
14+
<div class="form-group">
15+
<label for="emailAddress">Email address</label>
16+
<input type="email" class="form-control" id="emailAddress">
17+
</div>
18+
<div class="form-group">
19+
<label for="password">Password</label>
20+
<input type="password" class="form-control" id="password">
21+
</div>
22+
<button type="submit" class="btn btn-primary btn-block">Create account</button>
23+
<p class="accept-terms text-muted">By clicking “Create account”, you agree to our <a href="#">terms of service</a> and <a href="#">privacy policy</a>.</p>
24+
<p class="text-center text-muted">Already have an account? <a href="/login">Sign in</a></p>
25+
</form>
26+
</div>
27+
</div>
28+
<footer class="footer">
29+
<span class="copyright">&copy; 2018 TaskAgile.com</span>
30+
<ul class="footer-links list-inline float-right">
31+
<li class="list-inline-item"><a href="#">About</a></li>
32+
<li class="list-inline-item"><a href="#">Terms of Service</a></li>
33+
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
34+
<li class="list-inline-item"><a href="https://github.com/taskagile/vuejs.spring-boot.mysql" target="_blank">GitHub</a></li>
35+
</ul>
36+
</footer>
37+
</div>
38+
</template>
39+
40+
<script>
41+
export default {
42+
name: "RegisterPage"
43+
}
44+
</script>
45+
46+
<style lang="scss" scoped>
47+
.container {
48+
max-width: 900px;
49+
}
50+
51+
.register-form {
52+
margin-top: 50px;
53+
max-width: 320px;
54+
}
55+
56+
.logo-wrapper {
57+
text-align: center;
58+
margin-bottom: 40px;
59+
60+
.tagline {
61+
line-height: 180%;
62+
color: #666;
63+
}
64+
.logo {
65+
max-width: 150px;
66+
margin: 0 auto;
67+
}
68+
}
69+
70+
.register-form {
71+
.form-group label {
72+
font-weight: bold;
73+
color: #555;
74+
}
75+
76+
.accept-terms {
77+
margin: 20px 0 40px 0;
78+
}
79+
}
80+
81+
.footer {
82+
width: 100%;
83+
font-size: 13px;
84+
color: #666;
85+
line-height: 40px;
86+
border-top: 1px solid #ddd;
87+
margin-top: 50px;
88+
89+
.list-inline-item {
90+
margin-right: 10px;
91+
}
92+
93+
a {
94+
color: #666;
95+
}
96+
}
97+
</style>

‎front-end/tests/unit/RegisterPage.spec.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Vue from 'vue'
2+
import RegisterPage from '@/views/RegisterPage'
3+
4+
describe('RegisterPage.vue', () => {
5+
it('should render correct contents', () => {
6+
const Constructor = Vue.extend(RegisterPage)
7+
const vm = new Constructor().$mount()
8+
expect(vm.$el.querySelector('.logo').getAttribute('src'))
9+
.toEqual('/static/images/logo.png')
10+
expect(vm.$el.querySelector('.tagline').textContent)
11+
.toEqual('Open source task management tool')
12+
expect(vm.$el.querySelector('#username').value).toEqual('')
13+
expect(vm.$el.querySelector('#emailAddress').value).toEqual('')
14+
expect(vm.$el.querySelector('#password').value).toEqual('')
15+
expect(vm.$el.querySelector('form button[type="submit"]').textContent)
16+
.toEqual('Create account')
17+
})
18+
})

‎front-end/vue.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,13 @@ module.exports = {
66
target: 'http://localhost:8080'
77
}
88
}
9+
},
10+
configureWebpack: {
11+
entry: {
12+
app: './src/main.js',
13+
style: [
14+
'bootstrap/dist/css/bootstrap.min.css'
15+
]
16+
}
917
}
1018
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy