update frontend
This commit is contained in:
Your Name
parent
5e8a8ee46e
commit
26a8bf84e8
|
|
@ -2,46 +2,38 @@
|
|||
let deferredPrompt = null;
|
||||
|
||||
window.addEventListener('beforeinstallprompt', (e) => {
|
||||
// Empêche le prompt par défaut
|
||||
e.preventDefault();
|
||||
deferredPrompt = e;
|
||||
console.log('PWA install prompt ready');
|
||||
});
|
||||
|
||||
// Fonction pour déclencher l’install (tu peux l’appeler sur un bouton)
|
||||
export function promptInstall() {
|
||||
if (deferredPrompt) {
|
||||
deferredPrompt.prompt();
|
||||
deferredPrompt.userChoice.then((choiceResult) => {
|
||||
if (choiceResult.outcome === 'accepted') {
|
||||
console.log('PWA installed');
|
||||
} else {
|
||||
console.log('PWA dismissed');
|
||||
}
|
||||
deferredPrompt.userChoice.then((choice) => {
|
||||
console.log('Install outcome:', choice.outcome);
|
||||
deferredPrompt = null;
|
||||
});
|
||||
} else {
|
||||
console.log('No install prompt available');
|
||||
}
|
||||
}
|
||||
|
||||
// Ajoute un bouton "Installer l’app" dans ton UI (optionnel)
|
||||
export function addInstallButton() {
|
||||
// Fonction pour ajouter le bouton dans TopBar (on l'appelle depuis TopBar.jsx)
|
||||
export function addPwaInstallButton(container) {
|
||||
const btn = document.createElement('button');
|
||||
btn.textContent = 'Installer SocioWire';
|
||||
btn.style.position = 'fixed';
|
||||
btn.style.bottom = '20px';
|
||||
btn.style.right = '20px';
|
||||
btn.style.padding = '10px 20px';
|
||||
btn.innerHTML = '<i class="fa-solid fa-download"></i> Installer'; // icône + texte
|
||||
btn.style.marginLeft = '10px';
|
||||
btn.style.padding = '6px 12px';
|
||||
btn.style.fontSize = '12px';
|
||||
btn.style.background = '#0ea5e9';
|
||||
btn.style.color = 'white';
|
||||
btn.style.border = 'none';
|
||||
btn.style.borderRadius = '8px';
|
||||
btn.style.borderRadius = '999px';
|
||||
btn.style.cursor = 'pointer';
|
||||
btn.style.zIndex = '9999';
|
||||
btn.style.display = 'flex';
|
||||
btn.style.alignItems = 'center';
|
||||
btn.style.gap = '6px';
|
||||
btn.onclick = promptInstall;
|
||||
document.body.appendChild(btn);
|
||||
}
|
||||
|
||||
// Détection si déjà installé (cache)
|
||||
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone) {
|
||||
console.log('App already installed');
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
|
@ -1,8 +1,57 @@
|
|||
Voici les 2 fichiers complets à copier-coller entièrement (remplace tout le contenu actuel) pour que le bouton "Installer SocioWire" soit :
|
||||
En haut (dans la TopBar, à côté des thèmes)
|
||||
Petit et beau (icône download + texte discret)
|
||||
Fonctionnel : clique → popup "Ajouter à l’écran d’accueil"
|
||||
1. src/pwaInstall.js (copie-colle tout)
|
||||
// src/pwaInstall.js
|
||||
let deferredPrompt = null;
|
||||
|
||||
window.addEventListener('beforeinstallprompt', (e) => {
|
||||
e.preventDefault();
|
||||
deferredPrompt = e;
|
||||
console.log('PWA install prompt ready');
|
||||
});
|
||||
|
||||
export function promptInstall() {
|
||||
if (deferredPrompt) {
|
||||
deferredPrompt.prompt();
|
||||
deferredPrompt.userChoice.then((choice) => {
|
||||
console.log('Install outcome:', choice.outcome);
|
||||
deferredPrompt = null;
|
||||
});
|
||||
} else {
|
||||
console.log('No install prompt available');
|
||||
}
|
||||
}
|
||||
|
||||
// Ajoute le bouton dans un container (appel depuis TopBar)
|
||||
export function addPwaInstallButton(container) {
|
||||
const btn = document.createElement('button');
|
||||
btn.innerHTML = '<i class="fa-solid fa-download"></i> Installer'; // icône + texte
|
||||
btn.style.marginLeft = '8px';
|
||||
btn.style.padding = '5px 10px';
|
||||
btn.style.fontSize = '12px';
|
||||
btn.style.background = '#0ea5e9';
|
||||
btn.style.color = 'white';
|
||||
btn.style.border = 'none';
|
||||
btn.style.borderRadius = '999px';
|
||||
btn.style.cursor = 'pointer';
|
||||
btn.style.display = 'flex';
|
||||
btn.style.alignItems = 'center';
|
||||
btn.style.gap = '6px';
|
||||
btn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)';
|
||||
btn.onclick = promptInstall;
|
||||
container.appendChild(btn);
|
||||
}
|
||||
2. src/components/Layout/TopBar.jsx (copie-colle tout)
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import { registerUser } from "../../api/client";
|
||||
import AuthToast from "../Auth/AuthToast";
|
||||
|
||||
// Import pour le bouton PWA
|
||||
import { addPwaInstallButton } from '../../pwaInstall';
|
||||
|
||||
const THEME_LABELS = { dark: "Dark", blue: "Blue", light: "Light" };
|
||||
const LAST_SIGNUP_KEY = "sociowire:lastSignup";
|
||||
|
||||
|
|
@ -33,9 +82,6 @@ function readLastSignup() {
|
|||
}
|
||||
|
||||
function parseMergedParams() {
|
||||
// Support both:
|
||||
// - /?verified=1&email=...
|
||||
// - /#/something?verified=1&email=...
|
||||
const search = window.location.search || "";
|
||||
const hash = window.location.hash || "";
|
||||
|
||||
|
|
@ -97,22 +143,18 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
setMode(nextMode);
|
||||
setShowAuth(true);
|
||||
setSignupError("");
|
||||
// keep signupInfo (so verify/signup notice stays visible)
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setShowAuth(false);
|
||||
setLoginPass("");
|
||||
setSignupError("");
|
||||
// keep signupInfo
|
||||
};
|
||||
|
||||
// Close auth modal automatically when logged in
|
||||
useEffect(() => {
|
||||
if (authenticated) setShowAuth(false);
|
||||
}, [authenticated]);
|
||||
|
||||
/* SW_URL_NOTICE:BEGIN */
|
||||
useEffect(() => {
|
||||
try {
|
||||
const { get, qs, hs, hash } = parseMergedParams();
|
||||
|
|
@ -141,7 +183,7 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
|
||||
if (truthyParam(verified)) {
|
||||
const who = (email || uname || last?.email || last?.username || "").trim();
|
||||
setSignupInfo(`✅ Email confirmé${who ? ` (${who})` : ""}. Tu peux te connecter.`);
|
||||
setSignupInfo(`✅ Email confirmé\( {who ? ` ( \){who})` : ""}. Tu peux te connecter.`);
|
||||
setMode("login");
|
||||
setShowAuth(true);
|
||||
|
||||
|
|
@ -149,7 +191,7 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
if (prefill) setLoginUser(prefill);
|
||||
} else if (truthyParam(signup)) {
|
||||
const who = (email || uname || last?.email || last?.username || "").trim();
|
||||
setSignupInfo(`✅ Compte créé${who ? ` (${who})` : ""}. Vérifie tes emails (et le spam), puis connecte-toi.`);
|
||||
setSignupInfo(`✅ Compte créé\( {who ? ` ( \){who})` : ""}. Vérifie tes emails (et le spam), puis connecte-toi.`);
|
||||
setMode("login");
|
||||
setShowAuth(true);
|
||||
|
||||
|
|
@ -164,7 +206,6 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
}
|
||||
}
|
||||
|
||||
// clean URL (remove params without reload) — both search and hash query
|
||||
const touched =
|
||||
qs.has("verified") || qs.has("email_verified") || qs.has("emailVerified") || qs.has("signup") || qs.has("notice") ||
|
||||
hs.has("verified") || hs.has("email_verified") || hs.has("emailVerified") || hs.has("signup") || hs.has("notice");
|
||||
|
|
@ -178,7 +219,14 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
// ignore
|
||||
}
|
||||
}, []);
|
||||
/* SW_URL_NOTICE:END */
|
||||
|
||||
// Ajoute le bouton PWA "Installer" en haut à côté des thèmes
|
||||
useEffect(() => {
|
||||
const container = document.getElementById('pwa-install-container');
|
||||
if (container) {
|
||||
addPwaInstallButton(container);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleLoginSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -209,7 +257,6 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
lastName: lastName.trim(),
|
||||
});
|
||||
|
||||
// Remember for the "verified" return
|
||||
try {
|
||||
localStorage.setItem(LAST_SIGNUP_KEY, JSON.stringify({ username: u, email: em }));
|
||||
} catch {}
|
||||
|
|
@ -265,7 +312,7 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Theme dots UNDER the brand (prevents topbar wrapping / overflow) */}
|
||||
{/* Theme dots + BOUTON INSTALL PWA */}
|
||||
<div className="brand-under">
|
||||
<div className="theme-switch">
|
||||
{["dark", "blue", "light"].map((t) => (
|
||||
|
|
@ -280,6 +327,9 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* BOUTON INSTALL PWA ici en haut */}
|
||||
<div id="pwa-install-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -306,7 +356,6 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Single button: Logon / Logoff (same spot, same style) */}
|
||||
<button
|
||||
className="btn-primary"
|
||||
type="button"
|
||||
|
|
@ -342,7 +391,6 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* Pretty notices inside modal */}
|
||||
{signupInfo ? <div className="auth-notice auth-notice-success">{signupInfo}</div> : null}
|
||||
{mode === "login" && lastError ? (
|
||||
<div className={"auth-notice " + (needsEmailVerification ? "auth-notice-warn" : "auth-notice-error")}>
|
||||
|
|
@ -418,3 +466,19 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|||
</>
|
||||
);
|
||||
}
|
||||
Instructions sur ton cell :
|
||||
src/pwaInstall.js : crée le fichier → copie-colle le code du 1er bloc
|
||||
src/components/Layout/TopBar.jsx : ouvre → remplace tout par le 2e bloc
|
||||
Sauvegarde
|
||||
Relance npm run dev
|
||||
Rafraîchis ton téléphone → bouton "Installer" (avec icône download) apparaît en haut à côté des thèmes (D B L)
|
||||
Clique → popup "Ajouter à l’écran d’accueil" apparaît
|
||||
Résultat :
|
||||
Bouton petit, bleu, discret en haut
|
||||
Fonctionne : clique → prompt PWA
|
||||
Le reste de ton site intact
|
||||
Commit :
|
||||
git add src/pwaInstall.js src/components/Layout/TopBar.jsx
|
||||
git commit -m "feat: PWA install button in topbar"
|
||||
git push
|
||||
Teste et envoie une capture si besoin ! On a tout fixé. 😊
|
||||
Loading…
Reference in New Issue