Improved HTML form checks in modal decryption key window

FlorianLeChat · Mar 4, 2024 · 5d76bb2 · 5d76bb2
1 parent 66ab357
commit 5d76bb2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 43 deletions.
diff --git a/app/[locale]/dashboard/components/file-history.tsx b/app/[locale]/dashboard/components/file-history.tsx
@@ -211,7 +211,7 @@ export default function FileHistory( {
 
 								{/* Accès au fichier */}
 								{version.encrypted ? (
-									<RequestKey url={`${ version.path }&key=`}>
+									<RequestKey url={version.path}>
 										<AlertDialogTrigger
 											className={merge(
 												buttonVariants(),

diff --git a/app/[locale]/dashboard/components/request-key.tsx b/app/[locale]/dashboard/components/request-key.tsx
@@ -4,8 +4,8 @@
 
 "use client";
 
+import { type ReactNode } from "react";
 import { Ban, ShieldCheck, ArrowUpRight } from "lucide-react";
-import { useRef, useState, type ReactNode } from "react";
 
 import { Input } from "../../components/ui/input";
 import { AlertDialog,
@@ -25,11 +25,9 @@ export default function RequestKey( {
 	children: ReactNode;
 } )
 {
-	// Déclaration des variables d'état.
-	const [ password, setPassword ] = useState( "" );
-
 	// Déclaration des constantes.
-	const access = useRef<HTMLButtonElement>( null );
+	const base = new URL( url, window.location.href );
+	const parameters = base.searchParams;
 
 	// Affichage du rendu HTML du composant.
 	return (
@@ -58,48 +56,40 @@ export default function RequestKey( {
 					</AlertDialogDescription>
 				</AlertDialogHeader>
 
-				<Input
-					onInput={( event ) =>
-					{
-						// Mise à jour de l'entrée utilisateur.
-						setPassword( event.currentTarget.value );
-					}}
-					onKeyDown={( event ) =>
-					{
-						// Soumission du formulaire par clavier.
-						if ( event.key.endsWith( "Enter" ) )
-						{
-							access.current?.click();
-						}
-					}}
-					spellCheck="false"
-					placeholder="your_key"
-					autoComplete="off"
-					autoCapitalize="off"
-				/>
+				<form
+					id="request-key-form"
+					rel="noopener noreferrer"
+					method="GET"
+					target="_blank"
+					action={base.href}
+				>
+					{/* Version d'un fichier */}
+					{parameters.get( "v" ) && (
+						<input
+							type="hidden"
+							name="v"
+							value={parameters.get( "v" ) as string}
+						/>
+					)}
+
+					{/* Clé de déchiffrement */}
+					<Input
+						name="key"
+						maxLength={64}
+						spellCheck="false"
+						placeholder="your_key"
+						autoComplete="off"
+						autoCapitalize="off"
+					/>
+				</form>
 
 				<AlertDialogFooter>
-					<AlertDialogCancel>
+					<AlertDialogCancel type="reset" form="request-key-form">
 						<Ban className="mr-2 h-4 w-4" />
 						Annuler
 					</AlertDialogCancel>
 
-					<AlertDialogAction
-						ref={access}
-						onClick={() =>
-						{
-							// Ouverture de la version dans un nouvel onglet.
-							window.open(
-								new URL(
-									`${ url }${ password }`,
-									window.location.href
-								).href,
-								"_blank",
-								"noopener,noreferrer"
-							);
-						}}
-						disabled={!password}
-					>
+					<AlertDialogAction type="submit" form="request-key-form">
 						<ArrowUpRight className="mr-2 h-4 w-4" />
 						Accéder
 					</AlertDialogAction>

diff --git a/app/[locale]/dashboard/components/row-actions.tsx b/app/[locale]/dashboard/components/row-actions.tsx
@@ -612,7 +612,7 @@ export default function RowActions( {
 
 				{/* Accès à la ressource */}
 				{dataFiles[ 0 ].versions[ 0 ].encrypted ? (
-					<RequestKey url={`${ dataFiles[ 0 ].path }?key=`}>
+					<RequestKey url={dataFiles[ 0 ].path}>
 						<AlertDialogTrigger asChild>
 							<DropdownMenuItem
 								// https://github.com/radix-ui/primitives/issues/1836#issuecomment-1674338372