frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🏗️ Form refactor

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-14 22:25:48 -05:00
parent a7508df0b3
commit 1f6d6ca6b6
1 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/client/components/shared/ConnectionForm/ConnectionForm.tsx
View File

@@ -18,7 +18,7 @@ export const ConnectionForm = ({
<h2 className="text-xl">{formHeading}</h2>
<div className="relative flex flex-col">
<label className="label">Hostname</label>
<label className="block py-1">Hostname</label>
<Field name="hostname" validate={hostNameValidator}>
{({ input, meta }) => (
<div className="flex items-center rounded-md border border-gray-300">
@@ -26,7 +26,7 @@ export const ConnectionForm = ({
<Field
name="protocol"
component="select"
className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 pr-6 pl-4 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
>
<option>Protocol</option>
<option value="http">http://</option>
@@ -37,19 +37,30 @@ export const ConnectionForm = ({
</div>
</div>
<input
{...input}
type="text"
placeholder="hostname"
className="ml-2 bg-transparent py-2 px-2 border-r border-gray-300 w-full h-10 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
/>
<Field name="hostname" validate={hostNameValidator}>
{({ input, meta }) => (
<div>
<input
{...input}
type="text"
placeholder="Hostname"
className="ml-2 bg-transparent py-2 px-2 border-r border-gray-300 w-full h-10 dark:text-slate-200 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
/>
{meta.error && meta.touched && (
<span className="is-size-7 has-text-danger">
{meta.error}
</span>
)}
</div>
)}
</Field>
{/* port */}
<Field
name="port"
component="input"
className="ml-2 bg-transparent py-2 px-2 block w-full rounded-md sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="port"
placeholder="Port"
/>
{meta.error && meta.touched && (
@@ -60,36 +71,44 @@ export const ConnectionForm = ({
</Field>
</div>
<label className="label">Credentials</label>
<label className="block py-1">Credentials</label>
<div className="flex items-center rounded-md border border-gray-300">
<div className="relative">
<Field
name="username"
component="input"
className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
className="relative left-7 top-0 h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Username"
/>
<span className="absolute right-10 inset-y-0 flex items-center px-0 pointer-events-none">
<i className="icon-[solar--user-bold-duotone]" />
<span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
<i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
</span>
</div>
<div className="relative">
<Field
name="password"
component="input"
type="password"
className="relative left-14 top-0 h-10 bg-transparent text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Password"
/>
<span className="absolute left-9 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
<i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
</span>
</div>
<Field
name="password"
component="input"
type="password"
className="input"
placeholder="Password"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-lock"></i>
</span>
</div>
<div className="field is-grouped">
<p className="control">
<button type="submit" className="button is-primary">
<button
className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
type="submit"
>
<span className="text-md">
{!isEmpty(initialData) ? "Update" : "Save"}
</button>
</p>
</span>
<span className="w-6 h-6">
<i className="h-6 w-6 icon-[solar--diskette-bold-duotone]"></i>
</span>
</button>
<p className="control">
<button type="submit" className="button is-danger">