front_foundation #5
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
.env
|
||||
.idea
|
||||
keycloak/CAS/target
|
||||
docker-compose.yaml
|
||||
|
||||
8
Makefile
8
Makefile
@ -3,7 +3,7 @@ help:
|
||||
|
||||
clean:
|
||||
@cp config/prod.docker-compose.yaml docker-compose.yaml
|
||||
@docker compose down 2> /dev/null
|
||||
@docker compose down
|
||||
@rm -f docker-compose.yaml
|
||||
@rm -f .env
|
||||
@rm -f front/MyINPulse-front/.env
|
||||
@ -21,14 +21,14 @@ dev-front: clean vite
|
||||
@cp config/frontdev.front.env front/MyINPulse-front/.env
|
||||
@cp config/frontdev.main.env .env
|
||||
@cp config/frontdev.docker-compose.yaml docker-compose.yaml
|
||||
@docker compose up -d
|
||||
@docker compose up -d --build
|
||||
@cd ./front/MyINPulse-front/ && npm run dev
|
||||
|
||||
prod: clean
|
||||
@cp config/prod.front.env front/MyINPulse-front/.env
|
||||
@cp config/prod.main.env .env
|
||||
@cp config/frontdev.docker-compose.yaml docker-compose.yaml
|
||||
@docker compose up -d
|
||||
@docker compose up -d --build
|
||||
|
||||
|
||||
|
||||
@ -36,6 +36,6 @@ dev-back:
|
||||
@cp config/backdev.front.env front/MyINPulse-front/.env
|
||||
@cp config/backdev.main.env .env
|
||||
@cp config/backdev.docker-compose.yaml docker-compose.yaml
|
||||
@docker compose up -d
|
||||
@docker compose up -d --build
|
||||
@echo "cd MyINPulse-back"
|
||||
@echo "./gradlew bootRun --args='--server.port=8081'"
|
||||
@ -1,22 +1,22 @@
|
||||
package enseirb.myinpulse;
|
||||
|
||||
import enseirb.myinpulse.security.KeycloakJwtRolesConverter;
|
||||
import org.springframework.boot.SpringApplication;
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.security.config.Customizer;
|
||||
import org.springframework.core.convert.converter.Converter;
|
||||
import org.springframework.security.authentication.AbstractAuthenticationToken;
|
||||
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
|
||||
import org.springframework.security.config.annotation.web.builders.WebSecurity;
|
||||
import org.springframework.security.config.annotation.web.configurers.LogoutConfigurer;
|
||||
import org.springframework.security.oauth2.jwt.*;
|
||||
import org.springframework.security.web.SecurityFilterChain;
|
||||
import org.springframework.web.cors.CorsConfiguration;
|
||||
import org.springframework.web.cors.CorsConfigurationSource;
|
||||
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
|
||||
import org.springframework.web.servlet.config.annotation.CorsRegistry;
|
||||
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
|
||||
|
||||
import java.util.Arrays;
|
||||
import java.util.*;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
import static org.springframework.security.oauth2.core.authorization.OAuth2AuthorizationManagers.hasScope;
|
||||
import static org.springframework.security.authorization.AuthorityAuthorizationManager.hasRole;
|
||||
|
||||
@SpringBootApplication
|
||||
public class MyinpulseApplication {
|
||||
@ -25,34 +25,5 @@ public class MyinpulseApplication {
|
||||
SpringApplication.run(MyinpulseApplication.class, args);
|
||||
}
|
||||
|
||||
// CORS configuration
|
||||
// TODO: make sure to only accept our own domains
|
||||
@Bean
|
||||
public CorsConfigurationSource corsConfigurationSource() {
|
||||
CorsConfiguration configuration = new CorsConfiguration();
|
||||
configuration.setAllowedOrigins(Arrays.asList("*"));
|
||||
configuration.setAllowedMethods(Arrays.asList("GET", "OPTIONS"));
|
||||
configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type",
|
||||
"x-auth-token")); // Do not remove, this fixes the CORS errors when unauthenticated
|
||||
//configuration.setExposedHeaders(Arrays.asList("x-auth-token"));
|
||||
UrlBasedCorsConfigurationSource source = new
|
||||
UrlBasedCorsConfigurationSource();
|
||||
source.registerCorsConfiguration("/**", configuration);
|
||||
|
||||
return source;
|
||||
}
|
||||
|
||||
// TODO: add unauthenticated endpoint with server status
|
||||
@Bean
|
||||
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
|
||||
http
|
||||
.authorizeHttpRequests(authorize -> authorize
|
||||
.requestMatchers("/random2").access(hasScope("contacts"))
|
||||
.requestMatchers("/getUserInfo").access(hasScope("messages"))
|
||||
.anyRequest().authenticated()
|
||||
)
|
||||
.oauth2ResourceServer((oauth2) -> oauth2.jwt(Customizer.withDefaults()));
|
||||
return http.build();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
package enseirb.myinpulse.config;
|
||||
|
||||
import enseirb.myinpulse.security.KeycloakJwtRolesConverter;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
|
||||
import org.springframework.security.web.SecurityFilterChain;
|
||||
import org.springframework.web.cors.CorsConfiguration;
|
||||
import org.springframework.web.cors.CorsConfigurationSource;
|
||||
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
|
||||
|
||||
import java.util.Arrays;
|
||||
import java.util.List;
|
||||
|
||||
import static org.springframework.security.authorization.AuthorityAuthorizationManager.hasRole;
|
||||
|
||||
@Configuration
|
||||
public class WebSecurityCustomConfiguration {
|
||||
// CORS configuration
|
||||
// TODO: make sure to only accept our own domains
|
||||
@Bean
|
||||
public CorsConfigurationSource corsConfigurationSource() {
|
||||
CorsConfiguration configuration = new CorsConfiguration();
|
||||
configuration.setAllowedOrigins(List.of("*"));
|
||||
configuration.setAllowedMethods(Arrays.asList("GET", "OPTIONS"));
|
||||
configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type",
|
||||
"x-auth-token")); // Do not remove, this fixes the CORS errors when unauthenticated
|
||||
UrlBasedCorsConfigurationSource source = new
|
||||
UrlBasedCorsConfigurationSource();
|
||||
source.registerCorsConfiguration("/**", configuration);
|
||||
|
||||
return source;
|
||||
}
|
||||
|
||||
@Bean
|
||||
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
|
||||
http
|
||||
.authorizeHttpRequests(authorize -> authorize
|
||||
.requestMatchers("/random2").access(hasRole("REALM_MyINPulse-entrepreneur"))
|
||||
.requestMatchers("/random").access(hasRole("REALM_MyINPulse-admin"))
|
||||
.requestMatchers("/random3").permitAll()
|
||||
.anyRequest().authenticated()
|
||||
)
|
||||
.oauth2ResourceServer(oauth2 -> oauth2
|
||||
.jwt(jwt -> jwt.
|
||||
jwtAuthenticationConverter(new KeycloakJwtRolesConverter())));
|
||||
return http.build();
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
package enseirb.myinpulse.security;
|
||||
|
||||
import org.springframework.core.convert.converter.Converter;
|
||||
import org.springframework.security.authentication.AbstractAuthenticationToken;
|
||||
import org.springframework.security.core.GrantedAuthority;
|
||||
import org.springframework.security.core.authority.SimpleGrantedAuthority;
|
||||
import org.springframework.security.oauth2.jwt.Jwt;
|
||||
import org.springframework.security.oauth2.server.resource.authentication.JwtAuthenticationToken;
|
||||
import org.springframework.security.oauth2.server.resource.authentication.JwtGrantedAuthoritiesConverter;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.Collection;
|
||||
import java.util.Map;
|
||||
import java.util.stream.Collectors;
|
||||
import java.util.stream.Stream;
|
||||
|
||||
import static java.util.stream.Collectors.toSet;
|
||||
|
||||
|
||||
public class KeycloakJwtRolesConverter implements Converter<Jwt, AbstractAuthenticationToken> {
|
||||
/**
|
||||
* Prefix used for realm level roles.
|
||||
*/
|
||||
public static final String PREFIX_REALM_ROLE = "ROLE_REALM_";
|
||||
/**
|
||||
* Prefix used in combination with the resource (client) name for resource level roles.
|
||||
*/
|
||||
public static final String PREFIX_RESOURCE_ROLE = "ROLE_";
|
||||
|
||||
/**
|
||||
* Name of the claim containing the realm level roles
|
||||
*/
|
||||
private static final String CLAIM_REALM_ACCESS = "realm_access";
|
||||
/**
|
||||
* Name of the claim containing the resources (clients) the user has access to.
|
||||
*/
|
||||
private static final String CLAIM_RESOURCE_ACCESS = "resource_access";
|
||||
/**
|
||||
* Name of the claim containing roles. (Applicable to realm and resource level.)
|
||||
*/
|
||||
private static final String CLAIM_ROLES = "roles";
|
||||
|
||||
@Override
|
||||
public AbstractAuthenticationToken convert(Jwt source)
|
||||
{
|
||||
return new JwtAuthenticationToken(source, Stream.concat(new JwtGrantedAuthoritiesConverter().convert(source)
|
||||
.stream(), TEMPORARNAME(source).stream())
|
||||
.collect(toSet()));
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts the realm and resource level roles from a JWT token distinguishing between them using prefixes.
|
||||
*/
|
||||
public Collection<GrantedAuthority> TEMPORARNAME(Jwt jwt) {
|
||||
// Collection that will hold the extracted roles
|
||||
Collection<GrantedAuthority> grantedAuthorities = new ArrayList<>();
|
||||
|
||||
// Realm roles
|
||||
// Get the part of the access token that holds the roles assigned on realm level
|
||||
Map<String, Collection<String>> realmAccess = jwt.getClaim(CLAIM_REALM_ACCESS);
|
||||
|
||||
// Verify that the claim exists and is not empty
|
||||
if (realmAccess != null && !realmAccess.isEmpty()) {
|
||||
// From the realm_access claim get the roles
|
||||
Collection<String> roles = realmAccess.get(CLAIM_ROLES);
|
||||
// Check if any roles are present
|
||||
if (roles != null && !roles.isEmpty()) {
|
||||
// Iterate of the roles and add them to the granted authorities
|
||||
Collection<GrantedAuthority> realmRoles = roles.stream()
|
||||
// Prefix all realm roles with "ROLE_realm_"
|
||||
.map(role -> new SimpleGrantedAuthority(PREFIX_REALM_ROLE + role))
|
||||
.collect(Collectors.toList());
|
||||
grantedAuthorities.addAll(realmRoles);
|
||||
}
|
||||
}
|
||||
|
||||
// Resource (client) roles
|
||||
// A user might have access to multiple resources all containing their own roles. Therefore, it is a map of
|
||||
// resource each possibly containing a "roles" property.
|
||||
Map<String, Map<String, Collection<String>>> resourceAccess = jwt.getClaim(CLAIM_RESOURCE_ACCESS);
|
||||
|
||||
// Check if resources are assigned
|
||||
if (resourceAccess != null && !resourceAccess.isEmpty()) {
|
||||
// Iterate of all the resources
|
||||
resourceAccess.forEach((resource, resourceClaims) -> {
|
||||
// Iterate of the "roles" claim inside the resource claims
|
||||
resourceClaims.get(CLAIM_ROLES).forEach(
|
||||
// Add the role to the granted authority prefixed with ROLE_ and the name of the resource
|
||||
role -> grantedAuthorities.add(new SimpleGrantedAuthority(PREFIX_RESOURCE_ROLE + resource + "_" + role))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return grantedAuthorities;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
spring.application.name=myinpulse
|
||||
spring.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:7080/realms/test/protocol/openid-connect/certs
|
||||
spring.security.oauth2.resourceserver.jwt.issuer-uri=http://localhost:7080/realms/test
|
||||
logging.level.org.springframework.security=DEBUG
|
||||
|
||||
@ -2,3 +2,4 @@ VITE_KEYCLOAK_URL=http://localhost:7080
|
||||
VITE_KEYCLOAK_CLIENT_ID=myinpulse
|
||||
VITE_KEYCLOAK_REALM=test
|
||||
VITE_APP_URL=http://localhost:8080
|
||||
VITE_BACKEND_URL=http://localhost:8081/
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
VITE_KEYCLOAK_URL=http://localhost:7080
|
||||
VITE_KEYCLOAK_CLIENT_ID=myinpulse
|
||||
VITE_KEYCLOAK_CLIENT_ID=myinpulse-dev
|
||||
VITE_KEYCLOAK_REALM=test
|
||||
VITE_APP_URL=http://localhost:5173
|
||||
VITE_BACKEND_URL=http://localhost:8081/
|
||||
|
||||
@ -2,3 +2,4 @@ VITE_KEYCLOAK_URL=https://0549cd63f912d5dc9b31278d6f.eirb.fr
|
||||
VITE_KEYCLOAK_CLIENT_ID=myinpulse-eirb
|
||||
VITE_KEYCLOAK_REALM=test
|
||||
VITE_APP_URL=https://0549cd63f912d5dc9b31278d6f.piair.dev
|
||||
VITE_BACKEND_URL=http://TODO/
|
||||
|
||||
@ -4,11 +4,12 @@ import HelloWorld from './components/HelloWorld.vue'
|
||||
import Header from './components/Header.vue';
|
||||
import ProjectComp from './components/Project-comp.vue';
|
||||
import CanvasView from './components/canvas/Lean-canvas.vue';
|
||||
import ErrorWrapper from "@/views/errorWrapper.vue";
|
||||
</script>
|
||||
|
||||
|
|
||||
<template>
|
||||
piair
commented
Vous êtes sur qu'il faut laisser ça, je pense que ça devrait être inclus dans RouterView Vous êtes sur qu'il faut laisser ça, je pense que ça devrait être inclus dans RouterView
|
||||
<RouterView />
|
||||
<Header />
|
||||
<error-wrapper></error-wrapper>
|
||||
<div id="main">
|
||||
<ProjectComp
|
||||
v-for="(project, index) in projects"
|
||||
@ -19,6 +20,7 @@ import CanvasView from './components/canvas/Lean-canvas.vue';
|
||||
<div id="canvas">
|
||||
<button @click="$router.push('/canvas')">Voir Canvas</button>
|
||||
</div>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -41,6 +43,9 @@ button:hover {
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import Header from "@/components/Header.vue";
|
||||
import ProjectComp from "@/components/Project-comp.vue";
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,94 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vite</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
front/MyINPulse-front/src/components/errorModal.vue
Normal file
94
front/MyINPulse-front/src/components/errorModal.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['data']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class='["red", "yellow", "blue", "green"][data.type]' class="error-modal">
|
||||
<p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
|
||||
<p>{{data.errorMessage}}</p>
|
||||
<div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.error-modal{
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
animation: disappear 5s linear forwards;
|
||||
}
|
||||
|
||||
.red{
|
||||
background-color: #ee6055;
|
||||
color: white;
|
||||
}
|
||||
.red-loader {
|
||||
background-color: #fa8383;
|
||||
}
|
||||
|
||||
.yellow{
|
||||
background-color: #FF9D23;
|
||||
color: white;
|
||||
}
|
||||
.yellow-loader{
|
||||
background-color: #ffbf81;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #809bce;
|
||||
color: white;
|
||||
}
|
||||
.blue-loader{
|
||||
background-color: #95b8d1;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
.green-loader {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
.loading {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1em;
|
||||
width: 0;
|
||||
animation: loading 4s linear forwards;
|
||||
}
|
||||
|
||||
/* Animation for the loading bar */
|
||||
@keyframes loading {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes disappear {
|
||||
0% {
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
}
|
||||
80% {
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,19 +0,0 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,26 +0,0 @@
|
||||
import axios from "axios";
|
||||
|
||||
const backendUrl = "http://localhost:8080/"
|
||||
|
||||
// TODO: spawn a error modal
|
||||
function defaultApiErrorHandler(err: String){
|
||||
console.log(err)
|
||||
}
|
||||
|
||||
function defaultApiSuccessHandler(response: () => void){
|
||||
console.log(response)
|
||||
}
|
||||
/*
|
||||
function callApi(endpoint: string, onSuccessHandler: () => void, onErrorHandler: (err: String) => void): void {
|
||||
console.log("callApi: "+ endpoint)
|
||||
axios.get(backendUrl + endpoint).then(
|
||||
onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
|
||||
).catch(
|
||||
(err) => {
|
||||
onErrorHandler == null ? defaultApiErrorHandler(err): onErrorHandler(err);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
export {callApi}
|
||||
*/
|
||||
@ -1,27 +1,31 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
//import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
|
||||
//import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
|
||||
//import axios from 'axios'
|
||||
import router from './router/router.ts'
|
||||
import {createPinia} from "pinia";
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
||||
import AuthStorePlugin from './plugins/authStore';
|
||||
import keycloakService from './services/keycloak';
|
||||
import {useAuthStore} from "@/stores/authStore.ts";
|
||||
let store: any;
|
||||
|
||||
keycloakService.CallInit(() => {
|
||||
|
||||
try {
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
// Setup pinia store, allowing user to keep logged in status after refresh
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
|
||||
app.use(pinia);
|
||||
app.use(AuthStorePlugin, { pinia });
|
||||
store = useAuthStore();
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app');
|
||||
} catch (e) {
|
||||
console.error("Error while initiating Keycloak.")
|
||||
console.error(e)
|
||||
createApp(App).mount('#app');
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
@ -68,3 +72,6 @@ app.use(VueKeyCloak,{
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
export {store};
|
||||
@ -3,21 +3,13 @@ import { createRouter, createWebHistory } from 'vue-router'
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'test',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/Home.vue'),
|
||||
component: () => import('../views/test.vue'),
|
||||
},
|
||||
|
||||
// route pour les canvas (made by adnane), in fact the two vue apps are separated for now
|
||||
@ -1,13 +1,56 @@
|
||||
// file: src/services/api.js
|
||||
|
||||
import axios from "axios";
|
||||
import {store} from "@/main.ts";
|
||||
import {addNewMessage, color} from "@/services/popupDisplayer.ts";
|
||||
|
||||
// Creating an instance for axios to be used by the token interceptor service
|
||||
const instance = axios.create({
|
||||
baseURL: `${import.meta.env.VITE_BE_API_URL}/api`,
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: import.meta.env.VITE_BACKEND_URL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
export default instance;
|
||||
axiosInstance.interceptors.response.use(
|
||||
response => response, // Directly return successful responses.
|
||||
async error => {
|
||||
const originalRequest = error.config;
|
||||
if (error.response.status === 401 && !originalRequest._retry && store.authenticated) {
|
||||
originalRequest._retry = true; // Mark the request as retried to avoid infinite loops.
|
||||
try {
|
||||
await store.refreshUserToken();
|
||||
// Update the authorization header with the new access token.
|
||||
axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${store.user.token}`;
|
||||
return axiosInstance(originalRequest); // Retry the original request with the new access token.
|
||||
} catch (refreshError) {
|
||||
// Handle refresh token errors by clearing stored tokens and redirecting to the login page.
|
||||
console.error('Token refresh failed:', refreshError);
|
||||
localStorage.removeItem('accessToken');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/login';
|
||||
return Promise.reject(refreshError);
|
||||
}
|
||||
}
|
||||
return Promise.reject(error); // For all other errors, return the error as is.
|
||||
}
|
||||
);
|
||||
|
||||
// TODO: spawn a error modal
|
||||
function defaultApiErrorHandler(err: string){
|
||||
addNewMessage(err, color.Red);
|
||||
}
|
||||
|
||||
function defaultApiSuccessHandler(response: any){
|
||||
addNewMessage(response.data, color.green)
|
||||
}
|
||||
function callApi(endpoint: string, onSuccessHandler?: any, onErrorHandler?: any): void {
|
||||
axiosInstance.get(endpoint).then(
|
||||
onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
|
||||
).catch(
|
||||
(err) => {
|
||||
onErrorHandler == null ? defaultApiErrorHandler(err): onErrorHandler(err);
|
||||
throw err;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export {callApi}
|
||||
19
front/MyINPulse-front/src/services/popupDisplayer.ts
Normal file
19
front/MyINPulse-front/src/services/popupDisplayer.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import {ref} from "vue";
|
||||
enum color {Red, Yellow, Blue, green}
|
||||
|
||||
function addNewMessage(errorMessage: string, type?: color, timeout?: number){
|
||||
if (timeout == null){
|
||||
timeout = 5000;
|
||||
}
|
||||
if (type == null){
|
||||
type = color.Red;
|
||||
}
|
||||
|
||||
const data = {errorMessage: errorMessage, timeout: timeout, type: type, uid: Math.random()*100000};
|
||||
errorList.value.push(data)
|
||||
setTimeout(() => errorList.value.slice(0, 1), timeout)
|
||||
}
|
||||
|
||||
const errorList: any= ref([])
|
||||
|
||||
export {addNewMessage, errorList, color}
|
||||
@ -1,32 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: "errorModal",
|
||||
props: {
|
||||
error: String
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="error">
|
||||
<p>Erreur :(</p>
|
||||
<p>{{error}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.error{
|
||||
background-color: darkred;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
border-radius: 0.5em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
22
front/MyINPulse-front/src/views/errorWrapper.vue
Normal file
22
front/MyINPulse-front/src/views/errorWrapper.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import {errorList} from "@/services/popupDisplayer.ts";
|
||||
import ErrorModal from "@/components/errorModal.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="error-wrapper">
|
||||
<error-modal v-for="elm in errorList" :data=elm></error-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.error-wrapper{
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
//background-color: blue;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import {useAuthStore} from "@/stores/authStore";
|
||||
import {store} from "../main.ts";
|
||||
import {callApi} from "@/services/api.ts";
|
||||
import ErrorModal from "@/components/errorModal.vue";
|
||||
import {errorList} from "@/services/popupDisplayer.ts";
|
||||
import TempModal from "@/components/temp-modal.vue";
|
||||
import ErrorWrapper from "@/App.vue";
|
||||
function addResToTable(id: any){
|
||||
return (req: any) => {
|
||||
console.log(req)
|
||||
}
|
||||
}
|
||||
|
||||
const store = useAuthStore()
|
||||
|
||||
</script>
|
||||
|
||||
@ -26,19 +35,26 @@ const store = useAuthStore()
|
||||
<td>{{store.user.refreshToken}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unauthenticated API call</td>
|
||||
<td><button>call</button></td>
|
||||
<td>Entrepreneur API call</td>
|
||||
<td><button @click="callApi('random')">call</button></td>
|
||||
<td>res</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Authenticated API call</td>
|
||||
<td><button>call</button></td>
|
||||
<td>Admin API call</td>
|
||||
<td><button @click="callApi('random2')">call</button></td>
|
||||
<td>res</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unauth API call</td>
|
||||
<td><button @click="callApi('random3')">call</button></td>
|
||||
<td>res</td>
|
||||
<td id="3"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<temp-modal></temp-modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
Loading…
x
Reference in New Issue
Block a user
Il faut laisser ça, cela permet d'afficher les messages d'erreurs par desssus le contenu.