82 lines
2.6 KiB
TypeScript
Executable File
82 lines
2.6 KiB
TypeScript
Executable File
import {useSettings} from '@common/core/settings/use-settings';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {Fragment, ReactNode} from 'react';
|
|
import {ConnectDomainStepProps} from '@common/custom-domains/datatable/connect-domain-dialog/connect-domain-step';
|
|
import {useAuth} from '@common/auth/use-auth';
|
|
import {isSubdomain} from '@common/custom-domains/datatable/connect-domain-dialog/is-subdomain';
|
|
import {WarningIcon} from '@common/icons/material/Warning';
|
|
import {useValidateDomainDns} from '@common/custom-domains/datatable/requests/use-validate-domain-dns';
|
|
import {DomainProgressIndicator} from '@common/custom-domains/datatable/connect-domain-dialog/domain-progress-indicator';
|
|
|
|
export function ValidationFailedStep({
|
|
stepper: {
|
|
goToNextStep,
|
|
state: {host, serverIp, isLoading, validationFailReason},
|
|
},
|
|
}: ConnectDomainStepProps) {
|
|
const validateDns = useValidateDomainDns();
|
|
const {base_url} = useSettings();
|
|
const {hasPermission} = useAuth();
|
|
const subdomain = isSubdomain(host);
|
|
const record = subdomain ? 'CNAME' : 'A';
|
|
const location = subdomain ? base_url : serverIp;
|
|
|
|
if (isLoading) {
|
|
return <DomainProgressIndicator />;
|
|
}
|
|
|
|
const errorMessage =
|
|
validationFailReason === 'serverNotConfigured' && hasPermission('admin') ? (
|
|
<ErrorMessage>
|
|
<Trans
|
|
message="DNS records for the domain are setup, however it seems that your server is not configured to handle requests from “:host“"
|
|
values={{host: location}}
|
|
/>
|
|
</ErrorMessage>
|
|
) : (
|
|
<ErrorMessage>
|
|
<Trans
|
|
message="The domain is missing :record record pointing to :location or the changes haven't propagated yet."
|
|
values={{record, location}}
|
|
/>
|
|
</ErrorMessage>
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
{errorMessage}
|
|
<div className="whitespace-nowrap text-xs text-muted mt-10">
|
|
<Trans
|
|
message="You can wait and try again later, or <b>refresh</b>"
|
|
values={{
|
|
b: (text: string) => (
|
|
<button
|
|
disabled={isLoading}
|
|
type="button"
|
|
className="text-primary underline"
|
|
onClick={() => {
|
|
goToNextStep();
|
|
}}
|
|
>
|
|
{text}
|
|
</button>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
interface ErrorMessageProps {
|
|
children: ReactNode;
|
|
}
|
|
function ErrorMessage({children}: ErrorMessageProps) {
|
|
return (
|
|
<div className="flex items-center gap-12 text-base p-12 rounded bg-warning/15 text-warning font-medium">
|
|
<WarningIcon size="lg" />
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|