Skip to content

Commit 32abb1d

Browse files
boudlalboudlal
committed
setting up Authentication system: firebase auth
1 parent e38c732 commit 32abb1d

File tree

9 files changed

+1306
-219
lines changed

9 files changed

+1306
-219
lines changed

‎package-lock.json

+946-211
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
},
1515
"dependencies": {
1616
"axios": "^0.18.0",
17+
"firebase": "^5.8.0",
1718
"moment": "^2.23.0",
1819
"vue": "^2.5.2",
1920
"vue-router": "^3.0.1",

‎src/components/AuthComponents/SignInComponent.vue

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<template >
2+
<div class="container" v-cloak>
3+
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
4+
<div class="panel panel-info">
5+
<div class="panel-heading">
6+
<div class="panel-title">Sign In</div>
7+
</div>
8+
9+
<div style="padding-top:30px" class="panel-body">
10+
11+
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
12+
13+
<form id="loginform" class="form-horizontal" role="form">
14+
15+
<div style="margin-bottom: 25px" class="input-group">
16+
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
17+
<input v-model="user.email" type="text" class="form-control" placeholder="email">
18+
</div>
19+
20+
<div style="margin-bottom: 25px" class="input-group">
21+
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
22+
<input v-model="user.password" type="password" class="form-control" placeholder="password">
23+
</div>
24+
25+
<div v-if="authError" style="margin-bottom: 25px" class="input-group">
26+
<span class="input-group-addon"><i class="glyphicon glyphicon-alert"></i> {{ authError }}</span>
27+
</div>
28+
29+
<div v-if="showError" style="margin-bottom: 25px" class="input-group">
30+
<span class="input-group-addon"><i class="glyphicon glyphicon-alert"></i> {{ errorMessage }}</span>
31+
</div>
32+
33+
<div style="margin-top:10px" class="form-group">
34+
<!-- Button -->
35+
36+
<div class="col-sm-12 controls">
37+
<a v-on:click="onSignIn()" class="btn btn-success">Sign In</a>
38+
</div>
39+
</div>
40+
41+
42+
<div class="form-group">
43+
<div class="col-md-12 control">
44+
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%">
45+
Not a member?
46+
<router-link :to="{ name: 'SignUp'}">Sign Up Here</router-link>
47+
</div>
48+
</div>
49+
</div>
50+
</form>
51+
52+
53+
54+
</div>
55+
</div>
56+
</div>
57+
58+
</div>
59+
</template>
60+
61+
<script>
62+
export default {
63+
data () {
64+
return {
65+
user: {
66+
email: null,
67+
password: null
68+
},
69+
authErrors: false,
70+
errorMessage: null,
71+
showError: false
72+
}
73+
},
74+
computed: {
75+
currentUser () {
76+
return this.$store.getters.user
77+
},
78+
authError () {
79+
return this.$store.getters.authError
80+
}
81+
},
82+
methods: {
83+
onSignIn () {
84+
if (!this.validateForm()) {
85+
this.errorMessage = "please fill all inputs"
86+
return this.showError = true
87+
}
88+
this.errors = false
89+
this.showError = false
90+
this.$store.dispatch('signIn', this.user)
91+
},
92+
validateForm () {
93+
if (this.user.email === null || this.user.email === undefined || this.user.password === null || this.user.password === undefined) {
94+
return false
95+
}
96+
return true
97+
}
98+
},
99+
watch: {
100+
currentUser (value) {
101+
if (value !== null && value !== undefined) {
102+
this.$router.push('/')
103+
}
104+
},
105+
authError (value) {
106+
if (value !== null && value !== undefined){
107+
this.authErrors = true
108+
}
109+
}
110+
}
111+
}
112+
</script>
113+
114+
<style scoped>
115+
.container {
116+
min-height: 670px;
117+
}
118+
</style>

‎src/components/AuthComponents/SignUpComponent.vue

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<template>
2+
<div class="container">
3+
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
4+
<div class="panel panel-info">
5+
<div class="panel-heading">
6+
<div class="panel-title">Sign Up</div>
7+
</div>
8+
9+
<div style="padding-top:30px" class="panel-body">
10+
11+
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
12+
13+
<form id="loginform" class="form-horizontal" role="form">
14+
15+
<div style="margin-bottom: 25px" class="input-group">
16+
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
17+
<input v-model="user.email" type="text" class="form-control" placeholder="email">
18+
</div>
19+
20+
<div style="margin-bottom: 25px" class="input-group">
21+
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
22+
<input v-model="user.password" type="password" class="form-control" placeholder="password" min="6">
23+
</div>
24+
25+
<div style="margin-bottom: 25px" class="input-group">
26+
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
27+
<input v-model="user.confirmPassword" type="password" class="form-control" placeholder="confirmPassword">
28+
</div>
29+
30+
<div v-if="authError" style="margin-bottom: 25px" class="input-group">
31+
<span class="input-group-addon"><i class="glyphicon glyphicon-alert"></i> {{ authError }}</span>
32+
</div>
33+
34+
<div v-if="showError" style="margin-bottom: 25px" class="input-group">
35+
<span class="input-group-addon"><i class="glyphicon glyphicon-alert"></i> {{ errorMessage }}</span>
36+
</div>
37+
38+
39+
40+
41+
<div style="margin-top:10px" class="form-group">
42+
<!-- Button -->
43+
44+
<div class="col-sm-12 controls">
45+
<a id="btn-login" v-on:click="onSignUp()" class="btn btn-success">Sign Up</a>
46+
</div>
47+
</div>
48+
49+
50+
<div class="form-group">
51+
<div class="col-md-12 control">
52+
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%">
53+
You already a member?
54+
<router-link :to="{ name: 'SignIn'}">Sign In Here</router-link>
55+
</div>
56+
</div>
57+
</div>
58+
</form>
59+
60+
61+
62+
</div>
63+
</div>
64+
</div>
65+
66+
</div>
67+
</template>
68+
69+
<script>
70+
export default {
71+
data () {
72+
return {
73+
user: {
74+
email: null,
75+
password: null,
76+
confirmPassword: null
77+
},
78+
authErrors: false,
79+
errorMessage: null,
80+
showError: false
81+
}
82+
},
83+
computed: {
84+
currentUser () {
85+
return this.$store.getters.user
86+
},
87+
authError () {
88+
return this.$store.getters.authError
89+
}
90+
},
91+
methods: {
92+
checkPassword () {
93+
return this.user.password !== this.user.confirmPassword
94+
},
95+
onSignUp () {
96+
if (this.checkPassword()){
97+
this.errorMessage = 'Passwords do not matched'
98+
return this.showError = true
99+
}
100+
if (!this.validateForm()) {
101+
this.errorMessage = "please fill all inputs"
102+
return this.showError = true
103+
}
104+
105+
this.authErrors = false
106+
this.showError = false
107+
this.$store.dispatch('signUp', this.user)
108+
},
109+
validateForm () {
110+
if (this.user.email === null || this.user.email === undefined || this.user.password === null || this.user.password === undefined) {
111+
return false
112+
}
113+
return true
114+
}
115+
},
116+
watch: {
117+
currentUser (value) {
118+
if (value !== null && value !== undefined) {
119+
this.$router.push('/')
120+
}
121+
},
122+
authError (value) {
123+
if (value !== null && value !== undefined){
124+
this.authErrors = true
125+
}
126+
}
127+
}
128+
}
129+
</script>
130+
131+
<style scoped>
132+
.container {
133+
min-height: 670px;
134+
}
135+
</style>

‎src/components/LayoutComponents/HeaderComponent.vue

+17-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,12 @@
1212
<a class="navbar-brand" href=""><img src=""/>MY LOGO</a>
1313
</div>
1414
<div id="navbar" class="navbar-collapse collapse">
15-
<ul class="nav navbar-nav navbar-right">
16-
<li><a href="">The list of repositories</a></li>
15+
<ul v-if="userIsAuthenticated" class="nav navbar-nav navbar-right">
16+
<li><a href="#" v-on:click.prevent="onLogout()">Logout</a></li>
17+
</ul>
18+
<ul v-if="!userIsAuthenticated" class="nav navbar-nav navbar-right">
19+
<li><router-link :to="{ name: 'SignUp'}">Sign Up</router-link></li>
20+
<li><router-link :to="{ name: 'SignIn'}">Sign In</router-link></li>
1721
</ul>
1822
</div><!--/.nav-collapse -->
1923
</div><!--/.container-fluid -->
@@ -22,6 +26,17 @@
2226

2327
<script>
2428
export default {
29+
computed: {
30+
userIsAuthenticated () {
31+
return this.$store.getters.user !== null && this.$store.getters.user !== undefined
32+
}
33+
},
34+
methods: {
35+
onLogout () {
36+
this.$store.dispatch('logout')
37+
return this.$router.push('/signin')
38+
}
39+
}
2540
}
2641
</script>
2742

‎src/main.js

+17-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
33
import Vue from 'vue'
44
import App from './App'
5+
import * as firebase from 'firebase'
56
import router from './router'
67
import { store } from './store'
78

@@ -13,5 +14,20 @@ new Vue({
1314
store,
1415
router,
1516
components: { App },
16-
template: '<App/>'
17+
template: '<App/>',
18+
created () {
19+
firebase.initializeApp({
20+
apiKey: "AIzaSyAQ5NNMxiSkyGTx77QeJybdNjvUA9ry5JA",
21+
authDomain: "vuejs-mini.firebaseapp.com",
22+
databaseURL: "https://vuejs-mini.firebaseio.com",
23+
projectId: "vuejs-mini",
24+
storageBucket: "vuejs-mini.appspot.com",
25+
messagingSenderId: "55064166071"
26+
})
27+
firebase.auth().onAuthStateChanged((user) => {
28+
if (user) {
29+
this.$store.dispatch('refreshAuthState', user)
30+
}
31+
})
32+
}
1733
})

‎src/router/auth-guard.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { store } from '../store'
2+
3+
export default (to, from, next) => {
4+
if (store.getters.user) {
5+
next()
6+
}else {
7+
next('/signin')
8+
}
9+
}

‎src/router/index.js

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
3+
import AuthGuard from './auth-guard'
34
import RepositoryComponent from '@/components/RepositoriesListComponent'
5+
import SignUpComponent from '@/components/AuthComponents/SignUpComponent'
6+
import SignInComponent from '@/components/AuthComponents/SignInComponent'
47

58
Vue.use(Router)
69

710
export default new Router({
811
routes: [
912
{
1013
path: '/',
11-
name: 'RepositoryComponent',
12-
component: RepositoryComponent
14+
name: 'List',
15+
component: RepositoryComponent,
16+
beforeEnter: AuthGuard
17+
},
18+
{
19+
path: '/signup',
20+
name: 'SignUp',
21+
component: SignUpComponent
22+
},
23+
{
24+
path: '/signin',
25+
name: 'SignIn',
26+
component: SignInComponent
1327
}
1428
]
1529
})

0 commit comments

Comments
 (0)