Commit 59c51803 authored by amandazk's avatar amandazk

Autenticação

parent aed6340d
...@@ -16,9 +16,9 @@ Including another URLconf ...@@ -16,9 +16,9 @@ Including another URLconf
from django.contrib import admin from django.contrib import admin
from django.urls import path from django.urls import path
from django.conf.urls import include from django.conf.urls import include
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
urlpatterns = [ urlpatterns = [
path('auth/', include('djoser.urls.authtoken')),
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path('api/', include('campanhas.urls')), path('api/', include('campanhas.urls')),
path('api/', include('pessoas.urls')), path('api/', include('pessoas.urls')),
...@@ -27,5 +27,6 @@ urlpatterns = [ ...@@ -27,5 +27,6 @@ urlpatterns = [
path('api/', include('oferta.urls')), path('api/', include('oferta.urls')),
path('api/', include('servico.urls')), path('api/', include('servico.urls')),
path('api/', include('noticia.urls')), path('api/', include('noticia.urls')),
path('api/auth/token/', TokenObtainPairView.as_view(), name="token"),
#path('', include('index.urls')) #path('', include('index.urls'))
] ]
This diff is collapsed.
...@@ -8,8 +8,11 @@ ...@@ -8,8 +8,11 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^2.6.12" "vue": "^2.6.12",
"vuex": "^3.6.0",
"vuex-persist": "^3.1.3"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
......
<template> <template>
<div> <div>
<v-app id=""> <!-- <v-app id=""> -->
<nav-bar ref="drawer" /> <nav-bar ref="drawer" />
<v-content> <section id="content">
<router-view></router-view> <router-view></router-view>
</v-content> </section>
<footer-bar ref="drawer" /> <footer-bar ref="drawer" />
</v-app> <!-- </v-app> -->
</div> </div>
</template> </template>
......
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
}, },
methods: { methods: {
getCampanha() { getCampanha() {
axios.get("http://localhost:8000/api/campanhas").then((res) => { axios.get("api/campanhas").then((res) => {
// console.log(res.data); // console.log(res.data);
this.campanhas = res.data; this.campanhas = res.data;
}); });
......
<template> <template>
<div class="container"> <div id="formContent">
<div class="wrapper fadeInDown"> <h1>Login</h1>
<div id="formContent"> <h2>Logado: {{loggedIn}}</h2>
<h1>Login</h1> <!-- Login Form -->
<!-- Login Form --> <form>
<form> <input
<input type="text" id="login" class="fadeIn second" name="login" placeholder="usuário"> type="text"
<input type="text" id="password" class="fadeIn third" name="login" placeholder="senha"> id="login"
<input type="submit" class="fadeIn fourth" style="font-weight:bold;" value="Entrar"> class="fadeIn second"
</form> name="login"
placeholder="usuário"
<!-- Cadastro --> v-model="user.username"
<div id="formFooter"> />
<a class="underlineHover" href="/pessoas/cadastro">Ainda não é cadastrado? Clique aqui</a> <input
</div> type="password"
id="password"
</div> class="fadeIn third"
name="login"
placeholder="senha"
v-model="user.password"
/>
<input
type="submit"
class="fadeIn fourth"
style="font-weight: bold"
value="Entrar"
@click.prevent="submit"
/>
</form>
<!-- Cadastro -->
<div id="formFooter">
<a class="underlineHover" href="/pessoas/cadastro"
>Ainda não é cadastrado? Clique aqui</a
>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapActions, mapState } from 'vuex'
export default { export default {
name : "Login" , name: "Login",
data() { data() {
return {
}} user: {}
}
},
computed: {
...mapState('auth', ['loggedIn'])
},
methods: {
...mapActions('auth', ['login']),
async submit() {
try {
console.log('oi')
await this.login(this.user)
// this.$router.push( { path: '/' })
} catch(error) {
console.log('Erro de Login: ', error)
}
}
}
};
</script> </script>
<style> <style>
...@@ -33,9 +72,9 @@ export default { ...@@ -33,9 +72,9 @@ export default {
margin-top: 150px; margin-top: 150px;
} }
h1{ h1 {
padding: 10px; padding: 10px;
} }
body { body {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
...@@ -45,7 +84,7 @@ body { ...@@ -45,7 +84,7 @@ body {
a { a {
color: #56555e; color: #56555e;
display:inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
font-weight: 400; font-weight: 400;
} }
...@@ -55,15 +94,15 @@ h2 { ...@@ -55,15 +94,15 @@ h2 {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
display:inline-block; display: inline-block;
margin: 40px 8px 10px 8px; margin: 40px 8px 10px 8px;
color: #cccccc; color: #cccccc;
} }
.wrapper { .wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
...@@ -102,7 +141,9 @@ h2.active { ...@@ -102,7 +141,9 @@ h2.active {
border-bottom: 2px solid #9bb694; border-bottom: 2px solid #9bb694;
} }
input[type=button], input[type=submit], input[type=reset] { input[type="button"],
input[type="submit"],
input[type="reset"] {
background-color: #56555e; background-color: #56555e;
border: none; border: none;
color: white; color: white;
...@@ -124,11 +165,15 @@ input[type=button], input[type=submit], input[type=reset] { ...@@ -124,11 +165,15 @@ input[type=button], input[type=submit], input[type=reset] {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #868686; background-color: #868686;
} }
input[type=button]:active, input[type=submit]:active, input[type=reset]:active { input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
-moz-transform: scale(0.95); -moz-transform: scale(0.95);
-webkit-transform: scale(0.95); -webkit-transform: scale(0.95);
-o-transform: scale(0.95); -o-transform: scale(0.95);
...@@ -136,7 +181,8 @@ input[type=button]:active, input[type=submit]:active, input[type=reset]:active ...@@ -136,7 +181,8 @@ input[type=button]:active, input[type=submit]:active, input[type=reset]:active
transform: scale(0.95); transform: scale(0.95);
} }
input[type=text] { input[type="password"],
input[type="text"] {
background-color: #f6f6f6; background-color: #f6f6f6;
border: none; border: none;
color: #0d0d0d; color: #0d0d0d;
...@@ -157,18 +203,16 @@ input[type=text] { ...@@ -157,18 +203,16 @@ input[type=text] {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
} }
input[type=text]:focus { input[type="text"]:focus {
background-color: #fff; background-color: #fff;
border-bottom: 2px solid #9bb694; border-bottom: 2px solid #9bb694;
} }
input[type=text]:placeholder { input[type="text"]:placeholder {
color: #cccccc; color: #cccccc;
} }
*:focus { *:focus {
outline: none; outline: none;
} }
</style> </style>
\ No newline at end of file
...@@ -6,7 +6,9 @@ import 'bootstrap/dist/css/bootstrap.css' ...@@ -6,7 +6,9 @@ import 'bootstrap/dist/css/bootstrap.css'
// import 'bootstrap-vue/dist/bootstrap-vue.css' // import 'bootstrap-vue/dist/bootstrap-vue.css'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Vue from 'vue' import Vue from 'vue'
import router from './router/index' import router from './router'
import store from './store'
import './plugins/axios'
// import DescProj from './components/DescProj.vue' // import DescProj from './components/DescProj.vue'
...@@ -30,5 +32,6 @@ Vue.use(VueRouter); ...@@ -30,5 +32,6 @@ Vue.use(VueRouter);
new Vue({ new Vue({
router, router,
store,
render: h => h(App,) render: h => h(App,)
}).$mount('#app') }).$mount('#app')
\ No newline at end of file
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000/' // Tem que mudar quando fazer o Deploy process.env.....
axios.interceptors.request.use(
(config) => {
const storage = JSON.parse(localStorage.getItem('psIfc'))
if (storage && storage.auth) {
if (storage.auth.loggedIn) {
config.headers.common['Authorization'] = `Bearer ${storage.auth.user.access}`
}
}
return config
}
)
\ No newline at end of file
...@@ -11,7 +11,7 @@ import PessoaList from '../components/Pessoa/List.vue' ...@@ -11,7 +11,7 @@ import PessoaList from '../components/Pessoa/List.vue'
import PessoaCreate from '../components/Pessoa/Create.vue' import PessoaCreate from '../components/Pessoa/Create.vue'
import ServicoList from '../components/Servico/List.vue' import ServicoList from '../components/Servico/List.vue'
import VoluntariadoList from '../components/Voluntariado/List.vue' import VoluntariadoList from '../components/Voluntariado/List.vue'
import Login from '../components/Login/Login.vue' import Login from '@/views/Login.vue'
//import { component } from 'vue/types/umd'; //import { component } from 'vue/types/umd';
Vue.use(VueRouter) Vue.use(VueRouter)
......
import axios from 'axios'
class AuthApi {
async login(user) {
try {
const { data } = await axios.post('api/auth/token/', user)
if (data.access) {
axios.defaults.headers.common['Authorization'] = `Bearer ${data.access}`
}
return data
} catch(e) {
console.log(e)
}
}
}
export default new AuthApi()
\ No newline at end of file
import AuthApi from '@/services/auth'
const storage = JSON.parse(localStorage.getItem('psIfc'))
if (storage && storage.auth) {
var _loggedIn = storage.auth.loggedIn
var _user = storage.auth.user
} else {
var _loggedIn = false
var _user = {}
}
export const auth = {
namespaced: true,
state: {
loggedIn: _loggedIn,
user: _user
},
actions: {
login({ commit }, user) {
console.log('oi1 ...', user)
return AuthApi.login(user).then( (user) => {
commit('loginSuccess', user)
return Promise.resolve(user)
}, (error) => {
commit('loginFailure')
return Promise.reject(error)
})
}
},
mutations: {
loginSuccess(state, user) {
state.loggedIn = true
state.user = user
},
loginFailure(state) {
state.loggedIn = false
state.user = {}
}
}
}
\ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'
import { auth } from './auth'
Vue.use(Vuex)
const vuexLocalStorage = new VuexPersist({
key: 'psIfc',
storage: window.localStorage,
})
export default new Vuex.Store({
modules: {
auth,
},
plugins: [vuexLocalStorage.plugin]
})
\ No newline at end of file
<template>
<div class="container">
<div class="wrapper fadeInDown">
<login-form />
</div>
</div>
</template>
<script>
import LoginForm from '@/components/Login/LoginForm.vue'
export default {
name: "Login",
components: { LoginForm },
};
</script>
<style>
.container {
margin-top: 150px;
}
h1 {
padding: 10px;
}
body {
font-family: "Poppins", sans-serif;
height: 100vh;
/* overflow: hidden; */
}
a {
color: #56555e;
display: inline-block;
text-decoration: none;
font-weight: 400;
}
h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
margin: 40px 8px 10px 8px;
color: #cccccc;
}
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
width: 90%;
max-width: 450px;
position: relative;
padding: 0px;
/* -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); */
text-align: center;
}
#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
h2.inactive {
color: #cccccc;
}
h2.active {
color: #0d0d0d;
border-bottom: 2px solid #9bb694;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
background-color: #56555e;
border: none;
color: white;
padding: 15px 80px;
text-align