Skip to content

Commit

Permalink
Merge pull request #77 from abes-esr/ITEM-85-Migrer-le-composant-de-m…
Browse files Browse the repository at this point in the history
…odification-de-l'adresse-mail-(2)---modifier-le-résumé-Migrer-le-composant-de-modification-de-l'adresse-mail-(2)

Item 85 migrer le composant de modification de l'adresse mail (2)   modifier le résumé migrer le composant de modification de l'adresse mail (2)
  • Loading branch information
pierre-maraval authored Jun 24, 2024
2 parents e68ba47 + 8f8632b commit f55d7f8
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 23 deletions.
8 changes: 7 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,16 @@ function liftErrors() {
}
function onLoginSuccess(){
authenticated.value = true
const user = JSON.parse(sessionStorage.getItem('user'));
if( !user.email ){
router.push('premiere-connexion')
} else {
router.push('accueil')
}
}
function onLogout(){
authenticated.value = false
router.push('/identification')
router.push('identification')
}
function checkAuthentication() {
const user = sessionStorage.getItem('user');
Expand Down
93 changes: 93 additions & 0 deletions src/components/Email.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<template>
<v-card class="elevation-5">
<v-card-title style="background-color: #295494; color: white" >
<span v-if="!email">Première connexion</span>
<span v-else>Modifier les informations de votre compte</span>
</v-card-title>
<v-card-text>
<v-form ref="form" class="pt-5">
<span>
Votre adresse mail est obligatoire pour utiliser l'application. Pour ajouter plusieurs adresses mail, séparez-les par des points virgules ;
</span>
<v-text-field
prepend-inner-icon="mdi-email-outline"
class="pt-12"
type="email"
name="email"
id="email"
v-model="emailModel"
:rules="rules"
@keyup.enter="validate()">
</v-text-field>
</v-form>
<v-alert
v-if="messageError"
type="error"
title="Erreur"
:text="messageError"
></v-alert>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="#295494"
variant="flat"
:disabled="isDisabled"
@click="validate()">Valider</v-btn>
</v-card-actions>
</v-card>
</template>
<script setup>
import {onMounted, ref, watch} from 'vue';
import demandesService from '@/service/DemandesService';
const emits = defineEmits(['validate']);
const props = defineProps({
email: {
type: String,
required: true
},
userId: {
type: String,
required: true
}
});
const emailModel = ref();
const isDisabled = ref(true);
const pattern = /^((([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))[;]?)+$/;
const rules = ref([
value => {
if (value) {
isDisabled.value = false;
return true;
}
isDisabled.value = true;
return 'Champ obligatoire.';
},
value => {
if (pattern.test(value)) {
isDisabled.value = false;
return true;
}
isDisabled.value = true;
return 'mail(s) invalide'
}
]);
const messageError = ref();
onMounted(() => {
emailModel.value = props.email;
});
function validate() {
demandesService.modifierEmail(props.userId, emailModel.value)
.then(result => {
emits('validate', result.data.email);
})
.catch(err => {
messageError.value = err.response.data.message;
throw err;
});
}
</script>
36 changes: 21 additions & 15 deletions src/router/index.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,49 @@
import { createRouter, createWebHistory } from 'vue-router';
import Main from '@/views/AppLogin.vue'
import Login from '@/views/Login.vue'
import ExempTable from '@/views/ExempTable.vue'
import ModifTable from '@/views/ModifTable.vue'
import RecouvTable from '@/views/RecouvTable.vue'
import ModifSteps from '@/views/ModifSteps.vue';
import Accueil from '@/views/Accueil.vue';

import ModificationEmail from '@/views/ModificationEmail.vue';
import DemandesService from '@/service/DemandesService'

const service = DemandesService;

const routes = [
{
path: '/',
component: Accueil,
meta: {requiresAuth: true}
meta: { requiresAuth: true }
},
{
path: '/identification',
name: 'identification',
component: Main,
meta: {requiresAuth: false}
component: Login,
meta: { requiresAuth: false }
},
{
path: '/deconnexion',
name: 'deconnexion',
component: Main,
meta: {requiresAuth: true}
component: Login,
meta: { requiresAuth: true }
},
{
path: '/accueil',
name: 'accueil',
component: Accueil,
meta: {requiresAuth: true}
meta: { requiresAuth: true }
},
{
path: '/premiere-connexion',
name: 'premiere-connexion',
component: ModificationEmail,
meta: { requiresAuth: true }
},
{
path: '/modification-adresse-mail',
name: 'modification-adresse-mail',
component: Accueil,
component: ModificationEmail,
meta: {requiresAuth: true}
},
{
Expand Down Expand Up @@ -165,22 +173,20 @@ router.beforeEach(async (to, from, next) => {
if (requiresAuth) {
const user = JSON.parse(sessionStorage.getItem('user'))
const isAuthenticated = user && user.token
console.log(JSON.stringify(sessionStorage))

if (isAuthenticated) {
try {
const valid = await DemandesService.checkToken();
console.log(valid)
const valid = await service.checkToken();
if (valid.data) {
next();
} else {
console.error('Token invalide auprès du serveur')
DemandesService.logout()
next('identification')
service.logout()
next('/identification')
}
} catch (error) {
console.error(error)
DemandesService.logout()
service.logout()
next('/identification');
}
} else {
Expand Down
12 changes: 8 additions & 4 deletions src/service/DemandesService.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import axios from 'axios';

export class DemandesService {

//todo: renommer le service
constructor() {
this.client = axios.create({
baseURL: import.meta.env.VITE_API_URL
Expand All @@ -26,8 +26,7 @@ export class DemandesService {
const url = import.meta.env.VITE_API_URL + `signin`
console.info('appel:' + url)

//NOTE : this.client.post semble provoquer des appels multiples asynchrone (erreurs console)
return axios.post(import.meta.env.VITE_API_URL + `signin`, {username: login, password: password})
this.client.post(`signin`, {username: login, password: password})
.then((response) => {
sessionStorage.setItem('user', JSON.stringify({
login: login,
Expand Down Expand Up @@ -91,7 +90,6 @@ export class DemandesService {
return response
})
.catch((error) => {
console.log(JSON.stringify(error))
if (error.response && error.response.status === 500) {
// Masquer l'erreur 500 dans la console
return Promise.resolve({ status: 500, data: null });
Expand Down Expand Up @@ -121,6 +119,12 @@ export class DemandesService {
console.info('appel: ' + import.meta.env.VITE_API_URL + url);
return this.client.get(url)
}

modifierEmail(id, email){
const config = { headers: {'Content-Type': 'text/plain'} };
return this.client.put(`utilisateurs/${id}`, email, config)
}

}

export default new DemandesService()
4 changes: 1 addition & 3 deletions src/views/AppLogin.vue → src/views/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,8 @@
<script setup>
import {ref} from 'vue'
import DemandesService from '@/service/DemandesService'
import router from "@/router";
const service = DemandesService
const service = DemandesService;
//Emit
const emit = defineEmits(['backendError', 'backendSuccess', 'login-success'])
Expand All @@ -77,7 +76,6 @@ async function login() {
await service.login(userLogin.value, userPassword.value)
emit('backendSuccess')
emit('login-success');
await router.push('/accueil');
}catch(error){
emit('backendError', error);
}
Expand Down
24 changes: 24 additions & 0 deletions src/views/ModificationEmail.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<!-- MODIFICATION DE L'ADRESSE MAIL -->
<v-container class="fill-height" fluid >
<v-row align="center" justify="center">
<v-col md="7">
<email :email="user.email ? user.email : ''" :user-id="user.userNum" @validate="setEmailUser"></email>
</v-col>
</v-row>
</v-container>
</template>

<script setup>
import Email from '@/components/Email.vue';
import { ref } from 'vue';
import router from '@/router';
const user = ref(JSON.parse(sessionStorage.getItem('user')));
function setEmailUser(email){
user.value.email = email;
sessionStorage.setItem('user',JSON.stringify(user.value));
router.push('Accueil');
}
</script>

0 comments on commit f55d7f8

Please sign in to comment.