1
1
<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 >
45
44
</div >
46
45
</template >
47
46
48
47
<script >
49
48
import { mapActions } from ' vuex'
50
49
import firebase from ' @/plugins/firebase'
50
+ import Logo from ' @/assets/svgs/logo.svg'
51
51
export default {
52
+ components: {
53
+ Logo,
54
+ },
52
55
data () {
53
56
return {
54
57
email: ' ' ,
55
58
password: ' ' ,
56
59
show_password: false ,
60
+ loading: false ,
57
61
}
58
62
},
59
63
methods: {
60
64
... mapActions (' modules/user' , [' login' ]),
61
65
doLogin () {
66
+ this .loading = true
62
67
firebase
63
68
.auth ()
64
69
.signInWithEmailAndPassword (this .email , this .password )
@@ -69,6 +74,7 @@ export default {
69
74
this .$router .push (' /edit' )
70
75
})
71
76
.catch ((error ) => {
77
+ this .loading = false
72
78
alert (error)
73
79
})
74
80
},
@@ -81,3 +87,28 @@ export default {
81
87
},
82
88
}
83
89
</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 >
0 commit comments