first commit

common/resources/client/custom-domains/datatable/connect-domain-dialog/validation-failed-step.tsx

@@ -0,0 +1,81 @@
+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>
+  );
+}