-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.jsx
153 lines (132 loc) · 4.36 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import Image from "next/image";
import React, { useEffect, useState } from "react";
import Form from "../components/Form";
import Meta from "../components/Meta";
import Reason from "../components/Reason";
import { generatePdf } from "../lib/pdf-util";
import useLocalStorage from "../lib/use-local-storage";
import { addSlash, openBlob, validateState } from "../lib/util";
export default function Home() {
const emptyState = {
lastname: "",
firstname: "",
birthday: "",
lieunaissance: "",
address: "",
zipcode: "",
town: "",
};
const [state, setState] = useLocalStorage(
"attestation-derogatoire",
emptyState
);
const [initialStateValid, setInitialStateValid] = useState(false);
useEffect(() => {
if (validateState(state)) {
setInitialStateValid(true);
}
const datesortie = new Date().toLocaleDateString("fr-FR");
const heuresortie = new Date().toLocaleTimeString("fr-FR", {
hour: "2-digit",
minute: "2-digit",
});
setState({ ...state, heuresortie, datesortie });
}, []);
useEffect(() => {
const interval = window.setInterval(() => {
const datesortie = new Date().toLocaleDateString("fr-FR");
const heuresortie = new Date().toLocaleTimeString("fr-FR", {
hour: "2-digit",
minute: "2-digit",
});
setState({ ...state, heuresortie, datesortie });
}, 5000);
return () => window.clearInterval(interval);
}, [state]);
const [stateValid, setStateValid] = useState(false);
useEffect(() => {
if (validateState(state)) {
setStateValid(true);
}
}, [state]);
const onChange = (event) => {
const input = event.target;
setState({ ...state, [input.id]: input.value });
};
const onDateKeyUp = (event) => {
const input = event.target;
const key = event.keyCode || event.charCode;
if (key !== 8 && key !== 46) {
setState({ ...state, [input.id]: addSlash(input.value) });
}
};
const onClick = async (event) => {
const reason = event.target.id;
const pdfBlob = await generatePdf(state, reason, "/certificate.pdf");
const creationInstant = new Date();
const creationDate = creationInstant.toLocaleDateString('fr-CA');
const creationHour = creationInstant
.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
.replace(':', '-');
openBlob(pdfBlob, `attestation-${creationDate}_${creationHour}.pdf`);
};
const emptyForm = () => {
setState(emptyState);
};
return (
<>
<Meta />
<div className="p-4 md:p-6 lg:p-12 max-w-2xl mx-auto">
<div className="h-8 w-8 mb-6">
<Image
alt="logo"
className="h-full w-full"
height={180}
src="/apple-touch-icon.png"
width={180}
/>
</div>
<div className="prose mb-12">
<h1>Attestation de déplacement dérogatoire</h1>
<p>
Remplissez le formulaire une fois, il sera sauvegardé sur votre
navigateur. Choisissez un motif pour télécharger une attestation à
l'heure et date actuelle.
</p>
<p>
Ce service n'est pas officiel mais délivre des attestations
conformes, en un clic.
</p>
</div>
{initialStateValid && (
<Reason stateValid={stateValid} onClick={onClick} />
)}
<Form state={state} onChange={onChange} onDateKeyUp={onDateKeyUp} />
{!initialStateValid && (
<Reason stateValid={stateValid} onClick={onClick} />
)}
<div className="w-full prose">
<a href="#" onClick={emptyForm}>
Oublier mes informations
</a>
<p>
Code source disponible sur{" "}
<a href="https://github.com/benjamintd/attestation.page">GitHub</a>,
inspiré des projets de{" "}
<a href="https://github.com/LAB-MI">Lab MI</a>.
</p>
<p>
Pour être certain d'avoir une attestation à jour, rendez-vous sur{" "}
<a href="https://media.interieur.gouv.fr/deplacement-covid-19/">
le site officiel
</a>{" "}
du Gouvernement.
</p>
{process.env.VERCEL_GITHUB_COMMIT_SHA && (
<p>version {process.env.VERCEL_GITHUB_COMMIT_SHA.slice(0, 8)}</p>
)}
</div>
</div>
</>
);
}