Skip to content

Commit 9059408

Browse files
aofdevaofdev
committed
add sign in facebook,google,github,twitter
1 parent 59b5cdc commit 9059408

File tree

4 files changed

+196
-6
lines changed

4 files changed

+196
-6
lines changed

‎src/components/User/Profile.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<v-flex xs12 sm6 offset-sm3>
55
<v-card>
66
<v-card-title primary-title>
7-
<div>
8-
<h3 class="headline mb-0">{{ user.name }}</h3>
9-
<h3 class="headline mb-0">{{ user.email }}</h3>
10-
<div></div>
7+
<div class="text-md-center">
8+
<h2>Login Success</h2>
9+
<h4 class="headline mb-0">{{ user.name }}</h4>
10+
<h4 class="headline mb-0">{{ user.email }}</h4>
1111
</div>
1212
</v-card-title>
1313
</v-card>

‎src/components/User/Signin.vue

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,47 @@
3535
</v-layout>
3636
<v-layout row>
3737
<v-flex xs12>
38-
<v-btn type="submit" :disabled="loading" :loading="loading">
38+
<div class="text-xs-center">
39+
<v-btn round type="submit" :disabled="loading" :loading="loading">
3940
Sign in
41+
<v-icon right>lock_open</v-icon>
4042
<span slot="loader" class="custom-loader">
4143
<v-icon light>cached</v-icon>
4244
</span>
4345
</v-btn>
46+
</div>
47+
<div class="text-xs-center">
48+
<v-btn round class="red" dark :disabled="loading" :loading="loading" @click.prevent="onSigninGoogle">Login with Google
49+
<v-icon right dark>lock_open</v-icon>
50+
<span slot="loader" class="custom-loader">
51+
<v-icon light>cached</v-icon>
52+
</span>
53+
</v-btn>
54+
</div>
55+
<div class="text-xs-center">
56+
<v-btn round primary dark :disabled="loading" :loading="loading" @click.prevent="onSigninFacebook">Login with Facebook
57+
<v-icon right dark>lock_open</v-icon>
58+
<span slot="loader" class="custom-loader">
59+
<v-icon light>cached</v-icon>
60+
</span>
61+
</v-btn>
62+
</div>
63+
<div class="text-xs-center">
64+
<v-btn round dark :disabled="loading" :loading="loading" @click.prevent="onSigninGithub">Login with Github
65+
<v-icon right dark>lock_open</v-icon>
66+
<span slot="loader" class="custom-loader">
67+
<v-icon light>cached</v-icon>
68+
</span>
69+
</v-btn>
70+
</div>
71+
<div class="text-xs-center">
72+
<v-btn round info dark :disabled="loading" :loading="loading" @click.prevent="onSigninTwitter">Login with Twitter
73+
<v-icon right dark>lock_open</v-icon>
74+
<span slot="loader" class="custom-loader">
75+
<v-icon light>cached</v-icon>
76+
</span>
77+
</v-btn>
78+
</div>
4479
</v-flex>
4580
</v-layout>
4681
</form>
@@ -82,6 +117,18 @@
82117
onSignin () {
83118
this.$store.dispatch('signUserIn', {email: this.email, password: this.password})
84119
},
120+
onSigninGoogle () {
121+
this.$store.dispatch('signUserInGoogle')
122+
},
123+
onSigninFacebook () {
124+
this.$store.dispatch('signUserInFacebook')
125+
},
126+
onSigninGithub () {
127+
this.$store.dispatch('signUserInGithub')
128+
},
129+
onSigninTwitter () {
130+
this.$store.dispatch('signUserInTwitter')
131+
},
85132
onDismissed () {
86133
this.$store.dispatch('clearError')
87134
}

‎src/components/User/Signup.vue

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,47 @@
4646
</v-layout>
4747
<v-layout row>
4848
<v-flex xs12>
49-
<v-btn type="submit" :disabled="loading" :loading="loading">
49+
<div class="text-xs-center">
50+
<v-btn round type="submit" :disabled="loading" :loading="loading">
5051
Sign up
52+
<v-icon right>lock_open</v-icon>
5153
<span slot="loader" class="custom-loader">
5254
<v-icon light>cached</v-icon>
5355
</span>
5456
</v-btn>
57+
</div>
58+
<div class="text-xs-center">
59+
<v-btn round class="red" dark :disabled="loading" :loading="loading" @click.prevent="onSigninGoogle">Login with Google
60+
<v-icon right dark>lock_open</v-icon>
61+
<span slot="loader" class="custom-loader">
62+
<v-icon light>cached</v-icon>
63+
</span>
64+
</v-btn>
65+
</div>
66+
<div class="text-xs-center">
67+
<v-btn round primary dark :disabled="loading" :loading="loading" @click.prevent="onSigninFacebook">Login with Facebook
68+
<v-icon right dark>lock_open</v-icon>
69+
<span slot="loader" class="custom-loader">
70+
<v-icon light>cached</v-icon>
71+
</span>
72+
</v-btn>
73+
</div>
74+
<div class="text-xs-center">
75+
<v-btn round dark :disabled="loading" :loading="loading" @click.prevent="onSigninGithub">Login with Github
76+
<v-icon right dark>lock_open</v-icon>
77+
<span slot="loader" class="custom-loader">
78+
<v-icon light>cached</v-icon>
79+
</span>
80+
</v-btn>
81+
</div>
82+
<div class="text-xs-center">
83+
<v-btn round info dark :disabled="loading" :loading="loading" @click.prevent="onSigninTwitter">Login with Twitter
84+
<v-icon right dark>lock_open</v-icon>
85+
<span slot="loader" class="custom-loader">
86+
<v-icon light>cached</v-icon>
87+
</span>
88+
</v-btn>
89+
</div>
5590
</v-flex>
5691
</v-layout>
5792
</form>
@@ -97,6 +132,18 @@
97132
onSignup () {
98133
this.$store.dispatch('signUserUp', {email: this.email, password: this.password})
99134
},
135+
onSigninGoogle () {
136+
this.$store.dispatch('signUserInGoogle')
137+
},
138+
onSigninFacebook () {
139+
this.$store.dispatch('signUserInFacebook')
140+
},
141+
onSigninGithub () {
142+
this.$store.dispatch('signUserInGithub')
143+
},
144+
onSigninTwitter () {
145+
this.$store.dispatch('signUserInTwitter')
146+
},
100147
onDismissed () {
101148
this.$store.dispatch('clearError')
102149
}

‎src/store/user/index.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,102 @@ export default {
5858
}
5959
)
6060
},
61+
signUserInGoogle ({commit}) {
62+
commit('setLoading', true)
63+
commit('clearError')
64+
firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())
65+
.then(
66+
user => {
67+
commit('setLoading', false)
68+
const newUser = {
69+
id: user.uid,
70+
name: user.displayName,
71+
email: user.email,
72+
photoUrl: user.photoURL
73+
}
74+
commit('setUser', newUser)
75+
}
76+
)
77+
.catch(
78+
error => {
79+
commit('setLoading', false)
80+
commit('setError', error)
81+
console.log(error)
82+
}
83+
)
84+
},
85+
signUserInFacebook ({commit}) {
86+
commit('setLoading', true)
87+
commit('clearError')
88+
firebase.auth().signInWithPopup(new firebase.auth.FacebookAuthProvider())
89+
.then(
90+
user => {
91+
commit('setLoading', false)
92+
const newUser = {
93+
id: user.uid,
94+
name: user.displayName,
95+
email: user.email,
96+
photoUrl: user.photoURL
97+
}
98+
commit('setUser', newUser)
99+
}
100+
)
101+
.catch(
102+
error => {
103+
commit('setLoading', false)
104+
commit('setError', error)
105+
console.log(error)
106+
}
107+
)
108+
},
109+
signUserInGithub ({commit}) {
110+
commit('setLoading', true)
111+
commit('clearError')
112+
firebase.auth().signInWithPopup(new firebase.auth.GithubAuthProvider())
113+
.then(
114+
user => {
115+
commit('setLoading', false)
116+
const newUser = {
117+
id: user.uid,
118+
name: user.displayName,
119+
email: user.email,
120+
photoUrl: user.photoURL
121+
}
122+
commit('setUser', newUser)
123+
}
124+
)
125+
.catch(
126+
error => {
127+
commit('setLoading', false)
128+
commit('setError', error)
129+
console.log(error)
130+
}
131+
)
132+
},
133+
signUserInTwitter ({commit}) {
134+
commit('setLoading', true)
135+
commit('clearError')
136+
firebase.auth().signInWithPopup(new firebase.auth.TwitterAuthProvider())
137+
.then(
138+
user => {
139+
commit('setLoading', false)
140+
const newUser = {
141+
id: user.uid,
142+
name: user.displayName,
143+
email: user.email,
144+
photoUrl: user.photoURL
145+
}
146+
commit('setUser', newUser)
147+
}
148+
)
149+
.catch(
150+
error => {
151+
commit('setLoading', false)
152+
commit('setError', error)
153+
console.log(error)
154+
}
155+
)
156+
},
61157
autoSignIn ({commit}, payload) {
62158
commit('setUser', {
63159
id: payload.uid,

0 commit comments

Comments
 (0)