Update app/components/repas/credentials.tsx
Some checks failed
Deploy to Netlify / Deploy to Netlify (push) Has been cancelled
Some checks failed
Deploy to Netlify / Deploy to Netlify (push) Has been cancelled
This commit is contained in:
parent
b1f9f903c0
commit
ae7a887af7
1 changed files with 32 additions and 142 deletions
|
|
@ -1,157 +1,47 @@
|
||||||
import { Github, Loader2, Save } from "lucide-react";
|
import { Utensils } from "lucide-react";
|
||||||
import { Button } from "../ui/button";
|
import { Button } from "../ui/button";
|
||||||
import { Card } from "../ui/card";
|
import { Card } from "../ui/card";
|
||||||
import { Input } from "../ui/input";
|
|
||||||
import { Label } from "../ui/label";
|
|
||||||
import { Link } from "react-router";
|
|
||||||
import { getCredentialsStatus, testCredentials } from "~/lib/api";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import MealRegistration from "./registration";
|
|
||||||
|
|
||||||
export default function BJRepas() {
|
export default function BJRepas() {
|
||||||
const credentials = getSavedCredentials();
|
|
||||||
|
|
||||||
if (credentials) {
|
|
||||||
return <MealRegistration credentials={credentials} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [username, setUsername] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
|
|
||||||
let intervalId: NodeJS.Timeout | null = null;
|
|
||||||
const [isLoading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const handleSaveCredentials = async () => {
|
|
||||||
try {
|
|
||||||
if (!username || !password) {
|
|
||||||
toast.error(
|
|
||||||
"Veuillez renseigner vos identifiants BJColle avant de continuer."
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await testCredentials(username, password);
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// Try every second to check if the credentials are valid
|
|
||||||
intervalId = setInterval(async () => {
|
|
||||||
try {
|
|
||||||
const res = await getCredentialsStatus();
|
|
||||||
|
|
||||||
// Credentials are valid
|
|
||||||
if (res.authenticated === "SUCCESS") {
|
|
||||||
saveCredentials(username, password);
|
|
||||||
toast.success("Vos identifiants ont été enregistrés avec succès.");
|
|
||||||
setLoading(false);
|
|
||||||
if (intervalId) clearInterval(intervalId);
|
|
||||||
// Reload the page to reflect the changes
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
// Credentials are invalid
|
|
||||||
if (res.authenticated === "ERROR") {
|
|
||||||
toast.error(
|
|
||||||
"Identifiants invalides. Veuillez vérifier votre nom d'utilisateur et mot de passe."
|
|
||||||
);
|
|
||||||
setUsername("");
|
|
||||||
setPassword("");
|
|
||||||
setLoading(false);
|
|
||||||
if (intervalId) clearInterval(intervalId);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error testing credentials:", error);
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error testing credentials:", error);
|
|
||||||
toast.error(
|
|
||||||
"Une erreur est survenue lors de la validation des identifiants. Veuillez réessayer plus tard."
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 px-2">
|
<div className="space-y-4 px-2">
|
||||||
<h2 className="text-2xl font-bold">Inscription aux repas</h2>
|
<h2 className="text-2xl font-bold">Inscription aux repas</h2>
|
||||||
|
|
||||||
<p className="text-muted-foreground text-sm">
|
<Card className="space-y-4 p-6 my-6">
|
||||||
Pour vous inscrire aux repas (via BJ Repas), veuillez renseigner vos
|
<div className="flex flex-col items-center text-center space-y-4">
|
||||||
identifiants BJColle ci-dessous.
|
<div className="rounded-full bg-muted p-3">
|
||||||
</p>
|
<Utensils className="h-6 w-6 text-muted-foreground" />
|
||||||
<p className="text-muted-foreground text-xs">
|
</div>
|
||||||
Vos identifiants sont enregistrés localement sur votre appareil et ne
|
|
||||||
sont jamais stockés sur nos serveurs.
|
<div className="space-y-2">
|
||||||
</p>
|
<h3 className="text-lg font-semibold">
|
||||||
|
L'inscription aux repas est désactivée
|
||||||
|
</h3>
|
||||||
|
<p className="text-muted-foreground text-sm max-w-md">
|
||||||
|
Afin de réduire le gaspillage alimentaire à la cantine, veuillez
|
||||||
|
vous inscrire directement sur BJColle pour indiquer les jours où
|
||||||
|
vous mangerez au restaurant scolaire.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Card className="space-y-4 p-4 my-6">
|
<Button
|
||||||
<div className="space-y-4">
|
asChild
|
||||||
<h4 className="text-lg font-semibold">Vos identifiants BJColle</h4>
|
className="w-full max-w-sm"
|
||||||
<div>
|
|
||||||
<Label htmlFor="username">Nom d'utilisateur</Label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
id="username"
|
|
||||||
value={username}
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
placeholder="Entrez votre nom d'utilisateur"
|
|
||||||
className="mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="password">Mot de passe</Label>
|
|
||||||
<Input
|
|
||||||
type="password"
|
|
||||||
id="password"
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
placeholder="Entrez votre mot de passe"
|
|
||||||
className="mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
className="w-full"
|
|
||||||
onClick={handleSaveCredentials}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
<a
|
||||||
<>
|
href="https://bjcolle.fr/no_waste.php"
|
||||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
target="_blank"
|
||||||
Vérification en cours...
|
rel="noopener noreferrer"
|
||||||
</>
|
>
|
||||||
) : (
|
Aller sur BJColle
|
||||||
<>
|
</a>
|
||||||
<Save className="mr-2 h-4 w-4" />
|
|
||||||
Enregistrer mes identifiants
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<div className="flex justify-center items-center flex-col space-y-1">
|
|
||||||
<p className="text-sm text-muted-foreground text-center">
|
<p className="text-muted-foreground text-xs text-center">
|
||||||
Pour en savoir plus sur la sécurité et la confidentialité, consultez
|
Merci de votre participation pour limiter le gaspillage alimentaire.
|
||||||
le code source du projet.{" "}
|
</p>
|
||||||
</p>
|
|
||||||
<Link to={import.meta.env.VITE_GITHUB_URL} target="_blank">
|
|
||||||
<Button variant="link" size="sm" className="p-0">
|
|
||||||
<Github className="h-4 w-4" />
|
|
||||||
Khollisé sur GitHub
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveCredentials = (username: string, password: string) => {
|
|
||||||
localStorage.setItem("bj_username", username);
|
|
||||||
localStorage.setItem("bj_password", password);
|
|
||||||
};
|
|
||||||
export const getSavedCredentials = () => {
|
|
||||||
const username = localStorage.getItem("bj_username");
|
|
||||||
const password = localStorage.getItem("bj_password");
|
|
||||||
if (username && password) {
|
|
||||||
return { username, password };
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
Loading…
Add table
Reference in a new issue