Skip to content

Commit 96c0223

Browse files
committed
CREATE: LoginMenu
1 parent d595078 commit 96c0223

File tree

5 files changed

+94
-56
lines changed

5 files changed

+94
-56
lines changed

src/helpers/index.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,3 @@ export function getUserFromCookie(req) {
1616
return decodedToken
1717
}
1818
}
19-
20-
export function getUserFromSession(req) {
21-
return req.session ? req.session.userId : null
22-
}

src/layouts/protected.vue

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,9 @@ export default {
6666
},
6767
methods: {
6868
...mapActions('modules/user', ['logout']),
69-
async signout() {
70-
await this.logout()
69+
signout() {
70+
this.logout()
7171
this.$router.push('/')
72-
// this.logout().then(() => {
73-
// this.$router.push('/')
74-
// }).catch((error) => {
75-
// console.log(error.message)
76-
// })
7772
},
7873
},
7974
}

src/pages/account/login.vue

Lines changed: 74 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,69 @@
11
<template>
2-
<div>
3-
<v-container fluid fill-height>
4-
<v-layout align-center justify-center>
5-
<v-flex xs12 sm8 md4>
6-
<v-card>
7-
<v-toolbar>
8-
<v-toolbar-title>Login</v-toolbar-title>
9-
</v-toolbar>
10-
<v-card-text>
11-
<v-form>
12-
<v-text-field
13-
v-model="email"
14-
:counter="32"
15-
label="email"
16-
prepend-icon="mdi-email"
17-
/>
18-
<v-text-field
19-
v-model="password"
20-
:append-icon="
21-
show_password ? 'mdi-visibility' : 'mdi-visibility_off'
22-
"
23-
:type="show_password ? 'text' : 'password'"
24-
:counter="32"
25-
label="password"
26-
prepend-icon="mdi-lock"
27-
@click:append="show_password = !show_password"
28-
/>
29-
</v-form>
30-
</v-card-text>
31-
<v-card-actions>
32-
<v-btn @click="gotoSignup">SIGNUP</v-btn>
33-
<v-spacer />
34-
<v-btn @click="doLogin">LOGIN</v-btn>
35-
</v-card-actions>
36-
<hr />
37-
<v-spacer />
38-
<v-btn @click="gotoResetPassword"
39-
>パスワードを忘れたかたはこちら</v-btn
40-
>
41-
</v-card>
42-
</v-flex>
43-
</v-layout>
44-
</v-container>
2+
<div class="LoginPage">
3+
<v-flex>
4+
<div class="Logo">
5+
<Logo style="height: 80vw; max-height: 350px; width: 100%;" />
6+
</div>
7+
<div class="LoginForm">
8+
<v-form>
9+
<v-text-field
10+
v-model="email"
11+
:counter="32"
12+
label="email"
13+
outlined
14+
dark
15+
prepend-icon="mdi-email"
16+
/>
17+
<v-text-field
18+
v-model="password"
19+
:append-icon="
20+
show_password ? 'mdi-visibility' : 'mdi-visibility_off'
21+
"
22+
:type="show_password ? 'text' : 'password'"
23+
:counter="32"
24+
label="password"
25+
outlined
26+
dark
27+
prepend-icon="mdi-lock"
28+
@click:append="show_password = !show_password"
29+
/>
30+
<v-btn
31+
block
32+
outlined
33+
color="white"
34+
height="40px"
35+
:loading="loading"
36+
:disabled="loading"
37+
@click="doLogin"
38+
>
39+
LOGIN
40+
</v-btn>
41+
</v-form>
42+
</div>
43+
</v-flex>
4544
</div>
4645
</template>
4746

4847
<script>
4948
import { mapActions } from 'vuex'
5049
import firebase from '@/plugins/firebase'
50+
import Logo from '@/assets/svgs/logo.svg'
5151
export default {
52+
components: {
53+
Logo,
54+
},
5255
data() {
5356
return {
5457
email: '',
5558
password: '',
5659
show_password: false,
60+
loading: false,
5761
}
5862
},
5963
methods: {
6064
...mapActions('modules/user', ['login']),
6165
doLogin() {
66+
this.loading = true
6267
firebase
6368
.auth()
6469
.signInWithEmailAndPassword(this.email, this.password)
@@ -69,6 +74,7 @@ export default {
6974
this.$router.push('/edit')
7075
})
7176
.catch((error) => {
77+
this.loading = false
7278
alert(error)
7379
})
7480
},
@@ -81,3 +87,28 @@ export default {
8187
},
8288
}
8389
</script>
90+
91+
<style lang="scss" scoped>
92+
.LoginPage {
93+
text-align: center;
94+
.Logo {
95+
text-align: center;
96+
}
97+
.LoginTitle {
98+
color: #ffffff;
99+
font-family: 'Noto Sans JP';
100+
font-size: 5em;
101+
}
102+
.DataBlock {
103+
margin: 0 -12px;
104+
.studycard {
105+
margin-bottom: 20px;
106+
}
107+
}
108+
.LoginForm {
109+
width: 90%;
110+
max-width: 600px;
111+
margin: 50px auto;
112+
}
113+
}
114+
</style>

src/pages/edit/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<h1>{{ userData }}</h1>
2+
<h1>{{ uid }}</h1>
33
</template>
44

55
<script>
@@ -9,7 +9,7 @@ export default {
99
layout: 'protected',
1010
name: 'IndexVue',
1111
computed: {
12-
...mapGetters('modules/user', ['userData']),
12+
...mapGetters('modules/user', ['uid']),
1313
},
1414
}
1515
</script>

src/store/modules/user.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import firebase from '@/plugins/firebase.js'
33

44
export const state = () => ({
55
userData: null,
6+
uid: null,
67
})
78

89
export const mutations = {
@@ -13,6 +14,13 @@ export const mutations = {
1314
state.userData = null
1415
}
1516
},
17+
setUid(state, payload) {
18+
if (payload) {
19+
state.uid = payload
20+
} else {
21+
state.uid = null
22+
}
23+
},
1624
}
1725

1826
export const actions = {
@@ -26,23 +34,31 @@ export const actions = {
2634
}
2735
Cookies.set('access_token', token) // saving token in cookie for server rendering
2836
await dispatch('setUserData', userInfo)
37+
await dispatch('setUid', firebase.auth().currentUser.uid)
2938
},
3039

3140
async logout({ commit }) {
3241
await firebase.auth().signOut()
3342

3443
Cookies.remove('access_token')
3544
commit('setUserData', null)
45+
commit('setUid', null)
3646
},
3747
setUserData({ commit }, payload) {
3848
commit('setUserData', payload)
3949
},
50+
setUid({ commit }, payload) {
51+
commit('setUid', payload)
52+
},
4053
}
4154

4255
export const getters = {
4356
userData: (state) => {
4457
return state.userData
4558
},
59+
uid: (state) => {
60+
return state.uid
61+
},
4662
isAuthenticated: (state) => {
4763
return !!state.userData && !!state.userData.uid
4864
},

0 commit comments

Comments
 (0)