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 { 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() {
|
||||
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 (
|
||||
<div className="space-y-4 px-2">
|
||||
<h2 className="text-2xl font-bold">Inscription aux repas</h2>
|
||||
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Pour vous inscrire aux repas (via BJ Repas), veuillez renseigner vos
|
||||
identifiants BJColle ci-dessous.
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Vos identifiants sont enregistrés localement sur votre appareil et ne
|
||||
sont jamais stockés sur nos serveurs.
|
||||
</p>
|
||||
<Card className="space-y-4 p-6 my-6">
|
||||
<div className="flex flex-col items-center text-center space-y-4">
|
||||
<div className="rounded-full bg-muted p-3">
|
||||
<Utensils className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<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">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-lg font-semibold">Vos identifiants BJColle</h4>
|
||||
<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}
|
||||
<Button
|
||||
asChild
|
||||
className="w-full max-w-sm"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Vérification en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
Enregistrer mes identifiants
|
||||
</>
|
||||
)}
|
||||
<a
|
||||
href="https://bjcolle.fr/no_waste.php"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Aller sur BJColle
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex justify-center items-center flex-col space-y-1">
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
Pour en savoir plus sur la sécurité et la confidentialité, consultez
|
||||
le code source du projet.{" "}
|
||||
</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>
|
||||
|
||||
<p className="text-muted-foreground text-xs text-center">
|
||||
Merci de votre participation pour limiter le gaspillage alimentaire.
|
||||
</p>
|
||||
</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