b0ed19d6a3
* feat: implement prefs -> credentials section UI (w/o backend integration) * feat: implement credentials information on Prefs -> Account pane - implement email changing UI (w/o backend integration) - implement password changing UI and reuse existing change password logic - replace 2FA dialog with shared one - implement React hook for preventing window refresh * fix: provide correct types * refactor: reuse styles from stylekit, rename components and create enum for input types * refactor: update default exports to named ones, correct texts * chore: remove unnecessary depenedency * chore: yarn.lock without unnecessary packages * Revert "chore: yarn.lock without unnecessary packages" This reverts commit 64aa75e8408b06884d6e7383180292a4a9a3e8ad.
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { FunctionalComponent, ComponentChild } from 'preact';
|
|
import { HtmlInputTypes } from '@/enums';
|
|
|
|
interface Props {
|
|
type?: HtmlInputTypes;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
left?: ComponentChild[];
|
|
right?: ComponentChild[];
|
|
text?: string;
|
|
placeholder?: string;
|
|
onChange?: (text: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Input that can be decorated on the left and right side
|
|
*/
|
|
export const DecoratedInput: FunctionalComponent<Props> = ({
|
|
type = 'text',
|
|
className = '',
|
|
disabled = false,
|
|
left,
|
|
right,
|
|
text,
|
|
placeholder = '',
|
|
onChange,
|
|
}) => {
|
|
const base =
|
|
'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center gap-4';
|
|
const stateClasses = disabled
|
|
? 'no-border bg-grey-5'
|
|
: 'border-solid border-1 border-gray-300';
|
|
const classes = `${base} ${stateClasses} ${className}`;
|
|
|
|
return (
|
|
<div className={`${classes} focus-within:ring-info`}>
|
|
{left}
|
|
<div className="flex-grow">
|
|
<input
|
|
type={type}
|
|
className="w-full no-border color-black focus:shadow-none"
|
|
disabled={disabled}
|
|
value={text}
|
|
placeholder={placeholder}
|
|
onChange={(e) =>
|
|
onChange && onChange((e.target as HTMLInputElement).value)
|
|
}
|
|
/>
|
|
</div>
|
|
{right}
|
|
</div>
|
|
);
|
|
};
|