OneTeam/don_confiao_frontend
16
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 8 Wiki Activity

#29 refactor: replace admin code with role-based auth using Pinia

Browse Source
This commit is contained in:
mono
2026-03-14 22:55:24 -05:00
parent 2c9ea4b871
commit 786d0551bb
12 changed files with 105 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/CodeDialog.vue
View File

@@ -1,51 +0,0 @@
<template>
<v-dialog v-model="dialog" persistent>
<v-card>
<v-card-title>
Ingrese el código
</v-card-title>
<v-card-text>
<v-form id="code-form" @submit.prevent="verifyCode">
<v-text-field v-model="code" label="Código" type="password" autocomplete="off" />
</v-form>
</v-card-text>
<v-card-actions>
<v-btn type="submit" form="code-form" color="green">Aceptar</v-btn>
<v-btn :to="{ path: '/' }" color="red">Cancelar</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import { inject } from 'vue';
export default {
data() {
return {
api: inject('api'),
dialog: true,
code: '',
};
},
methods: {
verifyCode() {
this.api.isValidAdminCode(this.code)
.then(data => {
if (data['validCode']) {
this.$emit('code-verified', true);
this.dialog = false;
} else {
alert('Código incorrecto');
this.$emit('code-verified', false);
}
})
.catch(error => {
alert('Error al validar el código');
this.$emit('code-verified', false);
console.error(error);
});
}
},
}
</script>

23
src/components/NavBar.vue
View File

@@ -79,9 +79,14 @@
<script> <script>
import trytonIcon from '../assets/icons/tryton-icon.svg'; import trytonIcon from '../assets/icons/tryton-icon.svg';
import AuthService from '@/services/auth'; import AuthService from '@/services/auth';
import { useAuthStore } from '@/stores/auth';
import { inject } from 'vue'; import { inject } from 'vue';
export default { export default {
name: 'NavBar', name: 'NavBar',
setup() {
const authStore = useAuthStore();
return { authStore };
},
data: () => ({ data: () => ({
drawer: false, drawer: false,
group: null, group: null,
@@ -129,13 +134,14 @@
checkAuth() { checkAuth() {
this.isAuthenticated = AuthService.isAuthenticated(); this.isAuthenticated = AuthService.isAuthenticated();
}, },
async fetchUser() { async fetchUser() {
try { try {
this.user = await this.api.getCurrentUser(); this.user = await this.api.getCurrentUser();
} catch (error) { this.authStore.setUser(this.user);
console.error('Error fetching user:', error); } catch (error) {
} console.error('Error fetching user:', error);
}, }
},
navigate(route) { navigate(route) {
this.$router.push(route); this.$router.push(route);
}, },
@@ -146,10 +152,11 @@
toggleAdminMenu() { toggleAdminMenu() {
this.showAdminMenu = !this.showAdminMenu; this.showAdminMenu = !this.showAdminMenu;
}, },
logout() { logout() {
AuthService.logout(); AuthService.logout();
this.isAuthenticated = false; this.isAuthenticated = false;
this.user = null; this.user = null;
this.authStore.clearUser();
this.$router.push('/'); this.$router.push('/');
}, },
} }

19
src/pages/compra_admin.vue
View File

@@ -1,20 +1,19 @@
<template> <template>
<div> <AdminPurchase v-if="authStore.isAdmin"/>
<CodeDialog @code-verified="(verified) => showComponent = verified"/>
</div>
<AdminPurchase v-if="showComponent"/>
</template> </template>
<script > <script >
import CodeDialog from '../components/CodeDialog.vue' import { useAuthStore } from '@/stores/auth';
export default { export default {
data() { setup() {
return { const authStore = useAuthStore();
showComponent: false, return { authStore };
},
mounted() {
if (!this.authStore.isAdmin) {
this.$router.push('/');
} }
}, },
components: { CodeDialog },
methods: {},
} }
</script> </script>

19
src/pages/cuadrar_tarro.vue
View File

@@ -1,20 +1,19 @@
<template> <template>
<div> <ReconciliationJar v-if="authStore.isAdmin" />
<CodeDialog @code-verified="(verified) => showComponent = verified"/>
</div>
<ReconciliationJar v-if="showComponent" />
</template> </template>
<script > <script >
import CodeDialog from '../components/CodeDialog.vue' import { useAuthStore } from '@/stores/auth';
export default { export default {
data() { setup() {
return { const authStore = useAuthStore();
showComponent: false, return { authStore };
},
mounted() {
if (!this.authStore.isAdmin) {
this.$router.push('/');
} }
}, },
components: { CodeDialog },
methods: {},
} }
</script> </script>

19
src/pages/cuadres_de_tarro.vue
View File

@@ -1,20 +1,19 @@
<template> <template>
<div> <ReconciliationJarIndex v-if="authStore.isAdmin" />
<CodeDialog @code-verified="(verified) => showComponent = verified" />
</div>
<ReconciliationJarIndex v-if="showComponent" />
</template> </template>
<script> <script>
import CodeDialog from '../components/CodeDialog.vue' import { useAuthStore } from '@/stores/auth';
export default { export default {
data() { setup() {
return { const authStore = useAuthStore();
showComponent: false, return { authStore };
},
mounted() {
if (!this.authStore.isAdmin) {
this.$router.push('/');
} }
}, },
components: { CodeDialog },
methods: {},
} }
</script> </script>

20
src/pages/sincronizar_clientes_tryton.vue
View File

@@ -1,8 +1,5 @@
<template> <template>
<div> <v-container v-if="authStore.isAdmin" class="fill-height d-flex align-center justify-center">
<CodeDialog @code-verified="(verified) => showComponent = verified"/>
</div>
<v-container class="fill-height d-flex align-center justify-center">
<v-card class="pa-6" max-width="600" elevation="4"> <v-card class="pa-6" max-width="600" elevation="4">
<v-card-title class="text-h5 font-weight-bold text-center"> <v-card-title class="text-h5 font-weight-bold text-center">
🔄 Sincronización de Clientes 🔄 Sincronización de Clientes
@@ -44,11 +41,15 @@
</template> </template>
<script> <script>
import CodeDialog from '../components/CodeDialog.vue' import { useAuthStore } from '@/stores/auth';
import { inject } from 'vue'; import { inject } from 'vue';
export default { export default {
name: 'CustomersFromTryton', name: 'CustomersFromTryton',
setup() {
const authStore = useAuthStore();
return { authStore };
},
data() { data() {
return { return {
api: inject('api'), api: inject('api'),
@@ -59,21 +60,24 @@
updated_customers: [], updated_customers: [],
} }
}, },
mounted() {
if (!this.authStore.isAdmin) {
this.$router.push('/');
}
},
methods: { methods: {
startSync() { startSync() {
this.api.getCustomersFromTryton() this.api.getCustomersFromTryton()
.then(response => { .then(response => {
// Manejar la respuesta exitosa
this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id })); this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id }));
this.created_customers = response.created_customers.map(id => ({ id })); this.created_customers = response.created_customers.map(id => ({ id }));
this.failed_parties = response.failed_parties.map(id => ({ id })); this.failed_parties = response.failed_parties.map(id => ({ id }));
this.untouched_customers = response.untouched_customers.map(id => ({ id })); this.untouched_customers = response.untouched_customers.map(id => ({ id }));
}) })
.catch(error => { .catch(error => {
// Manejar el error
console.error("Error al sincronizar clientes:", error); console.error("Error al sincronizar clientes:", error);
}); });
} }
} }
} }
</script> </script>

19
src/pages/sincronizar_productos_tryton.vue
View File

@@ -1,8 +1,5 @@
<template> <template>
<div> <v-container v-if="authStore.isAdmin" class="fill-height d-flex align-center justify-center">
<CodeDialog @code-verified="(verified) => showComponent = verified"/>
</div>
<v-container class="fill-height d-flex align-center justify-center">
<v-card class="pa-6" max-width="600" elevation="4"> <v-card class="pa-6" max-width="600" elevation="4">
<v-card-title class="text-h5 font-weight-bold text-center"> <v-card-title class="text-h5 font-weight-bold text-center">
🔄 Sincronización de Productos 🔄 Sincronización de Productos
@@ -39,16 +36,24 @@
</template> </template>
<script> <script>
import CodeDialog from '../components/CodeDialog.vue' import { useAuthStore } from '@/stores/auth';
import { inject } from 'vue'; import { inject } from 'vue';
export default { export default {
name: 'ProductsFromTryton', name: 'ProductsFromTryton',
setup() {
const authStore = useAuthStore();
return { authStore };
},
data() { data() {
return { return {
api: inject('api'), api: inject('api'),
productos_tryton: [{}], productos_tryton: [{}],
showComponent: false, }
},
mounted() {
if (!this.authStore.isAdmin) {
this.$router.push('/');
} }
}, },
methods: { methods: {
@@ -57,4 +62,4 @@
} }
} }
} }
</script> </script>

17
src/pages/sincronizar_ventas_tryton.vue
View File

@@ -1,8 +1,5 @@
<template> <template>
<div> <v-container v-if="authStore.isAdmin" class="fill-height d-flex align-center justify-center">
<CodeDialog @code-verified="(verified) => showComponent = verified"/>
</div>
<v-container class="fill-height d-flex align-center justify-center">
<v-card class="pa-6" max-width="600" elevation="4"> <v-card class="pa-6" max-width="600" elevation="4">
<v-card-title class="text-h5 font-weight-bold text-center"> <v-card-title class="text-h5 font-weight-bold text-center">
🔄 Sincronización de Ventas 🔄 Sincronización de Ventas
@@ -35,16 +32,24 @@
</v-container> </v-container>
</template> </template>
<script> <script>
import CodeDialog from '../components/CodeDialog.vue'; import { useAuthStore } from '@/stores/auth';
import { inject } from 'vue'; import { inject } from 'vue';
export default { export default {
name: 'SalesToTryton', name: 'SalesToTryton',
setup() {
const authStore = useAuthStore();
return { authStore };
},
data() { data() {
return { return {
api: inject('api'), api: inject('api'),
ventas_tryton: [], ventas_tryton: [],
showComponent: false, }
},
mounted() {
if (!this.authStore.isAdmin) {
this.$router.push('/');
} }
}, },
methods: { methods: {

19
src/pages/ventas_para_tryton.vue
View File

@@ -1,19 +1,18 @@
<template> <template>
<div> <ExportPurchasesForTryton v-if="authStore.isAdmin" />
<CodeDialog @code-verified="(verified) => showComponent = verified"/>
</div>
<ExportPurchasesForTryton v-if="showComponent" />
</template> </template>
<script> <script>
import CodeDialog from '../components/CodeDialog.vue' import { useAuthStore } from '@/stores/auth';
export default { export default {
data() { setup() {
return { const authStore = useAuthStore();
showComponent: false, return { authStore };
},
mounted() {
if (!this.authStore.isAdmin) {
this.$router.push('/');
} }
}, },
components: { CodeDialog },
methods: {},
} }
</script> </script>

4
src/services/api.js
View File

@@ -31,10 +31,6 @@ class Api {
return this.apiImplementation.getReconciliation(reconciliationId); return this.apiImplementation.getReconciliation(reconciliationId);
} }
isValidAdminCode(code) {
return this.apiImplementation.isValidAdminCode(code);
}
createPurchase(purchase) { createPurchase(purchase) {
return this.apiImplementation.createPurchase(purchase); return this.apiImplementation.createPurchase(purchase);
} }

5
src/services/django-api.js
View File

@@ -49,11 +49,6 @@ class DjangoApi {
return this.getRequest(url); return this.getRequest(url);
} }
isValidAdminCode(code) {
const url = this.base + `/don_confiao/api/admin_code/validate/${code}`
return this.getRequest(url)
}
createPurchase(purchase) { createPurchase(purchase) {
const url = this.base + '/don_confiao/api/sales/'; const url = this.base + '/don_confiao/api/sales/';
return this.postRequest(url, purchase); return this.postRequest(url, purchase);

19
src/stores/auth.js Normal file
View File

@@ -0,0 +1,19 @@
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null
}),
getters: {
isAdmin: (state) => state.user?.role === 'administrator',
isAuthenticated: (state) => !!state.user
},
actions: {
setUser(user) {
this.user = user
},
clearUser() {
this.user = null
}
}
})