regen nonce, code_challenge (#91)

Author: rohanharikr

src/lib/components/Icons/RedoIcon.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="2.5"
+	stroke="currentColor"
+	class="size-6 h-4 w-4"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+	/>
+</svg>

src/lib/components/Request/ProtocolParams.svelte

@@ -1,9 +1,11 @@
 <script>
 	import { slide } from 'svelte/transition';
 	import { PARAMS } from '$lib/constants.js';
+	import { validateProtocolParams as validate } from '$lib/validate.js';
+	import { generatePkce } from '$lib/utils';
 	import ChevronY from '$components/ChevronY.svelte';
 	import Tooltip from '$components/Tooltip.svelte';
-	import { validateProtocolParams as validate } from '$lib/validate.js';
+	import RedoIcon from '../Icons/RedoIcon.svelte';
 
 	let {
 		selectedProtocolParams = $bindable(),
@@ -12,6 +14,19 @@
 		selectedHelloParamsValues,
 		dropdowns = $bindable()
 	} = $props();
+
+	async function regen(param) {
+		if (param === 'nonce') {
+			const { nonce } = await generatePkce();
+			selectedProtocolParamsValues.nonce = nonce;
+		} else if (param === 'code_challenge') {
+			const { code_challenge, code_verifier } = await generatePkce();
+			selectedProtocolParamsValues.code_challenge = code_challenge;
+			selectedProtocolParamsValues.code_verifier = code_verifier;
+		} else {
+			console.error('Unknown parameter for regeneration', param);
+		}
+	}
 </script>
 
 <section class="break-inside-avoid-column">
@@ -94,13 +109,23 @@
 							{/each}
 						</ul>
 					{:else}
-						<input
-							type="text"
-							class="form-input h-6 w-full border px-2"
-							class:opacity-50={!selected}
-							bind:value={selectedProtocolParamsValues[param.NAME]}
-							placeholder={param.PLACEHOLDER}
-						/>
+						<div class="relative flex w-full items-center" class:opacity-50={!selected}>
+							{#if param.REGENERATE}
+								<button
+									onclick={() => regen(param.NAME)}
+									class="absolute right-0.5 z-10 inline-flex h-5 w-5 items-center justify-center border border-charcoal bg-charcoal dark:border-gray-800"
+								>
+									<RedoIcon />
+								</button>
+							{/if}
+							<input
+								type="text"
+								class="form-input h-6 w-full border px-2"
+								class:pr-6={param.REGENERATE}
+								bind:value={selectedProtocolParamsValues[param.NAME]}
+								placeholder={param.PLACEHOLDER}
+							/>
+						</div>
 					{/if}
 				</li>
 			{/each}

src/lib/constants.js

@@ -32,7 +32,8 @@ const PROTOCOL_PARAM = {
 		},
 		{
 			NAME: 'nonce',
-			POSSIBLE_VALUE: ''
+			POSSIBLE_VALUE: '',
+			REGENERATE: true
 		},
 		{
 			NAME: 'response_type',
@@ -41,7 +42,8 @@ const PROTOCOL_PARAM = {
 		},
 		{
 			NAME: 'code_challenge',
-			POSSIBLE_VALUE: ''
+			POSSIBLE_VALUE: '',
+			REGENERATE: true
 		},
 		{
 			NAME: 'code_verifier',