TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- refactored bearer form

Browse Source 
- started refactoring Channel form
This commit is contained in:
Toba Ojo
2025-10-07 11:37:37 +01:00
parent 5e34590e5c
commit 3e564b933d
5 changed files with 238 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
View File

@@ -1,72 +1,89 @@
import { Field, useFormikContext } from "formik";
import { Field, Form, Formik } from "formik";
import FormGroup from "../components/FormGroup";
import { useState } from "react";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const ChannelFields = () => {
useFormikContext();
const [showPwd, setShowPwd] = useState(false);
const initialValues = {
backOfficeURL: "",
username: "",
password: "",
connectTimeoutSeconds: 0,
readTimeoutSeconds: 0,
};
const handleSubmit = (values) => {
console.log(values);
};
return (
<div className="flex flex-col space-y-2 px-2">
<FormGroup>
<label htmlFor="backoffice" className="m-0">
Back Office URL
</label>
<Field
name={"backOfficeURL"}
type="text"
id="backoffice"
placeholder="https://www.backoffice.com"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
<FormGroup>
<label htmlFor="username">Username</label>
<Field
name={"username"}
type="text"
id="username"
placeholder="Back office username"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
<FormGroup>
<label htmlFor="password">Password</label>
<Field
name={"password"}
type={showPwd ? "text" : "password"}
id="password"
placeholder="Back office password"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
<FontAwesomeIcon
type="button"
className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye}
/>
</FormGroup>
<FormGroup>
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
<Field
name={"connectTimeoutSeconds"}
type="number"
id="connectTimeoutSeconds"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
<FormGroup>
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
<Field
name={"readTimeoutSeconds"}
type="number"
id="readTimeoutSeconds"
placeholder="https://example.com"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
</div>
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<div className="flex flex-col space-y-2 px-2">
<FormGroup>
<label htmlFor="backoffice" className="m-0">
Back Office URL
</label>
<Field
name={"backOfficeURL"}
type="text"
id="backoffice"
placeholder="https://www.backoffice.com"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
<FormGroup>
<label htmlFor="username">Username</label>
<Field
name={"username"}
type="text"
id="username"
placeholder="Back office username"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
<FormGroup>
<label htmlFor="password">Password</label>
<Field
name={"password"}
type={showPwd ? "text" : "password"}
id="password"
placeholder="Back office password"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
<FontAwesomeIcon
type="button"
className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye}
/>
</FormGroup>
<FormGroup>
<label htmlFor="connectTimeoutSeconds">
Connect Timeout Seconds
</label>
<Field
name={"connectTimeoutSeconds"}
type="number"
id="connectTimeoutSeconds"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
<FormGroup>
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
<Field
name={"readTimeoutSeconds"}
type="number"
id="readTimeoutSeconds"
placeholder="https://example.com"
className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
/>
</FormGroup>
</div>
</Form>
</Formik>
);
};