Movatterモバイル変換

[0]ホーム
URL:

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

Commitf291774

Browse files
committed
Added login view. Moved login to login view instead of navbar. History of created pipelines is still wip
1 parentc2771bd commitf291774

File tree

13 files changed

+223
-255
lines changed

13 files changed

+223
-255
lines changed

‎frontend/client/App.vue‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
11
<template>
22
<divid="app">
3-
<nprogress-container></nprogress-container>
4-
<navbar:show="true"></navbar>
5-
<sidebar:show="sidebar.opened && !sidebar.hidden"></sidebar>
6-
<app-main></app-main>
3+
<divv-if="session">
4+
<nprogress-container></nprogress-container>
5+
<navbar:show="true"></navbar>
6+
<sidebar:show="sidebar.opened && !sidebar.hidden"></sidebar>
7+
<app-main></app-main>
8+
</div>
9+
<divv-if="!session">
10+
<nprogress-container></nprogress-container>
11+
<login></login>
12+
</div>
713
</div>
814
</template>
915

1016
<script>
1117
importNprogressContainerfrom'vue-nprogress/src/NprogressContainer'
12-
import {Navbar,Sidebar,AppMain }from'components/layout/'
18+
import {Navbar,Sidebar,Login,AppMain }from'components/layout/'
1319
import {mapGetters,mapActions }from'vuex'
20+
importauthfrom'./auth'
21+
importmomentfrom'moment'
1422
1523
exportdefault {
1624
components: {
1725
Navbar,
1826
Sidebar,
27+
Login,
1928
AppMain,
2029
NprogressContainer
2130
},
@@ -41,14 +50,38 @@ export default {
4150
window.addEventListener('resize', handler)
4251
},
4352
53+
mounted () {
54+
this.checkAuth()
55+
},
56+
57+
watch: {
58+
'$route':'checkAuth'
59+
},
60+
4461
computed:mapGetters({
45-
sidebar:'sidebar'
62+
sidebar:'sidebar',
63+
session:'session'
4664
}),
4765
48-
methods:mapActions([
49-
'toggleDevice',
50-
'toggleSidebar'
51-
])
66+
methods: {
67+
68+
checkAuth () {
69+
let session=auth.getSession()
70+
if (session) {
71+
// check if jwt has been expired
72+
if (moment().isAfter(moment.unix(session['jwtexpiry']))) {
73+
auth.logout(this)
74+
}else {
75+
this.$store.commit('setSession', session)
76+
}
77+
}
78+
},
79+
80+
...mapActions([
81+
'toggleDevice',
82+
'toggleSidebar'
83+
])
84+
}
5285
}
5386
</script>
5487

‎frontend/client/app.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,14 @@ import store from './store'
88
import*asfiltersfrom'./filters'
99
import{TOGGLE_SIDEBAR}from'vuex-store/mutation-types'
1010
importauthfrom'./auth'
11+
importlodashfrom'lodash'
12+
importVueLodashfrom'vue-lodash'
1113

1214
Vue.prototype.$http=axios
1315
Vue.axios=axios
1416
Vue.router=router
1517
Vue.use(NProgress)
18+
Vue.use(VueLodash,lodash)
1619

1720
// Auth interceptors
1821
axios.interceptors.request.use(function(request){

‎frontend/client/auth/index.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
exportdefault{
22

33
login(context,creds){
4-
context.$http.post('/api/v1/users/login',creds)
4+
returncontext.$http.post('/api/v1/users/login',creds)
55
.then((response)=>{
66
varnewSession={
77
'token':response.data.tokenstring,
@@ -10,9 +10,14 @@ export default {
1010
}
1111
window.localStorage.setItem('session',JSON.stringify(newSession))
1212
context.$store.commit('setSession',newSession)
13+
14+
// set success to true
15+
returntrue
1316
})
1417
.catch((error)=>{
15-
console.log(error)
18+
if(error){
19+
returnfalse
20+
}
1621
})
1722
},
1823

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<divclass="content has-text-centered login-box-outter">
3+
<divclass="login-box-middle">
4+
<divclass="box login-box-inner">
5+
<h1class="title header-text">Gaia</h1>
6+
<divclass="block login-box-content">
7+
<divclass="login-box-content">
8+
<pclass="control has-icons-left">
9+
<inputclass="input is-large input-bar"v-focustype="text"v-model="username"@keyup.enter="login"placeholder="Username">
10+
<spanclass="icon is-small is-left">
11+
<iclass="fa fa-user-circle"></i>
12+
</span>
13+
</p>
14+
</div>
15+
<divclass="login-box-content">
16+
<pclass="control has-icons-left">
17+
<inputclass="input is-large input-bar"type="password"@keyup.enter="login"v-model="password"placeholder="Password">
18+
<spanclass="icon is-small is-left">
19+
<iclass="fa fa-lock"></i>
20+
</span>
21+
</p>
22+
</div>
23+
<divclass="login-box-content">
24+
<buttonclass="button is-primary login-button"@click="login">Sign In</button>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script>
33+
importVuefrom'vue'
34+
importNotificationfrom'vue-bulma-notification-fixed'
35+
importauthfrom'../../auth'
36+
37+
constNotificationComponent=Vue.extend(Notification)
38+
constopenNotification= (propsData= {
39+
title:'',
40+
message:'',
41+
type:'',
42+
direction:'',
43+
duration:4500,
44+
container:'.notifications'
45+
})=> {
46+
returnnewNotificationComponent({
47+
el:document.createElement('div'),
48+
propsData
49+
})
50+
}
51+
52+
exportdefault {
53+
54+
data () {
55+
return {
56+
username:'',
57+
password:''
58+
}
59+
},
60+
61+
methods: {
62+
login () {
63+
var credentials= {
64+
username:this.username,
65+
password:this.password
66+
}
67+
68+
// Authenticate
69+
auth.login(this, credentials)
70+
.then((response)=> {
71+
if (!response) {
72+
openNotification({
73+
title:'Invalid credentials!',
74+
message:'Wrong username and/or password.',
75+
type:'danger'
76+
})
77+
}
78+
})
79+
}
80+
}
81+
}
82+
</script>
83+
84+
<style lang="scss" scoped>
85+
.login-box-outter {
86+
display:table;
87+
position:absolute;
88+
height:100%;
89+
width:100%;
90+
}
91+
92+
.login-box-middle {
93+
display:table-cell;
94+
vertical-align:middle;
95+
}
96+
97+
.login-box-inner {
98+
text-align:center;
99+
background-color:#3f3d49;
100+
width:40%;
101+
margin-left:auto;
102+
margin-right:auto;
103+
}
104+
105+
.login-box-content {
106+
margin:auto;
107+
padding:10px;
108+
}
109+
110+
.login-button {
111+
width:150px;
112+
height:50px;
113+
}
114+
115+
.header-text {
116+
color:#4da2fc;
117+
padding-bottom:15px;
118+
font-size:4rem;
119+
}
120+
</style>

‎frontend/client/components/layout/Navbar.vue‎

Lines changed: 3 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -38,57 +38,23 @@
3838
</div>
3939
</nav>
4040
</div>
41-
42-
<!-- Login modal-->
43-
<modal:visible="loginModal"class="modal-z-index"@close="close">
44-
<divclass="box login-modal">
45-
<h1class="title header-text"style="padding-bottom:20px;">Sign In</h1>
46-
<divclass="block login-modal-content">
47-
<divclass="login-modal-content">
48-
<pclass="control has-icons-left">
49-
<inputclass="input is-large input-bar"v-focustype="text"v-model="username"@keyup.enter="login"placeholder="Username">
50-
<spanclass="icon is-small is-left">
51-
<iclass="fa fa-user-circle"></i>
52-
</span>
53-
</p>
54-
</div>
55-
<divclass="login-modal-content">
56-
<pclass="control has-icons-left">
57-
<inputclass="input is-large input-bar"type="password"@keyup.enter="login"v-model="password"placeholder="Password">
58-
<spanclass="icon is-small is-left">
59-
<iclass="fa fa-lock"></i>
60-
</span>
61-
</p>
62-
</div>
63-
<divclass="login-modal-content">
64-
<buttonclass="button is-primary login-button"@click="login">Sign In</button>
65-
</div>
66-
</div>
67-
</div>
68-
</modal>
6941
</section>
7042
</template>
7143

7244
<script>
7345
import {mapGetters,mapActions }from'vuex'
74-
import {Modal }from'vue-bulma-modal'
7546
importauthfrom'../../auth'
7647
importjdenticonfrom'jdenticon'
77-
importmomentfrom'moment'
7848
7949
exportdefault {
8050
8151
data () {
8252
return {
83-
loginModal:false,
84-
username:'',
85-
password:'',
8653
search:''
8754
}
8855
},
8956
9057
components: {
91-
Modal,
9258
jdenticon
9359
},
9460
@@ -103,39 +69,19 @@ export default {
10369
}),
10470
10571
mounted () {
106-
this.fetchData()
72+
this.reload()
10773
},
10874
10975
watch: {
110-
'$route':'fetchData'
76+
'$route':'reload'
11177
},
11278
11379
methods: {
114-
fetchData () {
115-
let session=auth.getSession()
116-
if (session) {
117-
// check if jwt has been expired
118-
if (moment().isAfter(moment.unix(session['jwtexpiry']))) {
119-
auth.logout(this)
120-
}else {
121-
this.$store.commit('setSession', session)
122-
}
123-
}
124-
80+
reload () {
12581
// Update jdenticon to prevent rendering issues
12682
jdenticon()
12783
},
12884
129-
login () {
130-
var credentials= {
131-
username:this.username,
132-
password:this.password
133-
}
134-
135-
auth.login(this, credentials)
136-
this.close()
137-
},
138-
13985
logout () {
14086
auth.logout(this)
14187
},
@@ -144,18 +90,6 @@ export default {
14490
this.$router.push('/pipelines/create')
14591
},
14692
147-
showLoginModal () {
148-
this.loginModal=true
149-
},
150-
151-
close () {
152-
this.loginModal=false
153-
this.$emit('close')
154-
155-
// Update jdenticon to prevent rendering issues
156-
jdenticon()
157-
},
158-
15993
...mapActions([
16094
'toggleSidebar'
16195
])
@@ -197,21 +131,6 @@ export default {
197131
padding-right:30px;
198132
}
199133
200-
.login-modal {
201-
text-align:center;
202-
background-color:#2a2735;
203-
}
204-
205-
.login-modal-content {
206-
margin:auto;
207-
padding:10px;
208-
}
209-
210-
.login-button {
211-
width:150px;
212-
height:50px;
213-
}
214-
215134
.navbar-start {
216135
padding-left:240px;
217136
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp