mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 16:59:12 +00:00
feat(irc): support optional SASL and NickServ auth (#511)
* feat(irc): support SASL and NickServ auth * feat(irc): add missing fields * feat(irc): support SASL and NickServ auth * feat(irc): add missing fields * feat(irc): add validation * feat(indexers): unify and set required values * feat(irc): add postgres migrations * feat(irc): use nick as handlerkey * feat(irc): use account for nickserv * fix(irc): pg db migration
This commit is contained in:
ze0s
GitHub
parent
4ef0408f33
commit
4bf023d030
65 changed files with 1404 additions and 631 deletions
|
|
@ -2,7 +2,7 @@ import { Fragment, useState } from "react";
|
|||
import { toast } from "react-hot-toast";
|
||||
import { useMutation, useQuery } from "react-query";
|
||||
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
|
||||
import type { FieldProps } from "formik";
|
||||
import type { FieldProps, FormikErrors } from "formik";
|
||||
import { Field, Form, Formik, FormikValues } from "formik";
|
||||
|
||||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||
|
|
@ -16,46 +16,53 @@ import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../compone
|
|||
import { SlideOver } from "../../components/panels";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
|
||||
const Input = (props: InputProps) => {
|
||||
return (
|
||||
<components.Input
|
||||
{...props}
|
||||
inputClassName="outline-none border-none shadow-none focus:ring-transparent"
|
||||
className="text-gray-400 dark:text-gray-100"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const Input = (props: InputProps) => (
|
||||
<components.Input
|
||||
{...props}
|
||||
inputClassName="outline-none border-none shadow-none focus:ring-transparent"
|
||||
className="text-gray-400 dark:text-gray-100"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
|
||||
const Control = (props: ControlProps) => {
|
||||
return (
|
||||
<components.Control
|
||||
{...props}
|
||||
className="block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const Control = (props: ControlProps) => (
|
||||
<components.Control
|
||||
{...props}
|
||||
className="p-1 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
|
||||
const Menu = (props: MenuProps) => {
|
||||
return (
|
||||
<components.Menu
|
||||
{...props}
|
||||
className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const Menu = (props: MenuProps) => (
|
||||
<components.Menu
|
||||
{...props}
|
||||
className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm cursor-pointer"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
|
||||
const Option = (props: OptionProps) => {
|
||||
return (
|
||||
<components.Option
|
||||
{...props}
|
||||
className="dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const Option = (props: OptionProps) => (
|
||||
<components.Option
|
||||
{...props}
|
||||
className="dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-900 dark:focus:bg-gray-900 cursor-pointer"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
|
||||
// const isRequired = (message: string) => (value?: string | undefined) => (!!value ? undefined : message);
|
||||
|
||||
function validateField(s: IndexerSetting) {
|
||||
return (value?: string | undefined) => {
|
||||
if (s.required) {
|
||||
if (s.default !== "") {
|
||||
if (value && s.default === value) {
|
||||
return "Default value, please edit";
|
||||
}
|
||||
}
|
||||
return !!value ? undefined : "Required";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const IrcSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
||||
if (indexer !== "") {
|
||||
|
|
@ -66,18 +73,19 @@ const IrcSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
<div className="px-4 space-y-1">
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">IRC</Dialog.Title>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-200">
|
||||
Networks, channels and invite commands are configured automatically.
|
||||
Networks and channels are configured automatically in the background.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{ind.irc.settings.map((f: IndexerSetting, idx: number) => {
|
||||
switch (f.type) {
|
||||
case "text":
|
||||
return <TextFieldWide name={`irc.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} />;
|
||||
return <TextFieldWide name={`irc.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} validate={validateField(f)} />;
|
||||
case "secret":
|
||||
if (f.name === "invite_command") {
|
||||
return <PasswordFieldWide name={`irc.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultVisible={true} defaultValue={f.default} />;
|
||||
return <PasswordFieldWide name={`irc.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultVisible={true} defaultValue={f.default} validate={validateField(f)} />;
|
||||
}
|
||||
return <PasswordFieldWide name={`irc.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultValue={f.default} />;
|
||||
return <PasswordFieldWide name={`irc.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultValue={f.default} validate={validateField(f)} />;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
|
|
@ -101,14 +109,14 @@ const FeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<TextFieldWide name="name" label="Name" defaultValue={""} />
|
||||
<TextFieldWide name="name" label="Name" defaultValue="" />
|
||||
|
||||
{ind.torznab.settings.map((f: IndexerSetting, idx: number) => {
|
||||
switch (f.type) {
|
||||
case "text":
|
||||
return <TextFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} />;
|
||||
return <TextFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} validate={validateField(f)} />;
|
||||
case "secret":
|
||||
return <PasswordFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultValue={f.default} />;
|
||||
return <PasswordFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultValue={f.default} validate={validateField(f)} />;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
|
|
@ -132,14 +140,14 @@ const RSSFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<TextFieldWide name="name" label="Name" defaultValue={""} />
|
||||
<TextFieldWide name="name" label="Name" defaultValue="" />
|
||||
|
||||
{ind.rss.settings.map((f: IndexerSetting, idx: number) => {
|
||||
switch (f.type) {
|
||||
case "text":
|
||||
return <TextFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} />;
|
||||
return <TextFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} validate={validateField(f)} />;
|
||||
case "secret":
|
||||
return <PasswordFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultValue={f.default} />;
|
||||
return <PasswordFieldWide name={`feed.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} defaultValue={f.default} validate={validateField(f)} />;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
|
|
@ -158,11 +166,11 @@ const SettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
switch (f.type) {
|
||||
case "text":
|
||||
return (
|
||||
<TextFieldWide name={`settings.${f.name}`} label={f.label} key={idx} help={f.help} defaultValue="" />
|
||||
<TextFieldWide name={`settings.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} validate={validateField(f)} />
|
||||
);
|
||||
case "secret":
|
||||
return (
|
||||
<PasswordFieldWide name={`settings.${f.name}`} label={f.label} key={idx} help={f.help} defaultValue="" />
|
||||
<PasswordFieldWide name={`settings.${f.name}`} label={f.label} required={f.required} key={idx} help={f.help} validate={validateField(f)} />
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
|
@ -184,24 +192,14 @@ function slugIdentifier(name: string, prefix?: string) {
|
|||
return slugify(l);
|
||||
}
|
||||
|
||||
// interface initialValues {
|
||||
// enabled: boolean;
|
||||
// identifier: string;
|
||||
// implementation: string;
|
||||
// name: string;
|
||||
// irc?: Record<string, unknown>;
|
||||
// feed?: Record<string, unknown>;
|
||||
// settings?: Record<string, unknown>;
|
||||
// }
|
||||
|
||||
type SelectValue = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
interface AddProps {
|
||||
isOpen: boolean;
|
||||
toggle: () => void;
|
||||
isOpen: boolean;
|
||||
toggle: () => void;
|
||||
}
|
||||
|
||||
export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
||||
|
|
@ -238,6 +236,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
);
|
||||
|
||||
const onSubmit = (formData: FormikValues) => {
|
||||
console.log("form: ", formData);
|
||||
const ind = data && data.find(i => i.identifier === formData.identifier);
|
||||
if (!ind)
|
||||
return;
|
||||
|
|
@ -319,11 +318,22 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
server: ind.irc.server,
|
||||
port: ind.irc.port,
|
||||
tls: ind.irc.tls,
|
||||
nickserv: formData.irc.nickserv,
|
||||
nick: formData.irc.nick,
|
||||
auth: {
|
||||
mechanism: "NONE"
|
||||
// account: formData.irc.auth.account,
|
||||
// password: formData.irc.auth.password
|
||||
},
|
||||
invite_command: formData.irc.invite_command,
|
||||
channels: channels
|
||||
};
|
||||
|
||||
if (formData.irc.auth.account !== "" && formData.irc.auth.password !== "") {
|
||||
network.auth.mechanism = "SASL_PLAIN";
|
||||
network.auth.account = formData.irc.auth.account;
|
||||
network.auth.password = formData.irc.auth.password;
|
||||
}
|
||||
|
||||
mutation.mutate(formData as Indexer, {
|
||||
onSuccess: () => {
|
||||
ircMutation.mutate(network);
|
||||
|
|
@ -356,9 +366,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
identifier: "",
|
||||
implementation: "irc",
|
||||
name: "",
|
||||
irc: {
|
||||
invite_command: ""
|
||||
},
|
||||
irc: {},
|
||||
settings: {}
|
||||
}}
|
||||
onSubmit={onSubmit}
|
||||
|
|
@ -369,11 +377,11 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
|
||||
<div className="flex items-start justify-between space-x-3">
|
||||
<div className="space-y-1">
|
||||
<Dialog.Title
|
||||
className="text-lg font-medium text-gray-900 dark:text-white">Add
|
||||
indexer</Dialog.Title>
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
|
||||
Add indexer
|
||||
</Dialog.Title>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-200">
|
||||
Add indexer.
|
||||
Add indexer.
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-7 flex items-center">
|
||||
|
|
@ -425,19 +433,21 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
onChange={(option: unknown) => {
|
||||
resetForm();
|
||||
|
||||
const opt = option as SelectValue;
|
||||
setFieldValue("name", opt.label ?? "");
|
||||
setFieldValue(field.name, opt.value ?? "");
|
||||
if (option != null) {
|
||||
const opt = option as SelectValue;
|
||||
setFieldValue("name", opt.label ?? "");
|
||||
setFieldValue(field.name, opt.value ?? "");
|
||||
|
||||
const ind = data && data.find(i => i.identifier === opt.value);
|
||||
if (ind) {
|
||||
setIndexer(ind);
|
||||
setFieldValue("implementation", ind.implementation);
|
||||
const ind = data && data.find(i => i.identifier === opt.value);
|
||||
if (ind) {
|
||||
setIndexer(ind);
|
||||
setFieldValue("implementation", ind.implementation);
|
||||
|
||||
if (ind.irc && ind.irc.settings) {
|
||||
ind.irc.settings.forEach((s) => {
|
||||
setFieldValue(`irc.${s.name}`, s.default ?? "");
|
||||
});
|
||||
if (ind.irc && ind.irc.settings) {
|
||||
ind.irc.settings.forEach((s) => {
|
||||
setFieldValue(`irc.${s.name}`, s.default ?? "");
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
|
@ -471,13 +481,13 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
|
||||
onClick={toggle}
|
||||
>
|
||||
Cancel
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
|
||||
>
|
||||
Save
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -517,6 +527,8 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
|
|||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["indexer"]);
|
||||
toast.custom((t) => <Toast type="success" body={`${indexer.name} was deleted.`} t={t} />);
|
||||
|
||||
toggle();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,8 @@ interface IrcNetworkAddFormValues {
|
|||
port: number;
|
||||
tls: boolean;
|
||||
pass: string;
|
||||
nickserv: NickServ;
|
||||
nick: string;
|
||||
auth: IrcAuth;
|
||||
channels: IrcChannel[];
|
||||
}
|
||||
|
||||
|
|
@ -114,6 +115,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
|
|||
const onSubmit = (data: unknown) => {
|
||||
mutation.mutate(data as IrcNetwork);
|
||||
};
|
||||
|
||||
const validate = (values: FormikValues) => {
|
||||
const errors = {} as FormikErrors<FormikValues>;
|
||||
if (!values.name)
|
||||
|
|
@ -125,8 +127,11 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
|
|||
if (!values.server)
|
||||
errors.server = "Required";
|
||||
|
||||
if (!values.nickserv || !values.nickserv.account)
|
||||
errors.nickserv = { account: "Required" };
|
||||
if (!values.nick)
|
||||
errors.nick = "Required";
|
||||
|
||||
// if (!values.auth || !values.auth.account)
|
||||
// errors.auth = { account: "Required" };
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
|
@ -138,7 +143,9 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
|
|||
port: 6667,
|
||||
tls: false,
|
||||
pass: "",
|
||||
nickserv: {
|
||||
nick: "",
|
||||
auth: {
|
||||
mechanism: "SASL_PLAIN",
|
||||
account: ""
|
||||
},
|
||||
channels: []
|
||||
|
|
@ -185,14 +192,20 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
|
|||
help="Network password"
|
||||
/>
|
||||
<TextFieldWide
|
||||
name="nickserv.account"
|
||||
label="NickServ Account"
|
||||
placeholder="NickServ Account"
|
||||
name="nick"
|
||||
label="Nick"
|
||||
placeholder="bot nick"
|
||||
required={true}
|
||||
/>
|
||||
<TextFieldWide
|
||||
name="auth.account"
|
||||
label="Auth Account"
|
||||
placeholder="Auth Account"
|
||||
required={true}
|
||||
/>
|
||||
<PasswordFieldWide
|
||||
name="nickserv.password"
|
||||
label="NickServ Password"
|
||||
name="auth.password"
|
||||
label="Auth Password"
|
||||
/>
|
||||
<PasswordFieldWide name="invite_command" label="Invite command" />
|
||||
|
||||
|
|
@ -210,8 +223,9 @@ interface IrcNetworkUpdateFormValues {
|
|||
server: string;
|
||||
port: number;
|
||||
tls: boolean;
|
||||
nickserv?: NickServ;
|
||||
pass: string;
|
||||
nick: string;
|
||||
auth?: IrcAuth;
|
||||
invite_command: string;
|
||||
channels: Array<IrcChannel>;
|
||||
}
|
||||
|
|
@ -245,6 +259,7 @@ export function IrcNetworkUpdateForm({
|
|||
});
|
||||
|
||||
const onSubmit = (data: unknown) => {
|
||||
console.log("submit: ", data);
|
||||
mutation.mutate(data as IrcNetwork);
|
||||
};
|
||||
|
||||
|
|
@ -263,10 +278,8 @@ export function IrcNetworkUpdateForm({
|
|||
errors.port = "Required";
|
||||
}
|
||||
|
||||
if (!values.nickserv?.account) {
|
||||
errors.nickserv = {
|
||||
account: "Required"
|
||||
};
|
||||
if (!values.nick) {
|
||||
errors.nick = "Required";
|
||||
}
|
||||
|
||||
return errors;
|
||||
|
|
@ -283,10 +296,11 @@ export function IrcNetworkUpdateForm({
|
|||
server: network.server,
|
||||
port: network.port,
|
||||
tls: network.tls,
|
||||
nickserv: network.nickserv,
|
||||
nick: network.nick,
|
||||
pass: network.pass,
|
||||
channels: network.channels,
|
||||
invite_command: network.invite_command
|
||||
auth: network.auth,
|
||||
invite_command: network.invite_command,
|
||||
channels: network.channels
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -328,19 +342,44 @@ export function IrcNetworkUpdateForm({
|
|||
<PasswordFieldWide
|
||||
name="pass"
|
||||
label="Password"
|
||||
help="Network password"
|
||||
help="Network password, not commonly used."
|
||||
/>
|
||||
|
||||
<TextFieldWide
|
||||
name="nickserv.account"
|
||||
label="NickServ Account"
|
||||
placeholder="NickServ Account"
|
||||
name="nick"
|
||||
label="Nick"
|
||||
placeholder="nick"
|
||||
required={true}
|
||||
/>
|
||||
<PasswordFieldWide
|
||||
name="nickserv.password"
|
||||
label="NickServ Password"
|
||||
/>
|
||||
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
|
||||
<div className="px-4 space-y-1 mb-8">
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Identification</Dialog.Title>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Identify with SASL or NickServ. Most networks support SASL but some don't.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SelectField<IrcAuthMechanism>
|
||||
name="auth.mechanism"
|
||||
label="Mechanism"
|
||||
options={IrcAuthMechanismTypeOptions}
|
||||
/>
|
||||
|
||||
<TextFieldWide
|
||||
name="auth.account"
|
||||
label="Account"
|
||||
placeholder="Auth Account"
|
||||
help="NickServ / SASL account. For grouped nicks try the main."
|
||||
/>
|
||||
|
||||
<PasswordFieldWide
|
||||
name="auth.password"
|
||||
label="Password"
|
||||
help="NickServ / SASL password."
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<PasswordFieldWide name="invite_command" label="Invite command" />
|
||||
|
||||
|
|
@ -349,4 +388,118 @@ export function IrcNetworkUpdateForm({
|
|||
)}
|
||||
</SlideOver>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface SelectFieldProps<T> {
|
||||
name: string;
|
||||
label: string;
|
||||
options: OptionBasicTyped<T>[]
|
||||
}
|
||||
|
||||
function SelectField<T>({ name, label, options }: SelectFieldProps<T>) {
|
||||
return (
|
||||
<div className="flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor={name}
|
||||
className="block text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Field name={name} type="select">
|
||||
{({
|
||||
field,
|
||||
form: { setFieldValue, resetForm }
|
||||
}: FieldProps) => (
|
||||
<Select
|
||||
{...field}
|
||||
id={name}
|
||||
isClearable={true}
|
||||
isSearchable={true}
|
||||
components={{
|
||||
Input,
|
||||
Control,
|
||||
Menu,
|
||||
Option
|
||||
}}
|
||||
placeholder="Choose a type"
|
||||
styles={{
|
||||
singleValue: (base) => ({
|
||||
...base,
|
||||
color: "unset"
|
||||
})
|
||||
}}
|
||||
theme={(theme) => ({
|
||||
...theme,
|
||||
spacing: {
|
||||
...theme.spacing,
|
||||
controlHeight: 30,
|
||||
baseUnit: 2
|
||||
}
|
||||
})}
|
||||
value={field?.value && options.find(o => o.value == field?.value)}
|
||||
onChange={(option) => {
|
||||
resetForm();
|
||||
|
||||
// const opt = option as SelectOption;
|
||||
// setFieldValue("name", option?.label ?? "")
|
||||
setFieldValue(
|
||||
field.name,
|
||||
option.value ?? ""
|
||||
);
|
||||
}}
|
||||
options={options}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
|
||||
import { IrcAuthMechanismTypeOptions, OptionBasicTyped } from "../../domain/constants";
|
||||
import { Dialog } from "@headlessui/react";
|
||||
|
||||
const Input = (props: InputProps) => {
|
||||
return (
|
||||
<components.Input
|
||||
{...props}
|
||||
inputClassName="outline-none border-none shadow-none focus:ring-transparent"
|
||||
className="text-gray-400 dark:text-gray-100"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Control = (props: ControlProps) => {
|
||||
return (
|
||||
<components.Control
|
||||
{...props}
|
||||
className="p-1 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Menu = (props: MenuProps) => {
|
||||
return (
|
||||
<components.Menu
|
||||
{...props}
|
||||
className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Option = (props: OptionProps) => {
|
||||
return (
|
||||
<components.Option
|
||||
{...props}
|
||||
className="dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue