72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import { useForm } from 'react-hook-form';
|
|
|
|
import { Button, Input, Field, Modal } from '@grafana/ui';
|
|
|
|
import { Trans } from '../../../core/internationalization';
|
|
import { ServerDiscoveryFormData } from '../types';
|
|
import { isUrlValid } from '../utils/url';
|
|
|
|
interface Props {
|
|
isOpen: boolean | undefined;
|
|
onClose: () => void;
|
|
onSuccess: (data: ServerDiscoveryFormData) => void;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export const ServerDiscoveryModal = ({ isOpen, onClose, onSuccess, isLoading }: Props) => {
|
|
const {
|
|
handleSubmit,
|
|
register,
|
|
formState: { errors },
|
|
} = useForm({
|
|
mode: 'onBlur',
|
|
defaultValues: {
|
|
url: '',
|
|
},
|
|
});
|
|
|
|
const validateUrl = (value?: string) => {
|
|
if (value === '') {
|
|
return 'Please enter the .well-known/openid-configuration endpoint for your IdP';
|
|
}
|
|
|
|
if (!isUrlValid(value)) {
|
|
return 'Please enter a valid URL';
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
return (
|
|
<Modal title="OpenID Connect Discovery URL" onDismiss={onClose} onClickBackdrop={onClose} isOpen={isOpen}>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.stopPropagation();
|
|
return handleSubmit(onSuccess)(e);
|
|
}}
|
|
>
|
|
<Field
|
|
label="The .well-known/openid-configuration endpoint for your IdP"
|
|
invalid={!!errors.url}
|
|
error={errors.url?.message}
|
|
htmlFor="url"
|
|
>
|
|
<Input {...register('url', { validate: validateUrl })} width={80} id="url" />
|
|
</Field>
|
|
<Modal.ButtonRow>
|
|
<Button type="submit" variant="primary" disabled={isLoading}>
|
|
{isLoading ? (
|
|
<Trans i18nKey={'oauth.form.server-discovery-modal-loading'}>Loading...</Trans>
|
|
) : (
|
|
<Trans i18nKey={'oauth.form.server-discovery-modal-submit'}>Submit</Trans>
|
|
)}
|
|
</Button>
|
|
<Button type="button" variant="secondary" onClick={onClose}>
|
|
<Trans i18nKey={'oauth.form.server-discovery-modal-close'}>Close</Trans>
|
|
</Button>
|
|
</Modal.ButtonRow>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
};
|