Compare commits
13 Commits
front
...
c32eea8a40
| Author | SHA1 | Date | |
|---|---|---|---|
| c32eea8a40 | |||
| 30344a60b7 | |||
| 2465545b6b | |||
| 83cbeb7a2e | |||
| 645a10477d | |||
| a859871265 | |||
| 0eab9a8063 | |||
| 1dff7573ff | |||
| 8af40bfe50 | |||
| afa4d34ec8 | |||
| c5fc5b600e | |||
| a4939737fe | |||
| e7ebcc0d3a |
24
.gitea/workflows/front.yaml
Normal file
24
.gitea/workflows/front.yaml
Normal file
@ -0,0 +1,24 @@
|
||||
name: CI
|
||||
on: push
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Install everything
|
||||
working-directory: ./front/MyINPulse-front
|
||||
run: npm i
|
||||
|
||||
- name: Run ESLint
|
||||
working-directory: ./front/MyINPulse-front
|
||||
run: npx eslint
|
||||
|
||||
- name: Run prettier
|
||||
working-directory: ./front/MyINPulse-front
|
||||
run: npx prettier src --check
|
||||
|
||||
- name: Build frontend
|
||||
working-directory: ./front/MyINPulse-front
|
||||
run: npm run build
|
||||
2
front/MyINPulse-front/.gitignore
vendored
2
front/MyINPulse-front/.gitignore
vendored
@ -36,4 +36,4 @@ playwright-report/
|
||||
# Custom
|
||||
|
||||
.installed
|
||||
package-lock.json
|
||||
./package-lock.json
|
||||
7
front/MyINPulse-front/.prettierrc
Normal file
7
front/MyINPulse-front/.prettierrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"useTabs":false,
|
||||
"semi":true,
|
||||
"trailingComma":"es5",
|
||||
"arrowParens":"always",
|
||||
"tabWidth":4
|
||||
}
|
||||
29
front/MyINPulse-front/eslint.config.js
Normal file
29
front/MyINPulse-front/eslint.config.js
Normal file
@ -0,0 +1,29 @@
|
||||
import eslint from "@eslint/js";
|
||||
import eslintConfigPrettier from "eslint-config-prettier";
|
||||
import eslintPluginVue from "eslint-plugin-vue";
|
||||
import globals from "globals";
|
||||
import typescriptEslint from "typescript-eslint";
|
||||
|
||||
export default typescriptEslint.config(
|
||||
{ ignores: ["*.d.ts", "**/coverage", "**/dist"] },
|
||||
{
|
||||
extends: [
|
||||
eslint.configs.recommended,
|
||||
...typescriptEslint.configs.recommended,
|
||||
...eslintPluginVue.configs["flat/recommended"],
|
||||
],
|
||||
files: ["**/*.{ts,vue}"],
|
||||
languageOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
parser: typescriptEslint.parser,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
// your rules
|
||||
},
|
||||
},
|
||||
eslintConfigPrettier
|
||||
);
|
||||
1397
front/MyINPulse-front/package-lock.json
generated
1397
front/MyINPulse-front/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -26,8 +26,15 @@
|
||||
"@types/node": "^22.10.7",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"eslint": "^9.20.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-vue": "^9.32.0",
|
||||
"globals": "^15.14.0",
|
||||
"jiti": "^2.4.2",
|
||||
"npm-run-all2": "^7.0.2",
|
||||
"prettier": "3.5.0",
|
||||
"typescript": "~5.7.3",
|
||||
"typescript-eslint": "^8.23.0",
|
||||
"vite": "^6.0.11",
|
||||
"vite-plugin-vue-devtools": "^7.7.0",
|
||||
"vue-tsc": "^2.2.0"
|
||||
|
||||
@ -1,75 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
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 { RouterView } from "vue-router";
|
||||
import ErrorWrapper from "@/views/errorWrapper.vue";
|
||||
import ProjectComponent from "@/components/ProjectComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header />
|
||||
<HeaderComponent />
|
||||
<error-wrapper></error-wrapper>
|
||||
<div id="main">
|
||||
<ProjectComp
|
||||
<ProjectComponent
|
||||
v-for="(project, index) in projects"
|
||||
:key="index"
|
||||
:projectName="project.name"
|
||||
:listName="project.members"
|
||||
:project-name="project.name"
|
||||
/>
|
||||
</div>
|
||||
<div id="canvas">
|
||||
<button @click="$router.push('/canvas')">Voir Canvas</button>
|
||||
</div>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#canvas { /* My shit */
|
||||
margin-top: 20px;
|
||||
}
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
//import Header from "@/components/Header.vue";
|
||||
//import ProjectComp from "@/components/Project-comp.vue";
|
||||
import HeaderComponent from "@/components/HeaderComponent.vue";
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
name: "App",
|
||||
components: {
|
||||
Header,
|
||||
ProjectComp,
|
||||
CanvasView, // My shit
|
||||
HeaderComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projects: [
|
||||
{
|
||||
name: 'Projet Alpha',
|
||||
name: "Projet Alpha",
|
||||
//link: './project-alpha.html',
|
||||
members: ['Alice', 'Bob', 'Charlie'],
|
||||
//members: ['Alice', 'Bob', 'Charlie'],
|
||||
},
|
||||
{
|
||||
name: 'Projet Beta',
|
||||
name: "Projet Beta",
|
||||
//link: './project-beta.html',
|
||||
members: ['David', 'Eve', 'Frank'],
|
||||
//members: ['David', 'Eve', 'Frank'],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -2,25 +2,25 @@
|
||||
<header>
|
||||
<img src="./icons/logo inpulse.png" alt="INPulse" />
|
||||
</header>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Header',
|
||||
};
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "HeaderComponent",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
header img {
|
||||
<style scoped>
|
||||
header img {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
header{
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="project">
|
||||
<div class="project-header">
|
||||
<h2>{{ projectName }}</h2>
|
||||
<div class="project-buttons">
|
||||
<button class="info-btn"><a href="./project-example.html">more infos</a></button>
|
||||
<button class="contact-btn">Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-body">
|
||||
<ul>
|
||||
<li v-for="(name, index) in listName" :key="index">{{ name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Project',
|
||||
props: {
|
||||
projectName: String,
|
||||
listName: Array as() => String[], //something isn't working
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project {
|
||||
background: linear-gradient(to right, #f4f4f4, #ffffff);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Header Styling */
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-header h2 {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Button Container */
|
||||
.project-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
21
front/MyINPulse-front/src/components/ProjectComponent.vue
Normal file
21
front/MyINPulse-front/src/components/ProjectComponent.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="project">
|
||||
<div class="project-header">
|
||||
<h2>{{ projectName }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
|
||||
export default {
|
||||
name: "ProjectComponent",
|
||||
props: {
|
||||
projectName: {
|
||||
type: Object as PropType<string>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>9. Avantage déloyal</h3>
|
||||
<p>Ce qui ne peut pas être facilement copié ou acheté</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>5. Canaux</h3>
|
||||
<p>Chemins d'accès aux clients</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>7. Structure des coûts</h3>
|
||||
<p>Coûts d'acquisition, distribution, hébergement, employés...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<header>
|
||||
<img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
|
||||
<div class="header-buttons">
|
||||
<div class="contact-menu">
|
||||
<button class="contact-button" @click="toggleDropdown">Contact</button>
|
||||
<div class="contact-dropdown" v-show="isDropdownOpen">
|
||||
<button>Contact All</button>
|
||||
<button>Contact Person 1</button>
|
||||
<button>Contact Person 2</button>
|
||||
<button>Contact Person 3</button>
|
||||
</div>
|
||||
<div class="return"><a href="/">return to list project</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDropdownOpen: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.isDropdownOpen = !this.isDropdownOpen;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>8. Indicateurs clés</h3>
|
||||
<p>Activités clés que vous souhaitez évaluer</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div class="canvas">
|
||||
<div class="row">
|
||||
<Probleme />
|
||||
<Segments />
|
||||
</div>
|
||||
<div class="row">
|
||||
<Solution />
|
||||
<Valeur />
|
||||
<Canaux />
|
||||
</div>
|
||||
<div class="row">
|
||||
<Couts />
|
||||
<Revenus />
|
||||
</div>
|
||||
<div class="row">
|
||||
<Indicateurs />
|
||||
<Avantage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Probleme from "./Probleme.vue";
|
||||
import Segments from "./Segments.vue";
|
||||
import Solution from "./Solution.vue";
|
||||
import Valeur from "./Valeur.vue";
|
||||
import Canaux from "./Canaux.vue";
|
||||
import Revenus from "./Revenus.vue";
|
||||
import Couts from "./Couts.vue";
|
||||
import Indicateurs from "./Indicateurs.vue";
|
||||
import Avantage from "./Avantage.vue";
|
||||
|
||||
export default {
|
||||
components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>1. Problème</h3>
|
||||
<p>3 problèmes essentiels à résoudre pour le client</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>6. Sources de revenus</h3>
|
||||
<p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>2. Segments de clients</h3>
|
||||
<p>Clients cibles</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>4. Solution</h3>
|
||||
<p>3 fonctionnalités essentielles pour le client</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>3. Proposition de valeur unique</h3>
|
||||
<p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,184 +0,0 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
border: 2px dashed #d33;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cell {
|
||||
flex: 1;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.produit {
|
||||
background-color: #f9e4e4;
|
||||
}
|
||||
|
||||
.marche {
|
||||
background-color: #e4f1f9;
|
||||
}
|
||||
|
||||
.valeur {
|
||||
background-color: #f9f4e4;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
h1 img {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
border: 2px dashed #d33;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
flex: 1;
|
||||
border: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#ade {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background-color: #e8f5e9;
|
||||
border: 2px solid #4caf50;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#ade h3 {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
#ade p {
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
header .contact-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
transform: scale(1.2); /* L'élément reste agrandi */
|
||||
transition: transform 0.3s ease; /* Animation fluide */
|
||||
}
|
||||
|
||||
.contact-button, .return {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #2196f3;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contact-button:hover, .return:hover {
|
||||
background-color: #1976d2;
|
||||
}
|
||||
|
||||
/* Dropdown styling */
|
||||
.contact-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.contact-dropdown button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #4caf50;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contact-dropdown button:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.return {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
.return:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
|
||||
a{
|
||||
color: white;
|
||||
}
|
||||
@ -1,17 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['data']);
|
||||
import { color } from "@/services/popupDisplayer.ts";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
defineProps({
|
||||
errorMessage: {
|
||||
type: Object as PropType<string>,
|
||||
required: true,
|
||||
},
|
||||
errorColor: {
|
||||
type: Object as PropType<color>,
|
||||
default: color.Red,
|
||||
},
|
||||
});
|
||||
</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
|
||||
:class="['red', 'yellow', 'blue', 'green'][errorColor]"
|
||||
class="error-modal"
|
||||
>
|
||||
<p>
|
||||
{{
|
||||
["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]
|
||||
}}
|
||||
</p>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<div
|
||||
class="loading"
|
||||
:class="
|
||||
['red-loader', 'yellow-loader', 'blue-loader', 'green-loader'][
|
||||
errorColor
|
||||
]
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.error-modal{
|
||||
.error-modal {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
@ -19,41 +45,45 @@ const props = defineProps(['data']);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
animation: disappear 5s linear forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.red{
|
||||
.red {
|
||||
background-color: #ee6055;
|
||||
color: white;
|
||||
}
|
||||
.red-loader {
|
||||
}
|
||||
|
||||
.red-loader {
|
||||
background-color: #fa8383;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow{
|
||||
background-color: #FF9D23;
|
||||
.yellow {
|
||||
background-color: #ff9d23;
|
||||
color: white;
|
||||
}
|
||||
.yellow-loader{
|
||||
background-color: #ffbf81;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
.yellow-loader {
|
||||
background-color: #ffbf81;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #809bce;
|
||||
color: white;
|
||||
}
|
||||
.blue-loader{
|
||||
background-color: #95b8d1;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
.blue-loader {
|
||||
background-color: #95b8d1;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
.green-loader {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
.green-loader {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
.loading {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
@ -62,19 +92,19 @@ const props = defineProps(['data']);
|
||||
height: 1em;
|
||||
width: 0;
|
||||
animation: loading 4s linear forwards;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for the loading bar */
|
||||
@keyframes loading {
|
||||
/* Animation for the loading bar */
|
||||
@keyframes loading {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes disappear {
|
||||
@keyframes disappear {
|
||||
0% {
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
@ -90,5 +120,5 @@ const props = defineProps(['data']);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,77 +1,31 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
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;
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router/router.ts";
|
||||
import { createPinia } from "pinia";
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
import keycloakService from "./services/keycloak";
|
||||
import { type AuthStore, useAuthStore } from "@/stores/authStore.ts";
|
||||
|
||||
let store: AuthStore;
|
||||
|
||||
keycloakService.CallInit(() => {
|
||||
try {
|
||||
const app = createApp(App)
|
||||
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)
|
||||
keycloakService.CallInitStore(store);
|
||||
app.use(router);
|
||||
|
||||
app.mount('#app');
|
||||
app.mount("#app");
|
||||
} catch (e) {
|
||||
console.error("Error while initiating Keycloak.")
|
||||
console.error(e)
|
||||
createApp(App).mount('#app');
|
||||
console.error("Error while initiating Keycloak.");
|
||||
console.error(e);
|
||||
createApp(App).mount("#app");
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
// this shit made by me so i can run the canva vue app
|
||||
createApp(App).use(router).mount('#app');
|
||||
|
||||
// TODO: fix the comment
|
||||
/*
|
||||
function tokenInterceptor () {
|
||||
axios.interceptors.request.use(config => {
|
||||
const keycloak = useKeycloak()
|
||||
if (keycloak.authenticated) {
|
||||
// Note that this is a simple example.
|
||||
// you should be careful not to leak tokens to third parties.
|
||||
// in this example the token is added to all usage of axios.
|
||||
config.headers.Authorization = `Bearer ${keycloak.token}`
|
||||
}
|
||||
return config
|
||||
}, error => {
|
||||
console.error("tokenInterceptor: Rejected")
|
||||
return Promise.reject(error)
|
||||
})
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
app.use(VueKeyCloak,{
|
||||
onReady: (keycloak) => {
|
||||
console.log("Ready !")
|
||||
tokenInterceptor()
|
||||
},
|
||||
init: {
|
||||
onLoad: 'login-required',
|
||||
checkLoginIframe: false,
|
||||
|
||||
},
|
||||
|
||||
config: {
|
||||
realm: 'test',
|
||||
url: 'http://localhost:7080',
|
||||
clientId: 'myinpulse'
|
||||
}
|
||||
} );
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
export {store};
|
||||
export { store };
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
// file: src/plugins/authStore.js
|
||||
|
||||
import { useAuthStore } from "@/stores/authStore.ts";
|
||||
import keycloakService from '@/services/keycloak';
|
||||
// Setup auth store as a plugin so it can be accessed globally in our FE
|
||||
const authStorePlugin = {
|
||||
install(app: any, option: any) {
|
||||
const store = useAuthStore(option.pinia);
|
||||
app.config.globalProperties.$store = store;
|
||||
keycloakService.CallInitStore(store);
|
||||
}
|
||||
}
|
||||
|
||||
export default authStorePlugin;
|
||||
@ -1,24 +1,17 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/test',
|
||||
name: 'test',
|
||||
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/test.vue'),
|
||||
},
|
||||
|
||||
// route pour les canvas (made by adnane), in fact the two vue apps are separated for now
|
||||
{
|
||||
path: '/canvas',
|
||||
name: 'canvas',
|
||||
component: () => import('../views/CanvasView.vue'),
|
||||
component: () => import("../views/testComponent.vue"),
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@ -1,31 +1,36 @@
|
||||
import axios from "axios";
|
||||
import {store} from "@/main.ts";
|
||||
import {addNewMessage, color} from "@/services/popupDisplayer.ts";
|
||||
import axios, { type AxiosError, type AxiosResponse } from "axios";
|
||||
import { store } from "@/main.ts";
|
||||
import { addNewMessage, color } from "@/services/popupDisplayer.ts";
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: import.meta.env.VITE_BACKEND_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
axiosInstance.interceptors.response.use(
|
||||
response => response, // Directly return successful responses.
|
||||
async error => {
|
||||
(response) => response, // Directly return successful responses.
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
if (error.response.status === 401 && !originalRequest._retry && store.authenticated) {
|
||||
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}`;
|
||||
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';
|
||||
console.error("Token refresh failed:", refreshError);
|
||||
localStorage.removeItem("accessToken");
|
||||
localStorage.removeItem("refreshToken");
|
||||
window.location.href = "/login";
|
||||
return Promise.reject(refreshError);
|
||||
}
|
||||
}
|
||||
@ -34,23 +39,29 @@ axiosInstance.interceptors.response.use(
|
||||
);
|
||||
|
||||
// TODO: spawn a error modal
|
||||
function defaultApiErrorHandler(err: string){
|
||||
addNewMessage(err, color.Red);
|
||||
function defaultApiErrorHandler(err: AxiosError) {
|
||||
addNewMessage(err.message, color.Red);
|
||||
}
|
||||
|
||||
function defaultApiSuccessHandler(response: any){
|
||||
addNewMessage(response.data, color.green)
|
||||
function defaultApiSuccessHandler(response: AxiosResponse) {
|
||||
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;
|
||||
}
|
||||
|
||||
function callApi(
|
||||
endpoint: string,
|
||||
onSuccessHandler?: (response: AxiosResponse) => void,
|
||||
onErrorHandler?: (error: AxiosError) => void
|
||||
): void {
|
||||
axiosInstance
|
||||
.get(endpoint)
|
||||
.then(
|
||||
onSuccessHandler == null
|
||||
? defaultApiSuccessHandler
|
||||
: onSuccessHandler
|
||||
)
|
||||
.catch(
|
||||
onErrorHandler == null ? defaultApiErrorHandler : onErrorHandler
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export {callApi}
|
||||
export { callApi };
|
||||
|
||||
@ -1,33 +1,31 @@
|
||||
import Keycloak from 'keycloak-js';
|
||||
import Keycloak from "keycloak-js";
|
||||
import type { AuthStore } from "@/stores/authStore.ts";
|
||||
|
||||
const options = {
|
||||
url: import.meta.env.VITE_KEYCLOAK_URL,
|
||||
clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
|
||||
realm: import.meta.env.VITE_KEYCLOAK_REALM
|
||||
}
|
||||
|
||||
realm: import.meta.env.VITE_KEYCLOAK_REALM,
|
||||
};
|
||||
|
||||
const keycloak = new Keycloak(options);
|
||||
let authenticated: boolean | undefined;
|
||||
let store = null;
|
||||
|
||||
async function login(){
|
||||
async function login() {
|
||||
try {
|
||||
await keycloak.login() // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
|
||||
await keycloak.login(); // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
|
||||
return keycloak;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function signup(){
|
||||
async function signup() {
|
||||
try {
|
||||
await keycloak.login(
|
||||
{action: "register"}
|
||||
) // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
|
||||
await keycloak.login({ action: "register" }); // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
|
||||
return keycloak;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,31 +40,33 @@ async function init(onInitCallback: () => void) {
|
||||
onLoad: "check-sso",
|
||||
silentCheckSsoRedirectUri: `${location.origin}/silent-check-sso.htm`,
|
||||
responseMode: "query",
|
||||
})
|
||||
onInitCallback()
|
||||
});
|
||||
onInitCallback();
|
||||
} catch (error) {
|
||||
console.error("Keycloak init failed")
|
||||
console.error(error)
|
||||
console.error("Keycloak init failed");
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes store with Keycloak user data
|
||||
*
|
||||
*/
|
||||
async function initStore(storeInstance: any) {
|
||||
async function initStore(storeInstance: AuthStore) {
|
||||
try {
|
||||
store = storeInstance
|
||||
console.log(keycloak)
|
||||
await store.initOauth(keycloak)
|
||||
store = storeInstance;
|
||||
console.log(keycloak);
|
||||
await store.initOauth(keycloak);
|
||||
|
||||
// Show alert if user is not authenticated
|
||||
if (!authenticated) { console.warn("not authenticated") }
|
||||
} catch (error) {
|
||||
console.error("Keycloak init failed")
|
||||
console.error(error)
|
||||
if (!authenticated) {
|
||||
console.warn("not authenticated");
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Keycloak init failed");
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Logout user
|
||||
@ -83,7 +83,7 @@ async function refreshToken() {
|
||||
await keycloak.updateToken(480);
|
||||
return keycloak;
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh token');
|
||||
console.error("Failed to refresh token");
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,43 @@
|
||||
import {ref} from "vue";
|
||||
enum color {Red, Yellow, Blue, green}
|
||||
import { ref, type Ref } from "vue";
|
||||
|
||||
function addNewMessage(errorMessage: string, type?: color, timeout?: number){
|
||||
if (timeout == null){
|
||||
enum color {
|
||||
Red,
|
||||
Yellow,
|
||||
Blue,
|
||||
Green,
|
||||
}
|
||||
|
||||
type ErrorMessageContent = {
|
||||
message: string;
|
||||
color: color;
|
||||
id: number;
|
||||
timeout: number;
|
||||
};
|
||||
|
||||
let id: number = 0;
|
||||
const getId = () => {
|
||||
id = id + 1;
|
||||
return id;
|
||||
};
|
||||
|
||||
function addNewMessage(errorMessage: string, type?: color, timeout?: number) {
|
||||
if (timeout == null) {
|
||||
timeout = 5000;
|
||||
}
|
||||
if (type == null){
|
||||
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 data: ErrorMessageContent = {
|
||||
message: errorMessage,
|
||||
timeout: timeout,
|
||||
color: type,
|
||||
id: getId(),
|
||||
};
|
||||
errorList.value.push(data);
|
||||
setTimeout(() => errorList.value.slice(0, 1), timeout);
|
||||
}
|
||||
|
||||
const errorList: any= ref([])
|
||||
const errorList: Ref<ErrorMessageContent[]> = ref([]);
|
||||
|
||||
export {addNewMessage, errorList, color}
|
||||
export { addNewMessage, errorList, color, type ErrorMessageContent };
|
||||
|
||||
@ -1,54 +1,61 @@
|
||||
import { defineStore } from "pinia";
|
||||
import keycloakService from '@/services/keycloak';
|
||||
import keycloakService from "@/services/keycloak";
|
||||
import type Keycloak from "keycloak-js";
|
||||
export const useAuthStore = defineStore("storeAuth", {
|
||||
|
||||
const useAuthStore = defineStore("storeAuth", {
|
||||
state: () => {
|
||||
return {
|
||||
testv: true,
|
||||
authenticated: false,
|
||||
user: {
|
||||
token: "",
|
||||
refreshToken: "",
|
||||
username: "",
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
persist: true,
|
||||
getters: {},
|
||||
actions: {
|
||||
// Initialize Keycloak OAuth
|
||||
async initOauth(keycloak: Keycloak, clearData = true) {
|
||||
if(clearData) { await this.clearUserData(); }
|
||||
if (clearData) {
|
||||
await this.clearUserData();
|
||||
}
|
||||
|
||||
this.authenticated = !!keycloak.authenticated; // the !! removes undefined
|
||||
if (this.authenticated && keycloak.token && keycloak.idTokenParsed && keycloak.refreshToken){
|
||||
if (
|
||||
this.authenticated &&
|
||||
keycloak.token &&
|
||||
keycloak.idTokenParsed &&
|
||||
keycloak.refreshToken
|
||||
) {
|
||||
this.user.username = keycloak.idTokenParsed.given_name;
|
||||
this.user.token = keycloak.token;
|
||||
this.user.refreshToken = keycloak.refreshToken;
|
||||
}
|
||||
},
|
||||
async login(){
|
||||
async login() {
|
||||
try {
|
||||
const keycloak = await keycloakService.callLogin();
|
||||
if (keycloak)
|
||||
await this.initOauth(keycloak);
|
||||
if (keycloak) await this.initOauth(keycloak);
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
async signup() {
|
||||
try {
|
||||
const keycloak = await keycloakService.callSignup();
|
||||
if (keycloak)
|
||||
await this.initOauth(keycloak);
|
||||
if (keycloak) await this.initOauth(keycloak);
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// Logout user
|
||||
async logout() {
|
||||
try {
|
||||
await keycloakService.CallLogout(import.meta.env.VITE_APP_URL + "/test");
|
||||
await keycloakService.CallLogout(
|
||||
import.meta.env.VITE_APP_URL + "/test"
|
||||
);
|
||||
await this.clearUserData();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@ -58,15 +65,11 @@ export const useAuthStore = defineStore("storeAuth", {
|
||||
async refreshUserToken() {
|
||||
try {
|
||||
const keycloak = await keycloakService.CallTokenRefresh();
|
||||
if (keycloak)
|
||||
await this.initOauth(keycloak, false);
|
||||
if (keycloak) await this.initOauth(keycloak, false);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
test() {
|
||||
this.testv = !this.testv;
|
||||
},
|
||||
// Clear user's store data
|
||||
clearUserData() {
|
||||
this.authenticated = false;
|
||||
@ -75,6 +78,10 @@ export const useAuthStore = defineStore("storeAuth", {
|
||||
refreshToken: "",
|
||||
username: "",
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
type AuthStore = ReturnType<typeof useAuthStore>;
|
||||
|
||||
export { useAuthStore, type AuthStore };
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- src/views/CanvasView.vue -->
|
||||
<template>
|
||||
<div>
|
||||
<h1>Page Canvas</h1>
|
||||
<LeanCanvas />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
|
||||
</script>
|
||||
|
||||
@ -1,22 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import {errorList} from "@/services/popupDisplayer.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>
|
||||
<div class="error-wrapper">
|
||||
<error-modal
|
||||
v-for="elm in errorList"
|
||||
:key="elm.id"
|
||||
:error-message="elm.message"
|
||||
:error-color="elm.color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.error-wrapper{
|
||||
.error-wrapper {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
//background-color: blue;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,75 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Test page</h1>
|
||||
<table class="test" style="width:100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Is Currently Authenticated ? </td>
|
||||
<td>{{store.authenticated}}</td>
|
||||
<td><button @click="store.login">Login</button></td>
|
||||
<td><button @click="store.logout">Logout</button></td>
|
||||
<td><button @click="store.signup">Signup</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>current token</td>
|
||||
<td>{{store.user.token}}</td>
|
||||
<td><button @click="store.refreshUserToken">Refresh</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Current refresh token</td>
|
||||
<td>{{store.user.refreshToken}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Entrepreneur API call</td>
|
||||
<td><button @click="callApi('random')">call</button></td>
|
||||
<td>res</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
table {
|
||||
width: 100px;
|
||||
table-layout: fixed
|
||||
}
|
||||
tr {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
td {
|
||||
border: solid 1px black;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
79
front/MyINPulse-front/src/views/testComponent.vue
Normal file
79
front/MyINPulse-front/src/views/testComponent.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<script lang="ts" setup>
|
||||
import { store } from "../main.ts";
|
||||
import { callApi } from "@/services/api.ts";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Test page</h1>
|
||||
<table class="test" style="width: 100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Is Currently Authenticated ?</td>
|
||||
<td>{{ store.authenticated }}</td>
|
||||
<td>
|
||||
<button @click="store.login">Login</button>
|
||||
</td>
|
||||
<td>
|
||||
<button @click="store.logout">Logout</button>
|
||||
</td>
|
||||
<td>
|
||||
<button @click="store.signup">Signup</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>current token</td>
|
||||
<td>{{ store.user.token }}</td>
|
||||
<td>
|
||||
<button @click="store.refreshUserToken">Refresh</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Current refresh token</td>
|
||||
<td>{{ store.user.refreshToken }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Entrepreneur API call</td>
|
||||
<td>
|
||||
<button @click="callApi('random')">call</button>
|
||||
</td>
|
||||
<td>res</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
table {
|
||||
width: 100px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
tr {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
td {
|
||||
border: solid 1px black;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user