Commit 59c51803 authored by amandazk's avatar amandazk

Autenticação

parent aed6340d
......@@ -16,9 +16,9 @@ Including another URLconf
from django.contrib import admin
from django.urls import path
from django.conf.urls import include
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
urlpatterns = [
path('auth/', include('djoser.urls.authtoken')),
path('admin/', admin.site.urls),
path('api/', include('campanhas.urls')),
path('api/', include('pessoas.urls')),
......@@ -27,5 +27,6 @@ urlpatterns = [
path('api/', include('oferta.urls')),
path('api/', include('servico.urls')),
path('api/', include('noticia.urls')),
path('api/auth/token/', TokenObtainPairView.as_view(), name="token"),
#path('', include('index.urls'))
]
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -8,8 +8,11 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.6.5",
"vue": "^2.6.12"
"vue": "^2.6.12",
"vuex": "^3.6.0",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
......
<template>
<div>
<v-app id="">
<!-- <v-app id=""> -->
<nav-bar ref="drawer" />
<v-content>
<section id="content">
<router-view></router-view>
</v-content>
</section>
<footer-bar ref="drawer" />
</v-app>
<!-- </v-app> -->
</div>
</template>
......
......@@ -28,7 +28,7 @@ export default {
},
methods: {
getCampanha() {
axios.get("http://localhost:8000/api/campanhas").then((res) => {
axios.get("api/campanhas").then((res) => {
// console.log(res.data);
this.campanhas = res.data;
});
......
<template>
<div class="container">
<div class="wrapper fadeInDown">
<div id="formContent">
<h1>Login</h1>
<!-- Login Form -->
<form>
<input type="text" id="login" class="fadeIn second" name="login" placeholder="usuário">
<input type="text" id="password" class="fadeIn third" name="login" placeholder="senha">
<input type="submit" class="fadeIn fourth" style="font-weight:bold;" value="Entrar">
</form>
<!-- Cadastro -->
<div id="formFooter">
<a class="underlineHover" href="/pessoas/cadastro">Ainda não é cadastrado? Clique aqui</a>
</div>
</div>
<div id="formContent">
<h1>Login</h1>
<h2>Logado: {{loggedIn}}</h2>
<!-- Login Form -->
<form>
<input
type="text"
id="login"
class="fadeIn second"
name="login"
placeholder="usuário"
v-model="user.username"
/>
<input
type="password"
id="password"
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>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
name : "Login" ,
name: "Login",
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>
<style>
......@@ -33,9 +72,9 @@ export default {
margin-top: 150px;
}
h1{
padding: 10px;
}
h1 {
padding: 10px;
}
body {
font-family: "Poppins", sans-serif;
......@@ -45,7 +84,7 @@ body {
a {
color: #56555e;
display:inline-block;
display: inline-block;
text-decoration: none;
font-weight: 400;
}
......@@ -55,15 +94,15 @@ h2 {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
display: inline-block;
margin: 40px 8px 10px 8px;
color: #cccccc;
}
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
......@@ -102,7 +141,9 @@ h2.active {
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;
border: none;
color: white;
......@@ -124,11 +165,15 @@ input[type=button], input[type=submit], input[type=reset] {
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;
}
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);
-webkit-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
transform: scale(0.95);
}
input[type=text] {
input[type="password"],
input[type="text"] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
......@@ -157,18 +203,16 @@ input[type=text] {
border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus {
input[type="text"]:focus {
background-color: #fff;
border-bottom: 2px solid #9bb694;
}
input[type=text]:placeholder {
input[type="text"]:placeholder {
color: #cccccc;
}
*:focus {
outline: none;
}
outline: none;
}
</style>
\ No newline at end of file
......@@ -6,7 +6,9 @@ import 'bootstrap/dist/css/bootstrap.css'
// import 'bootstrap-vue/dist/bootstrap-vue.css'
import VueRouter from 'vue-router'
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'
......@@ -30,5 +32,6 @@ Vue.use(VueRouter);
new Vue({
router,
store,
render: h => h(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'
import PessoaCreate from '../components/Pessoa/Create.vue'
import ServicoList from '../components/Servico/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';
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: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
/* -webkit-box-shadow: 0 10px 30px 0 #9bb694; */
/* box-shadow: 0 10px 30px 0 #9bb694; */
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-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 {
background-color: #868686;
}
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
input[type="text"] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type="text"]:focus {
background-color: #fff;
border-bottom: 2px solid #9bb694;
}
input[type="text"]:placeholder {
color: #cccccc;
}
*:focus {
outline: none;
}
</style>
\ No newline at end of file
File mode changed from 100644 to 100755
{
"name": "@nuxt/opencollective",
"version": "0.3.2",
"repository": "nuxt-contrib/opencollective",
"license": "MIT",
"main": "dist/index.js",
"bin": "bin/opencollective.js",
"files": [
"bin",
"dist"
"_args": [
[
"@nuxt/opencollective@0.3.2",
"/home/amandazk/Documents/projeto-IFC"
]
],
"scripts": {