authentification keyloack + début front

front_end/src/App.tsx

@@ -1,25 +1,40 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { ReactKeycloakProvider } from '@react-keycloak/web'
+import keycloak from './keycloak'
+import Login from './components/login';
+import { LocalDataProvider } from './provider/LocalDataProvider';
+
+
+const keycloakInitOptions = {
+  onLoad: 'login-required',
+  checkLoginIframe: false
+}
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <ReactKeycloakProvider authClient={keycloak} initOptions={keycloakInitOptions}>
+      <LocalDataProvider>
+        <div className="App">
+          <header className="App-header">
+            <img src={logo} className="App-logo" alt="logo" />
+            <p>
+              Edit <code>src/App.tsx</code> and save to reload.
+            </p>
+            <a
+              className="App-link"
+              href="https://reactjs.org"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Learn React
+            </a>
+            <Login/>
+          </header>
+        </div>
+      </LocalDataProvider>
+    </ReactKeycloakProvider>
   );
 }
 

front_end/src/classes.tsx

@@ -0,0 +1,41 @@
+export type Groupe = "Entrainement" | "Competition" | "Loisir";
+
+export class User{
+    id!: number;
+    nom!: String;
+    session!: Session[]; //nb: Admin liaison non symétrique /!\
+}
+
+export class Admin extends User{
+
+}
+
+export class Athlete extends User{
+    groupe!: Groupe;
+
+}
+
+export class Coach extends User{
+
+}
+
+export class Session{
+    id!: number;
+    activites!: Activite[];
+    isRecurent! : Boolean;
+    Creneau!: Date;
+    coach!: Coach;
+    athletes!: Athlete[]
+    duree! : number;
+    groupe! : Groupe;
+}
+
+export class Activite{
+    id!: number;
+    nom!: String;
+    session!: Session;
+    theme!: String;
+    data!: Map<String,String>;
+    Duree!: number;
+
+}

front_end/src/components/ent.tsx

@@ -0,0 +1,16 @@
+import { useState } from "react"
+import { User } from "../classes"
+import { useLocalData } from "../context/useLocalData"
+
+
+export const ENT =() =>{
+    const {user} = useLocalData()
+    
+    return(
+        <div>
+            
+        </div>
+    )
+}
+
+export default ENT

front_end/src/components/login.tsx

@@ -0,0 +1,23 @@
+import { useKeycloak } from '@react-keycloak/web'
+
+
+
+
+export const Login =() =>{
+    const { keycloak } = useKeycloak()
+    return(
+        <div>
+            <div>
+                Authenticated : {keycloak.authenticated ? '✅' : '❌'}
+            </div>
+            <button onClick={() => keycloak.login()}>
+                Se connecter
+            </button>
+            <button onClick={() => keycloak.logout()}>
+                Se déconnecter
+            </button>
+        </div>
+    )
+}
+
+export default Login

front_end/src/context/LocalDataContext2.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react'
+import { Session, User } from '../classes';
+
+interface LocalDataContextType {
+    user:User;
+    setUser: React.Dispatch<React.SetStateAction<User>>
+    sessions: Session[];
+    setSessions: React.Dispatch<React.SetStateAction<Session[]>>
+    users: User[];
+    setUsers: React.Dispatch<React.SetStateAction<User[]>>
+
+}
+
+export const LocalDataContext = createContext<LocalDataContextType | undefined>(undefined)

front_end/src/context/useLocalData.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { LocalDataContext } from './LocalDataContext2'
+
+export const useLocalData = () => {
+  const context = useContext(LocalDataContext)
+  if (!context) {
+    throw new Error('useLocalData must be used within LocalDataProvider')
+  }
+  return context
+}

front_end/src/keycloak.js

@@ -0,0 +1,5 @@
+import Keycloak from 'keycloak-js'
+
+const keycloak = new Keycloak("/keycloak.json")
+
+export default keycloak

front_end/src/provider/LocalDataProvider.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { Session, User } from '../classes'
+import { LocalDataContext } from '../context/LocalDataContext2'
+
+export const LocalDataProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<User>(new User())
+  const [sessions, setSessions] = useState<Session[]>([])
+  const [users, setUsers] = useState<User[]>([])
+
+  
+
+  return (
+    <LocalDataContext.Provider
+    value={{ user, setUser, sessions, setSessions, users, setUsers  }}>
+      {children}
+    </LocalDataContext.Provider>
+  )
+}
+
+

front_end/src/requetes.tsx

@@ -0,0 +1,70 @@
+import { Activite, Athlete, Coach, Session, User } from "./classes";
+import { useKeycloak } from '@react-keycloak/web'
+
+const { keycloak } = useKeycloak()
+
+const useAuthHeader = () => {
+  return keycloak?.token
+    ? { Authorization: `Bearer ${keycloak.token}` }
+    : {}
+}
+
+//UPDATE /////////////////////////////////////////////////////////
+
+//COACH / ATHLETE
+
+/*
+retourne l'utilisateur lié à l'identifiant keyloack
+*/
+export function getUser(id:number){
+    //keycloak.id;
+}
+/*
+retourne toutes les Session dont l'user est inscrit
+*/
+export function updateSessionsOfUser(user:Coach|Athlete, min: Date, max: Date){
+    //TODO
+}
+
+export function updateActivitiesOfSession(session:Session){
+    //TODO
+}
+
+// ADMIN :
+
+export function updateAllSession(min: Date, max: Date){
+    //TODO
+}
+
+export function updateAllUser(){
+
+}
+
+// POST /////////////////////////////////////////////////////////
+
+// COACH ADMIN 
+export function postSession(session: Session){
+
+}
+
+export function postActivity(session: Session, activity: Activite){
+    //post nouvelle activitée
+
+    //associer la nouvelle activité à la session
+}
+
+export function postUser(user: User){
+
+}
+
+// SET /////////////////////////////////////////////////////////
+
+//ADMIN
+export function setUserName(user: User, name: string){
+
+}
+
+//COACH
+export function setSessionCreneau(session: Session, date:Date){
+
+}