Skip to content

Commit

Permalink
feat: add MyKeyForm and MyKeyPage components for secret key translati…
Browse files Browse the repository at this point in the history 
…on testing
  • Loading branch information
@gabriel-logan
gabriel-logan committed Nov 1, 2024
1 parent 1317ec7 commit 2c80ba2
Show file tree
Hide file tree
Showing 2 changed files with 242 additions and 0 deletions.
176 changes: 176 additions & 0 deletions docs/src/app/[locale]/mykey/Form.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
"use client";

import { useFormState, useFormStatus } from "react-dom";

const initialState = {
message: "",
};

export default function MyKeyForm({
translateLocal,
}: Readonly<{
translateLocal: (
prevState: any,
formData: FormData,
) => Promise<{
message: string;
}>;
}>) {
const [state, formAction] = useFormState(translateLocal, initialState);

return (
<form action={formAction} method="post" className="space-y-5">
<div>
<label
htmlFor="ownkey"
className="mb-1 block text-sm font-medium text-gray-700"
>
Secret Key
</label>
<input
type="text"
name="ownkey"
id="ownkey"
className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
placeholder="Enter your secret key"
/>
</div>
<div>
<label
htmlFor="ownendpoint"
className="mb-1 block text-sm font-medium text-gray-700"
>
Azure Endpoint
</label>
<input
type="text"
name="ownendpoint"
id="ownendpoint"
className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
placeholder="Enter your Azure endpoint"
defaultValue="https://api.cognitive.microsofttranslator.com"
/>
</div>
<div>
<label
htmlFor="ownlocation"
className="mb-1 block text-sm font-medium text-gray-700"
>
Location
</label>
<input
type="text"
name="ownlocation"
id="ownlocation"
className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
placeholder="Enter your location: e.g. westus"
/>
</div>

<div className="space-y-2">
<label
htmlFor="ownfromlang"
className="mb-1 block text-sm font-medium text-gray-700"
>
From Language
</label>
<select
name="ownfromlang"
id="ownfromlang"
className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
defaultValue="en"
>
<option value="en">English</option>
<option value="pt">Portuguese</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="es">Spanish</option>
</select>

<label
htmlFor="owntolang"
className="mb-1 block text-sm font-medium text-gray-700"
>
To Languages
</label>

<select
name="owntolang"
id="owntolang"
className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
defaultValue="pt"
>
<option value="en">English</option>
<option value="pt">Portuguese</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="es">Spanish</option>
</select>
</div>

<div>
<label
htmlFor="owntexttotranslate"
className="mb-1 block text-sm font-medium text-gray-700"
>
Text to translate
</label>
<textarea
name="owntexttotranslate"
id="owntexttotranslate"
className="max-h-60 min-h-20 w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
placeholder="Enter text to translate"
/>
</div>
<div>
<label
htmlFor="owntexttranslated"
className="mb-1 block text-sm font-medium text-gray-700"
>
Translated text (if any)
</label>
<textarea
name="owntexttranslated"
id="owntexttranslated"
disabled
className="max-h-40 min-h-32 w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
placeholder="Translated text will appear here"
value={state.message}
/>
</div>
<div className="text-center">
<Button />
</div>
</form>
);
}

function Button() {
const { pending } = useFormStatus();

return (
<>
{pending ? (
<LoadingSpinner />
) : (
<button
type="submit"
disabled={pending}
className="mt-6 inline-flex items-center justify-center rounded-md bg-blue-600 px-5 py-3 font-semibold text-white transition duration-150 ease-in-out hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
>
Test Key
</button>
)}
</>
);
}

function LoadingSpinner() {
return (
<div className="flex items-center justify-center">
<div className="h-16 w-16 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
</div>
);
}
66 changes: 66 additions & 0 deletions docs/src/app/[locale]/mykey/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { translateText } from "azure-translator-code";

import MyKeyForm from "./Form";

export default async function MyKeyPage() {
async function translateLocal(prevState: any, formData: FormData) {
"use server";
const data = {
secretKey: formData.get("ownkey") as string,
endpoint: formData.get("ownendpoint") as string,
location: formData.get("ownlocation") as string,
text: formData.get("owntexttotranslate") as string,
fromLang: formData.get("ownfromlang") as string,
toLang: formData.get("owntolang") as string,
};

try {
if (
!data.secretKey.trim() ||
!data.endpoint.trim() ||
!data.location.trim() ||
!data.text.trim() ||
!data.fromLang.trim() ||
!data.toLang.trim()
) {
return {
message: "Please fill in all fields",
};
}

const response = await translateText(
data.text,
data.fromLang,
[data.toLang],
data.endpoint,
data.secretKey,
data.location,
);

return {
message: response[0].translations[0].text as unknown as string,
};
} catch {
return {
message: "An error occurred, check your secret key and try again",
};
}
}
return (
<main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-blue-200 p-4 sm:p-8">
<div className="relative mx-auto mt-5 w-full max-w-3xl rounded-lg bg-white p-8 shadow-lg">
<h1 className="mb-6 text-center text-3xl font-extrabold text-gray-800">
Test your Secret Key
</h1>
<p className="mb-6 text-center text-lg text-gray-600">
Enter your secret key, endpoint, location, text to translate, and
translation languages to test your key. !!! IMPORTANT !!! We do not
store your secret key, endpoint, location, or any other information
you enter here. This is a test page to check if your key is working
correctly.
</p>
<MyKeyForm translateLocal={translateLocal} />
</div>
</main>
);
}

0 comments on commit 2c80ba2

Please sign in to comment.