feat: register for club and free mode

wip: helloasso

src/main/webapp/src/pages/competition/CompetitionList.jsx

@@ -58,7 +58,7 @@ const inscText = (type) => {
 
 function MakeRow({data, navigate}) {
     return <div className="list-group-item list-group-item-action"
-                onClick={() => data.canEdit ? navigate("" + data.id) : navigate("view/" + data.id)}>
+                onClick={() => data.canEdit ? navigate("" + data.id) : navigate("" + data.id + "/view")}>
         <div className="row justify-content-between align-items-start ">
             <div className="ms-2 col-auto">
                 <div><strong>{data.name}</strong> <small>par {data.clubName}</small></div>

src/main/webapp/src/pages/competition/CompetitionRegisterAdmin.css

@@ -0,0 +1,36 @@
+.autocomplete-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 500px;
+}
+
+.suggestions-list2 {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    border: 1px solid #ced4da;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+}
+
+.suggestions-list {
+    position: absolute;
+    z-index: 1000;
+    margin: 0;
+    padding: 0;
+    border: 1px solid #ced4da;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+}
+
+.suggestions-list .list-group-item {
+    cursor: pointer;
+}
+
+.suggestions-list .list-group-item:hover {
+    background-color: #f8f9fa;
+}

src/main/webapp/src/pages/competition/CompetitionRegisterAdmin.jsx

@@ -1,16 +1,17 @@
 import {useNavigate, useParams} from "react-router-dom";
-import {useLoadingSwitcher} from "../../hooks/useLoading.jsx";
+import {LoadingProvider, useLoadingSwitcher} from "../../hooks/useLoading.jsx";
 import {useFetch} from "../../hooks/useFetch.js";
 import {AxiosError} from "../../components/AxiosError.jsx";
 import {ThreeDots} from "react-loader-spinner";
-import {useEffect, useReducer, useState} from "react";
+import {useEffect, useReducer, useRef, useState} from "react";
 import {apiAxios} from "../../utils/Tools.js";
 import {toast} from "react-toastify";
 import {SimpleReducer} from "../../utils/SimpleReducer.jsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faTrashCan} from "@fortawesome/free-solid-svg-icons";
+import {faAdd, faTrashCan} from "@fortawesome/free-solid-svg-icons";
+import "./CompetitionRegisterAdmin.css"
 
-export function CompetitionRegisterAdmin() {
+export function CompetitionRegisterAdmin({source}) {
     const {id} = useParams()
     const navigate = useNavigate()
     const [state, dispatch] = useReducer(SimpleReducer, [])
@@ -19,32 +20,24 @@ export function CompetitionRegisterAdmin() {
     const [modalState, setModalState] = useState({})
 
     const setLoading = useLoadingSwitcher()
-    const {data, error} = useFetch(`/competition/${id}/register`, setLoading, 1)
+    const {data, error} = useFetch(`/competition/${id}/register/${source}`, setLoading, 1)
 
     const sortName = (a, b) => {
-        if (a.data.fname === b.data.fname)
-            return a.data.lname.localeCompare(b.data.lname);
+        if (a.data.fname === b.data.fname) return a.data.lname.localeCompare(b.data.lname);
         return a.data.fname.localeCompare(b.data.fname);
     }
 
     useEffect(() => {
-        if (!data)
-            return;
-        data.forEach((d, index) => {
-            dispatch({type: 'UPDATE_OR_ADD', payload: {id: index, data: d}})
+        if (!data) return;
+        data.forEach((d) => {
+            dispatch({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: d}})
         })
         dispatch({type: 'SORT', payload: sortName})
     }, [data, clubFilter, catFilter]);
 
-    const sendRegister = (event, new_state) => {
-        event.preventDefault();
-
-        console.log(new_state)
-
-        toast.promise(apiAxios.post(`/competition/${id}/register`, new_state), {
-            pending: "Recherche en cours",
-            success: "Combattant trouvé et ajouté/mis à jour",
-            error: {
+    const sendRegister = (new_state) => {
+        toast.promise(apiAxios.post(`/competition/${id}/register/${source}`, new_state), {
+            pending: "Recherche en cours", success: "Combattant trouvé et ajouté/mis à jour", error: {
                 render({data}) {
                     return data.response.data || "Combattant non trouvé"
                 }
@@ -53,17 +46,7 @@ export function CompetitionRegisterAdmin() {
             if (response.data.error) {
                 return
             }
-
-            let maxId = 0;
-            if (new_state.id) {
-                maxId = new_state.id - 1
-            } else {
-                state.forEach((d) => {
-                    if (d.id > maxId)
-                        maxId = d.id;
-                })
-            }
-            dispatch({type: 'UPDATE_OR_ADD', payload: {id: maxId + 1, data: response.data}})
+            dispatch({type: 'UPDATE_OR_ADD', payload: {id: response.data.id, data: response.data}})
             dispatch({type: 'SORT', payload: sortName})
             document.getElementById("closeModal").click();
         })
@@ -71,22 +54,18 @@ export function CompetitionRegisterAdmin() {
 
     return <div>
         <h2>Combattants inscrits</h2>
-        <button type="button" className="btn btn-link" onClick={() => navigate("/competition/" + id)}>
+        <button type="button" className="btn btn-link"
+                onClick={() => source === "admin" ? navigate("/competition/" + id) : navigate("/competition/" + id + "/view")}>
             &laquo; retour
         </button>
 
         <div className="row">
             <div className="col-lg-9">
-                {data
-                    ? <div className="">
-                        <MakeCentralPanel
-                            data={state.filter(s => (clubFilter.length === 0 || s.data.club.name === clubFilter) && (catFilter.length === 0 || s.data.categorie === catFilter))}
-                            dispatch={dispatch} id={id} setModalState={setModalState}/>
-                    </div>
-                    : error
-                        ? <AxiosError error={error}/>
-                        : <Def/>
-                }
+                {data ? <div className="">
+                    <MakeCentralPanel
+                        data={state.filter(s => (clubFilter.length === 0 || s.data.club.name === clubFilter) && (catFilter.length === 0 || s.data.categorie === catFilter))}
+                        dispatch={dispatch} id={id} setModalState={setModalState} source={source}/>
+                </div> : error ? <AxiosError error={error}/> : <Def/>}
             </div>
             <div className="col-lg-3">
                 <div className="mb-4">
@@ -94,27 +73,213 @@ export function CompetitionRegisterAdmin() {
                             onClick={() => setModalState({})}>Ajouter un combattant
                     </button>
                 </div>
+                <QuickAdd sendRegister={sendRegister} source={source}/>
                 <div className="card mb-4">
                     <div className="card-header">Filtre</div>
                     <div className="card-body">
                         <FiltreBar data={data} clubFilter={clubFilter} setClubFilter={setClubFilter} catFilter={catFilter}
-                                   setCatFilter={setCatFilter}/>
+                                   setCatFilter={setCatFilter} source={source}/>
                     </div>
                 </div>
             </div>
         </div>
 
-        <Modal sendRegister={sendRegister} modalState={modalState} setModalState={setModalState}/>
+        <Modal sendRegister={sendRegister} modalState={modalState} setModalState={setModalState} source={source}/>
     </div>
 }
 
-function Modal({sendRegister, modalState, setModalState}) {
+function QuickAdd({sendRegister, source}) {
+
+    const handleAdd = (licence) => {
+        console.log("Quick add licence: " + licence)
+
+        sendRegister({
+            licence: licence, fname: "", lname: "", weight: "", overCategory: 0, lockEdit: false, id: null
+        })
+    }
+
+    return <div className="card mb-4">
+        <div className="card-header">Ajout rapide</div>
+        <div className="card-body">
+            <div className="row">
+                <span>N° de licence</span>
+            </div>
+            <div className="input-group">
+                <input type="text" className="form-control" placeholder="12345" id="quickAddLicence"
+                       onKeyDown={e => {
+                           if (e.key === "Enter") {
+                               const licence = e.target.value.trim()
+                               if (licence.length === 0) return;
+                               e.target.value = ""
+                               handleAdd(licence)
+                           }
+                       }}/>
+                <button className="btn btn-primary" type="button" id="quickAddBtn"
+                        onClick={_ => {
+                            const licence = document.getElementById("quickAddLicence").value.trim()
+                            if (licence.length === 0) return;
+
+                            document.getElementById("quickAddLicence").value = ""
+                            handleAdd(licence)
+                        }}><FontAwesomeIcon icon={faAdd} className="no-modal"/>
+                </button>
+
+                {source === "club" && <LoadingProvider>
+                    <SearchMember sendRegister={sendRegister}/>
+                </LoadingProvider>}
+            </div>
+        </div>
+    </div>
+}
+
+function SearchMember({sendRegister}) {
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/club/members`, setLoading, 1)
+    const [suggestions, setSuggestions] = useState([])
+
+    const handleAdd = (name) => {
+        const member = data.find(m => `${m.fname} ${m.lname}`.trim() === name);
+        console.log("Quick add licence:", member)
+
+        if (!member) {
+            toast.error("Combattant non trouvé");
+            return;
+        }
+
+        sendRegister({
+            licence: member.licence, fname: member.fname, lname: member.lname, weight: "", overCategory: 0, lockEdit: false, id: null
+        })
+    }
+
+    useEffect(() => {
+        if (!data) return;
+
+        const names = data.map(member => `${member.fname} ${member.lname}`.trim());
+        names.sort((a, b) => a.localeCompare(b));
+        setSuggestions(names);
+    }, []);
+
+    return <>
+        {data ? <div className="row mb-3" style={{marginTop: "0.5em"}}>
+            <span>Prénom et nom</span>
+            <AutoCompleteInput suggestions={suggestions} handleAdd={handleAdd}/>
+        </div> : error ? <AxiosError error={error}/> : <Def/>}
+    </>
+}
+
+const AutoCompleteInput = ({suggestions = [], handleAdd}) => {
+    const [inputValue, setInputValue] = useState('');
+    const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [activeSuggestion, setActiveSuggestion] = useState(0);
+    const wrapperRef = useRef(null);
+
+    // Filtre les suggestions
+    useEffect(() => {
+        if (inputValue.trim() === '') {
+            setFilteredSuggestions([]);
+            setShowSuggestions(false);
+        } else {
+            const filtered = suggestions.filter(suggestion => suggestion.toLowerCase().includes(inputValue.toLowerCase()));
+            setFilteredSuggestions(filtered);
+            setShowSuggestions(true);
+            setActiveSuggestion(0); // Réinitialise la sélection active
+        }
+    }, [inputValue, suggestions]);
+
+    // Ferme les suggestions si clic à l'extérieur
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    // Gestion du clic sur une suggestion
+    const handleSuggestionClick = (suggestion) => {
+        setInputValue(suggestion);
+        setShowSuggestions(false); // Ferme automatiquement après sélection
+    };
+
+    // Navigation clavier
+    const handleKeyDown = (e) => {
+        // Touches directionnelles
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveSuggestion(prev => prev < filteredSuggestions.length - 1 ? prev + 1 : prev);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveSuggestion(prev => (prev > 0 ? prev - 1 : 0));
+        }
+        // Validation avec Entrée
+        else if (e.key === 'Enter' && filteredSuggestions.length > 0) {
+            e.preventDefault();
+            if (inputValue === filteredSuggestions[activeSuggestion]) {
+                handleAdd(inputValue);
+                setInputValue('');
+            } else {
+                setInputValue(filteredSuggestions[activeSuggestion]);
+            }
+            setShowSuggestions(false);
+        }
+        // Fermeture avec Échap
+        else if (e.key === 'Escape') {
+            setShowSuggestions(false);
+        }
+    };
+
+    return (<div className="autocomplete-wrapper" ref={wrapperRef}>
+        <div className="input-group">
+            <input
+                type="text"
+                className="form-control"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onFocus={() => inputValue && setShowSuggestions(true)}
+                placeholder="Rechercher..."
+                aria-autocomplete="list"
+                aria-expanded={showSuggestions}
+                aria-controls="suggestions-list"
+            />
+
+            <button className="btn btn-primary" type="button" id="quickAddBtn"
+                    onClick={_ => {
+                        handleAdd(inputValue);
+                        setInputValue(''); // Réinitialise le champ après l'ajout
+                    }}>
+                <FontAwesomeIcon icon={faAdd} className="no-modal"/>
+            </button>
+        </div>
+        {showSuggestions && filteredSuggestions.length > 0 && (<ul
+            id="suggestions-list"
+            className="suggestions-list list-group"
+            role="listbox"
+        >
+            {filteredSuggestions.map((suggestion, index) => (<li
+                key={index}
+                className={`list-group-item list-group-item-action ${index === activeSuggestion ? 'active' : ''}`}
+                onClick={() => handleSuggestionClick(suggestion)}
+                role="option"
+                aria-selected={index === activeSuggestion}
+            >
+                {suggestion}
+            </li>))}
+        </ul>)}
+    </div>);
+};
+
+function Modal({sendRegister, modalState, setModalState, source}) {
     const [licence, setLicence] = useState("")
     const [fname, setFname] = useState("")
     const [lname, setLname] = useState("")
     const [weight, setWeight] = useState("")
     const [cat, setCat] = useState(0)
     const [editMode, setEditMode] = useState(false)
+    const [lockEdit, setLockEdit] = useState(false)
 
     useEffect(() => {
         if (!modalState) {
@@ -124,6 +289,7 @@ function Modal({sendRegister, modalState, setModalState}) {
             setWeight("")
             setCat(0)
             setEditMode(false)
+            setLockEdit(false)
         } else {
             setLicence(modalState.licence ? modalState.licence : "")
             setFname(modalState.fname ? modalState.fname : "")
@@ -131,6 +297,7 @@ function Modal({sendRegister, modalState, setModalState}) {
             setWeight(modalState.weight ? modalState.weight : "")
             setCat(modalState.overCategory ? modalState.overCategory : 0)
             setEditMode(modalState.licence || (modalState.fname && modalState.lname))
+            setLockEdit(modalState.lockEdit)
         }
     }, [modalState]);
 
@@ -139,21 +306,16 @@ function Modal({sendRegister, modalState, setModalState}) {
         <div className="modal-dialog">
             <div className="modal-content">
                 <form onSubmit={e => {
+                    e.preventDefault()
                     const new_state = {
-                        licence: licence,
-                        fname: fname,
-                        lname: lname,
-                        weight: weight,
-                        overCategory: cat,
-                        id: modalState.id
+                        licence: licence, fname: fname, lname: lname, weight: weight, overCategory: cat, lockEdit: lockEdit, id: modalState.id
                     }
                     setModalState(new_state)
-                    sendRegister(e, new_state)
+                    sendRegister(new_state)
                 }}>
                     <div className="modal-header">
-                        <h1 className="modal-title fs-5" id="registerLabel">Ajouter un combattant</h1>
-                        <button type="button" className="btn-close" data-bs-dismiss="modal"
-                                aria-label="Close"></button>
+                        <h1 className="modal-title fs-5" id="registerLabel">{editMode ? "Modification d'" : "Ajouter "}un combattant</h1>
+                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div className="modal-body">
                         <div className="card" style={{marginBottom: "1em"}}>
@@ -194,9 +356,16 @@ function Modal({sendRegister, modalState, setModalState}) {
                                 <option value={2}>+2 catégorie</option>
                             </select>
                         </div>
+
+                        {editMode && source === "admin" && <div className="form-check form-switch form-check-reverse">
+                            <input className="form-check-input" type="checkbox" id="switchCheckReverse" checked={lockEdit}
+                                   onChange={e => setLockEdit(e.target.checked)}/>
+                            <label className="form-check-label" htmlFor="switchCheckReverse">Empêcher les membres/club de modifier cette
+                                inscription</label>
+                        </div>}
                     </div>
                     <div className="modal-footer">
-                        <button type="submit" className="btn btn-primary">{editMode? "Modifier" : "Ajouter"}</button>
+                        <button type="submit" className="btn btn-primary">{editMode ? "Modifier" : "Ajouter"}</button>
                         <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal" id="closeModal">Annuler</button>
                     </div>
                 </form>
@@ -208,10 +377,9 @@ function Modal({sendRegister, modalState, setModalState}) {
 let allClub = []
 let allCat = []
 
-function FiltreBar({data, clubFilter, setClubFilter, catFilter, setCatFilter}) {
+function FiltreBar({data, clubFilter, setClubFilter, catFilter, setCatFilter, source}) {
     useEffect(() => {
-        if (!data)
-            return;
+        if (!data) return;
         allClub.push(...data.map((e) => e.club?.name))
         allClub = allClub.filter((value, index, self) => self.indexOf(value) === index).filter(value => value != null).sort()
         allCat.push(...data.map((e) => e.categorie))
@@ -219,71 +387,72 @@ function FiltreBar({data, clubFilter, setClubFilter, catFilter, setCatFilter}) {
     }, [data]);
 
     return <div>
-        <div className="mb-3">
+        {source === "admin" && <div className="mb-3">
             <select className="form-select" value={clubFilter} onChange={event => setClubFilter(event.target.value)}>
                 <option value="">--- tout les clubs ---</option>
                 {allClub && allClub.map((value, index) => {
                     return <option key={index} value={value}>{value}</option>
-                })
-                }
+                })}
             </select>
-        </div>
+        </div>}
         <div className="mb-3">
             <select className="form-select" value={catFilter} onChange={event => setCatFilter(event.target.value)}>
                 <option value="">--- toute les catégories ---</option>
                 {allCat && allCat.map((value, index) => {
                     return <option key={index} value={value}>{value}</option>
-                })
-                }
+                })}
             </select>
         </div>
     </div>
 }
 
-function MakeCentralPanel({data, dispatch, id, setModalState}) {
+function MakeCentralPanel({data, dispatch, id, setModalState, source}) {
     return <>
         <div className="mb-4">
             <div className="list-group">
-                {data.map((req, index) => (
-                    <div key={index} className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
-                         data-bs-toggle="modal" data-bs-target="#registerModal" onClick={() => setModalState({...req.data, id: req.id})}>
-                        <div className="row">
-                            <span className="col-auto">{req.data.licence ? String(req.data.licence).padStart(5, '0') : "-------"}</span>
-                            <div className="ms-2 col-auto">
-                                <div className="fw-bold">{req.data.fname} {req.data.lname}</div>
-                                <small>{req.data.club?.name || "Sans club"}</small>
+                {data.map((req, index) => (<div key={index} className="list-group-item" style={{padding: "0"}}>
+                    <div className="row" style={{padding: "0", margin: "0"}}>
+                        <div style={{padding: ".5rem 1rem"}}
+                             className={"col d-flex justify-content-between align-items-start list-group-item-" + ((req.data.lockEdit && source !== "admin") ? "secondary " : "action")}
+                             data-bs-toggle={(req.data.lockEdit && source !== "admin") ? "" : "modal"} data-bs-target="#registerModal"
+                             onClick={_ => setModalState({...req.data, id: req.id})}>
+                            <div className="row">
+                                <span className="col-auto">{req.data.licence ? String(req.data.licence).padStart(5, '0') : "-------"}</span>
+                                <div className="ms-2 col-auto">
+                                    <div className="fw-bold">{req.data.fname} {req.data.lname}</div>
+                                    <small>{req.data.club?.name || "Sans club"}</small>
+                                </div>
+                            </div>
+                            <div className="row">
+                                <div className="col-auto" style={{textAlign: "right"}}>
+                                    <small>{req.data.categorie + (req.data.overCategory === 0 ? "" : (" avec " + req.data.overCategory + " de surclassement"))}<br/>
+                                        {req.data.weight ? req.data.weight : "---"} kg
+                                    </small>
+                                </div>
                             </div>
                         </div>
-                        <div className="row">
-                            <div className="col-auto" style={{textAlign: "right"}}>
-                                <small>{req.data.categorie + (req.data.overCategory === 0 ? "" : (" avec " + req.data.overCategory + " de surclassement"))}<br/>
-                                    {req.data.weight ? req.data.weight : "---"} kg
-                                </small>
-                            </div>
-                            <div className="col-auto">
-                                <button className="btn btn-danger" type="button"
-                                        onClick={e => {
-                                            e.preventDefault()
-                                            toast.promise(apiAxios.delete(`/competition/${id}/register/${req.data.id}`), {
-                                                pending: "Désinscription en cours",
-                                                success: "Combattant désinscrit",
-                                                error: {
-                                                    render({data}) {
-                                                        return data.response.data || "Erreur"
-                                                    }
+                        <div className="col-auto" style={{padding: "0 0.5rem 0 0", alignContent: "center"}}>
+                            <button className="btn btn-danger no-modal" type="button" disabled={req.data.lockEdit && source !== "admin"}
+                                    onClick={e => {
+                                        e.preventDefault()
+
+                                        if (req.data.lockEdit && source !== "admin") return;
+
+                                        toast.promise(apiAxios.delete(`/competition/${id}/register/${req.data.id}/${source}`), {
+                                            pending: "Désinscription en cours", success: "Combattant désinscrit", error: {
+                                                render({data}) {
+                                                    return data.response.data || "Erreur"
                                                 }
-                                            }).finally(() => {
-                                                dispatch({type: 'REMOVE', payload: req.id})
-                                                setTimeout(() => document.getElementById("closeModal").click(), 500);
-                                            })
-                                        }
-                                        }>
-                                    <FontAwesomeIcon icon={faTrashCan}/>
-                                </button>
-                            </div>
+                                            }
+                                        }).finally(() => {
+                                            dispatch({type: 'REMOVE', payload: req.id})
+                                        })
+                                    }}>
+                                <FontAwesomeIcon icon={faTrashCan} className="no-modal"/>
+                            </button>
                         </div>
                     </div>
-                ))}
+                </div>))}
             </div>
         </div>
     </>
@@ -297,4 +466,4 @@ function Def() {
         <li className="list-group-item"><ThreeDots/></li>
         <li className="list-group-item"><ThreeDots/></li>
     </div>
-}
+}

src/main/webapp/src/pages/competition/CompetitionRoot.jsx

@@ -25,12 +25,16 @@ export function getCompetitionChildren() {
             element: <CompetitionEdit/>
         },
         {
-            path: 'view/:id',
+            path: ':id/view',
             element: <CompetitionView/>
         },
         {
             path: ':id/register',
-            element: <CompetitionRegisterAdmin/>
+            element: <CompetitionRegisterAdmin source="admin"/>
+        },
+        {
+            path: ':id/club/register',
+            element: <CompetitionRegisterAdmin source="club"/>
         }
     ]
 }

src/main/webapp/src/pages/competition/CompetitionView.jsx

@@ -3,7 +3,10 @@ import {useLoadingSwitcher} from "../../hooks/useLoading.jsx";
 import {useFetch} from "../../hooks/useFetch.js";
 import {AxiosError} from "../../components/AxiosError.jsx";
 import {useAuth} from "../../hooks/useAuth.jsx";
-import {isClubAdmin} from "../../utils/Tools.js";
+import {apiAxios, isClubAdmin} from "../../utils/Tools.js";
+import {ThreeDots} from "react-loader-spinner";
+import {useEffect, useState} from "react";
+import {toast} from "react-toastify";
 
 export function CompetitionView() {
 
@@ -43,6 +46,7 @@ const inscText = (type) => {
 
 function MakeContent({data}) {
     const {userinfo} = useAuth()
+    const navigate = useNavigate()
 
     return <div className="card mb-4">
         <div className="card-header">
@@ -57,10 +61,18 @@ function MakeContent({data}) {
             <p><strong>Organisateur :</strong> {data.clubName}</p>
             <p><strong>Type d'inscription :</strong> {inscText(data.registerMode)}</p>
             {(data.registerMode === "FREE" || data.registerMode === "CLUB_ADMIN") &&
-                <p><strong>Date d'inscription :</strong> Du {new Date(data.startRegister.split('+')[0]).toLocaleString()} au {new Date(data.endRegister.split('+')[0]).toLocaleString()}</p>
+                <p><strong>Date d'inscription
+                    :</strong> Du {new Date(data.startRegister.split('+')[0]).toLocaleString()} au {new Date(data.endRegister.split('+')[0]).toLocaleString()}
+                </p>
             }
-            {(data.registerMode === "CLUB_ADMIN" && isClubAdmin(userinfo)) || data.registerMode === "FREE" &&
-                <button type="button" className="btn btn-primary" disabled={new Date() < new Date(data.startRegister.split('+')[0]) || new Date() > new Date(data.endRegister.split('+')[0])}>Inscription</button>
+
+            {(data.registerMode === "FREE" || data.registerMode === "CLUB_ADMIN") && isClubAdmin(userinfo) &&
+                <button type="button" className="btn btn-primary"
+                        disabled={new Date() < new Date(data.startRegister.split('+')[0]) || new Date() > new Date(data.endRegister.split('+')[0])}
+                        onClick={_ => navigate("/competition/" + data.id + "/club/register")}>Inscription</button>
+            }
+            {data.registerMode === "FREE" && !isClubAdmin(userinfo) &&
+                <SelfRegister data2={data}/>
             }
             {data.registerMode === "HELLOASSO" &&
                 <p><strong>Billetterie :</strong> <a
@@ -70,3 +82,101 @@ function MakeContent({data}) {
         </div>
     </div>
 }
+
+function SelfRegister({data2}) {
+    const {id} = useParams()
+    const setLoading = useLoadingSwitcher()
+    const {data, refresh, error} = useFetch(`/competition/${id}/register/user`, setLoading, 1)
+
+    const [weight, setWeight] = useState("")
+    const [cat, setCat] = useState(0)
+
+    useEffect(() => {
+        if (data && data.length > 0) {
+            setWeight(data[0].weight || "")
+            setCat(data[0].overCategory || 0)
+        }
+    }, [data]);
+
+    const disabled = new Date() < new Date(data2.startRegister.split('+')[0]) || new Date() > new Date(data2.endRegister.split('+')[0])
+
+    const handleUnregister = () => {
+        if (window.confirm("Êtes-vous sûr de vouloir vous désinscrire ?")) {
+            toast.promise(apiAxios.delete(`/competition/${id}/register/${data[0].id}/user`), {
+                pending: "Désinscription en cours",
+                success: "Désinscription réalisée",
+                error: {
+                    render({data}) {
+                        return data.response.data || "Erreur"
+                    }
+                }
+            }).finally(() => {
+                refresh(`/competition/${id}/register/user`)
+            })
+        }
+    }
+
+    const sendSubmit = (new_state) => {
+        toast.promise(apiAxios.post(`/competition/${id}/register/user`, new_state), {
+            pending: "Enregistrement en cours",
+            success: "Inscription réalisée",
+            error: {
+                render({data}) {
+                    return data.response.data || "Combattant non trouvé"
+                }
+            }
+        }).finally(() => {
+            refresh(`/competition/${id}/register/user`)
+        })
+    }
+
+    const handleSubmit = (e) => {
+        sendSubmit({
+            licence: 0, fname: "", lname: "", weight: weight, overCategory: cat, lockEdit: false, id: null
+        })
+    }
+
+    return <>
+        {data
+            ? data.length > 0
+                ? <div style={{textAlign: "right", maxWidth: "20em"}}>
+                    <h4 style={{textAlign: "left"}}>Mon inscription</h4>
+                    <div className="input-group mb-3">
+                        <span className="input-group-text" id="weight">Poids (en kg)</span>
+                        <input type="number" min={1} step={1} className="form-control" placeholder="42" aria-label="weight" disabled={disabled}
+                               name="weight" aria-describedby="weight" value={weight} onChange={e => setWeight(e.target.value)}/>
+                    </div>
+
+                    <div style={{textAlign: "left"}}>Catégorie normalisée: {data[0].categorie}</div>
+                    <div className="input-group mb-3">
+                        <span className="input-group-text" id="categorie">Surclassement</span>
+                        <select className="form-select" aria-label="categorie" name="categorie" value={cat} disabled={disabled}
+                                onChange={e => setCat(Number(e.target.value))}>
+                            <option value={0}>Aucun</option>
+                            <option value={1}>+1 catégorie</option>
+                            <option value={2}>+2 catégorie</option>
+                        </select>
+                    </div>
+
+                    <div>
+                        <button type="button" className="btn btn-danger" disabled={disabled} style={{marginRight: "0.5em"}}
+                                onClick={handleUnregister}>Se désinscrire
+                        </button>
+                        <button type="button" className="btn btn-primary" disabled={disabled}
+                                onClick={handleSubmit}>Enregister
+                        </button>
+                    </div>
+                </div>
+                : <button type="button" className="btn btn-primary" disabled={disabled} onClick={handleSubmit}>S'inscrire</button>
+            : error
+                ? <AxiosError error={error}/>
+                : <Def/>
+        }
+    </>
+}
+
+function Def() {
+    return <div className="list-group">
+        <li className="list-group-item"><ThreeDots/></li>
+    </div>
+}