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> <h2 className="text-xl">{formHeading}</h2>
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<label className="label">Hostname</label> <label className="block py-1">Hostname</label>
<Field name="hostname" validate={hostNameValidator}> <Field name="hostname" validate={hostNameValidator}>
{({ input, meta }) => ( {({ input, meta }) => (
<div className="flex items-center rounded-md border border-gray-300"> <div className="flex items-center rounded-md border border-gray-300">
@@ -26,7 +26,7 @@ export const ConnectionForm = ({
<Field <Field
name="protocol" name="protocol"
component="select" 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>Protocol</option>
<option value="http">http://</option> <option value="http">http://</option>
@@ -37,19 +37,30 @@ export const ConnectionForm = ({
</div> </div>
</div> </div>
<input <Field name="hostname" validate={hostNameValidator}>
{...input} {({ input, meta }) => (
type="text" <div>
placeholder="hostname" <input
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" {...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 */} {/* port */}
<Field <Field
name="port" name="port"
component="input" 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" 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 && ( {meta.error && meta.touched && (
@@ -60,36 +71,44 @@ export const ConnectionForm = ({
</Field> </Field>
</div> </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="flex items-center rounded-md border border-gray-300">
<div className="relative"> <div className="relative">
<Field <Field
name="username" name="username"
component="input" 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" placeholder="Username"
/> />
<span className="absolute right-10 inset-y-0 flex items-center px-0 pointer-events-none"> <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]" /> <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> </span>
</div> </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>
<div className="field is-grouped"> <div className="field is-grouped">
<p className="control"> <button
<button type="submit" className="button is-primary"> 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"} {!isEmpty(initialData) ? "Update" : "Save"}
</button> </span>
</p> <span className="w-6 h-6">
<i className="h-6 w-6 icon-[solar--diskette-bold-duotone]"></i>
</span>
</button>
<p className="control"> <p className="control">
<button type="submit" className="button is-danger"> <button type="submit" className="button is-danger">