mirror of
https://github.com/Dannecron/ich-lerne-deutsch.git
synced 2025-12-25 21:02:35 +03:00
SingIn and SignUp pages logic. Add Firebase integration
This commit is contained in:
@@ -36,28 +36,41 @@
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isUserAuthentificated() {
|
||||
return this.$store.getters.isUserAuthentificated;
|
||||
},
|
||||
menuItems() {
|
||||
if (this.isUserAuthentificated) {
|
||||
return [
|
||||
{
|
||||
icon: 'visibility',
|
||||
title: 'Статьи',
|
||||
route: '/articles',
|
||||
},
|
||||
{
|
||||
icon: 'extension',
|
||||
title: 'Учить слова',
|
||||
route: '/words',
|
||||
},
|
||||
{
|
||||
icon: 'account_circle',
|
||||
title: 'Мой профиль',
|
||||
route: '/profile',
|
||||
},
|
||||
{
|
||||
icon: 'exit_to_app',
|
||||
title: 'Выйти',
|
||||
route: '/sign_out',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
icon: 'visibility',
|
||||
title: 'Статьи',
|
||||
route: '/articles',
|
||||
},
|
||||
{
|
||||
icon: 'extension',
|
||||
title: 'Учить слова',
|
||||
route: '/words',
|
||||
},
|
||||
{
|
||||
icon: 'account_circle',
|
||||
title: 'Мой профиль',
|
||||
route: '/profile',
|
||||
},
|
||||
{
|
||||
icon: 'exit_to_app',
|
||||
title: 'Выйти',
|
||||
route: '/sign_out',
|
||||
},
|
||||
{
|
||||
icon: 'input',
|
||||
title: 'Войти',
|
||||
|
||||
8
src/config/firebase.example.js
Normal file
8
src/config/firebase.example.js
Normal file
@@ -0,0 +1,8 @@
|
||||
export default {
|
||||
apiKey: "test",
|
||||
authDomain: "test.firebaseapp.com",
|
||||
databaseURL: "https://test.firebaseio.com",
|
||||
projectId: "test",
|
||||
storageBucket: "test.appspot.com",
|
||||
messagingSenderId: "test"
|
||||
};
|
||||
17
src/main.js
17
src/main.js
@@ -1,12 +1,16 @@
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify';
|
||||
import firebase from 'firebase';
|
||||
|
||||
import 'vuetify/dist/vuetify.min.css';
|
||||
import 'material-design-icons-iconfont/dist/material-design-icons.css';
|
||||
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import store from './store';
|
||||
import App from '@/App.vue';
|
||||
import router from '@/router';
|
||||
import store from '@/store';
|
||||
import firebaseConfig from '@/config/firebase';
|
||||
|
||||
firebase.initializeApp(firebaseConfig);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.use(Vuetify);
|
||||
@@ -14,5 +18,10 @@ Vue.use(Vuetify);
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
render: h => h(App),
|
||||
created: function onApplicationCreated() {
|
||||
firebase.auth().onAuthStateChanged((user) => {
|
||||
this.$store.dispatch('stateChanged', user);
|
||||
});
|
||||
}
|
||||
}).$mount('#app');
|
||||
|
||||
22
src/store.js
22
src/store.js
@@ -1,16 +1,14 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
|
||||
Vue.use(Vuex)
|
||||
import generalModule from '@/store/general';
|
||||
import userModule from '@/store/user';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
|
||||
modules: {
|
||||
userModule,
|
||||
generalModule,
|
||||
},
|
||||
mutations: {
|
||||
|
||||
},
|
||||
actions: {
|
||||
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
21
src/store/general.js
Normal file
21
src/store/general.js
Normal file
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
state: {
|
||||
processing: false,
|
||||
error: null,
|
||||
},
|
||||
mutations: {
|
||||
setProcessing(state, payload) {
|
||||
state.processing = payload;
|
||||
},
|
||||
setError(state, payload) {
|
||||
state.error = payload;
|
||||
},
|
||||
cleanError(state) {
|
||||
state.error = null;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getProcessing: state => state.processing,
|
||||
getError: state => state.error,
|
||||
}
|
||||
};
|
||||
63
src/store/user.js
Normal file
63
src/store/user.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import firebase from 'firebase';
|
||||
|
||||
export default {
|
||||
state: {
|
||||
user: {
|
||||
isAuthentificated: false,
|
||||
uid: null,
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
setUser(state, payload) {
|
||||
state.user.isAuthentificated = true;
|
||||
state.user.uid = payload;
|
||||
},
|
||||
unSetUser(state) {
|
||||
state.user.isAuthentificated = false;
|
||||
state.user.uid = null;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
signUp({ commit }, payload) {
|
||||
commit('setProcessing', true);
|
||||
|
||||
const { email, password } = payload;
|
||||
firebase.auth()
|
||||
.createUserWithEmailAndPassword(email, password)
|
||||
.then((response) => {
|
||||
commit('setUser', response.user.uid)
|
||||
commit('setProcessing', false);
|
||||
})
|
||||
.catch(function(error) {
|
||||
const { message } = error;
|
||||
commit('setProcessing', false);
|
||||
commit('setError', message);
|
||||
});
|
||||
},
|
||||
signIn({ commit }, payload) {
|
||||
commit('setProcessing', true);
|
||||
const { email, password } = payload;
|
||||
firebase.auth()
|
||||
.signInWithEmailAndPassword(email, password)
|
||||
.then((response) => {
|
||||
commit('setUser', response.localId)
|
||||
commit('setProcessing', false);
|
||||
})
|
||||
.catch(function(error) {
|
||||
const { message } = error;
|
||||
commit('setProcessing', false);
|
||||
commit('setError', message);
|
||||
});
|
||||
},
|
||||
stateChanged({ commit }, payload) {
|
||||
if (payload) {
|
||||
commit('setUser', payload.uid);
|
||||
} else {
|
||||
commit('unSetUser');
|
||||
}
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
isUserAuthentificated: state => state.user.isAuthentificated,
|
||||
},
|
||||
};
|
||||
@@ -1,12 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Sign-in</h2>
|
||||
</div>
|
||||
</template>
|
||||
<v-content>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md6>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Вход</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-alert
|
||||
:value="error"
|
||||
type="warning"
|
||||
>
|
||||
{{error}}
|
||||
</v-alert>
|
||||
|
||||
<v-form>
|
||||
<v-text-field
|
||||
prepend-icon="person"
|
||||
v-model="email"
|
||||
name="login"
|
||||
label="Email"
|
||||
type="email"
|
||||
required
|
||||
>
|
||||
</v-text-field>
|
||||
|
||||
<v-text-field
|
||||
prepend-icon="lock"
|
||||
v-model="password"
|
||||
name="password"
|
||||
label="Пароль"
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
>
|
||||
</v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" @click.prevent="signIn" :disabled="isProcessing">Войти</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
email: null,
|
||||
password: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
error() {
|
||||
return this.$store.getters.getError;
|
||||
},
|
||||
isProcessing() {
|
||||
return this.$store.getters.getProcessing;
|
||||
},
|
||||
isUserAuthentificated() {
|
||||
return this.$store.getters.isUserAuthentificated;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isUserAuthentificated(val) {
|
||||
console.log(val);
|
||||
if (val === true) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
signIn() {
|
||||
const { email, password } = this;
|
||||
this.$store.dispatch('signIn', { email, password });
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,12 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Sign-up</h2>
|
||||
</div>
|
||||
</template>
|
||||
<v-content>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md6>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Регистрация</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-alert
|
||||
:value="error"
|
||||
type="warning"
|
||||
>
|
||||
{{error}}
|
||||
</v-alert>
|
||||
|
||||
<v-form>
|
||||
<v-text-field
|
||||
prepend-icon="person"
|
||||
v-model="email"
|
||||
name="login"
|
||||
label="Email"
|
||||
type="email"
|
||||
required
|
||||
>
|
||||
</v-text-field>
|
||||
|
||||
<v-text-field
|
||||
prepend-icon="lock"
|
||||
v-model="password"
|
||||
name="password"
|
||||
label="Пароль"
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
>
|
||||
</v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" @click.prevent="signUp" :disabled="isProcessing">Зарегистрироваться</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
email: null,
|
||||
password: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
error() {
|
||||
return this.$store.getters.getError;
|
||||
},
|
||||
isProcessing() {
|
||||
return this.$store.getters.getProcessing;
|
||||
},
|
||||
isUserAuthentificated() {
|
||||
return this.$store.getters.isUserAuthentificated;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isUserAuthentificated(val) {
|
||||
if (val === true) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
signUp() {
|
||||
const { email, password } = this;
|
||||
this.$store.dispatch('signUp', { email, password });
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user