feat: disable creating account when server is not set

src/assets/locales/en.json

@@ -55,6 +55,8 @@
         "text": "Did you configure it correctly?",
         "title": "Failed to reach server"
       },
+      "noHostTitle": "Server not configured!",
+      "noHost": "The server has not been configured, therefore you cannot create an account",
       "host": "You are connecting to <0>{{hostname}}</0> - please confirm you trust it before making an account",
       "no": "Go back",
       "title": "Do you trust this server?",

src/pages/parts/auth/TrustBackendPart.tsx

@@ -23,7 +23,7 @@ export function TrustBackendPart(props: TrustBackendPartProps) {
   const navigate = useNavigate();
   const backendUrl = useBackendUrl();
   const hostname = useMemo(
-    () => (backendUrl ? new URL(backendUrl).hostname : ""),
+    () => (backendUrl ? new URL(backendUrl).hostname : undefined),
     [backendUrl],
   );
   const result = useAsync(() => {
@@ -54,38 +54,52 @@ export function TrustBackendPart(props: TrustBackendPartProps) {
   return (
     <LargeCard>
       <LargeCardText
-        title={t("auth.trust.title")}
+        title={hostname ? t("auth.trust.title") : t("auth.trust.noHostTitle")}
         icon={<Icon icon={Icons.CIRCLE_EXCLAMATION} />}
       >
-        <Trans
+        {hostname ? (
-          i18nKey="auth.trust.host"
+          <Trans
-          values={{
+            i18nKey="auth.trust.host"
-            hostname,
+            values={{
-          }}
+              hostname,
-        >
+            }}
-          <span className="text-white" />
+          >
-        </Trans>
+            <span className="text-white" />
+          </Trans>
+        ) : (
+          <p>{t("auth.trust.noHost")}</p>
+        )}
       </LargeCardText>
 
-      <div className="border border-authentication-border rounded-xl px-4 py-8 flex flex-col items-center space-y-2 my-8">
+      {hostname ? (
-        {cardContent}
+        <>
-      </div>
+          <div className="border border-authentication-border rounded-xl px-4 py-8 flex flex-col items-center space-y-2 my-8">
-      <LargeCardButtons>
+            {cardContent}
-        <Button theme="secondary" onClick={() => navigate("/")}>
+          </div>
-          {t("auth.trust.no")}
+          <LargeCardButtons>
-        </Button>
+            <Button theme="secondary" onClick={() => navigate("/")}>
-        <Button
+              {t("auth.trust.no")}
-          theme="purple"
+            </Button>
-          onClick={() => result.value && props.onNext?.(result.value)}
+            <Button
-        >
+              theme="purple"
-          {t("auth.trust.yes")}
+              onClick={() => result.value && props.onNext?.(result.value)}
-        </Button>
+            >
-      </LargeCardButtons>
+              {t("auth.trust.yes")}
-      <p className="text-center mt-6">
+            </Button>
-        <Trans i18nKey="auth.hasAccount">
+          </LargeCardButtons>
-          <MwLink to="/login">.</MwLink>
+          <p className="text-center mt-6">
-        </Trans>
+            <Trans i18nKey="auth.hasAccount">
-      </p>
+              <MwLink to="/login">.</MwLink>
+            </Trans>
+          </p>
+        </>
+      ) : (
+        <LargeCardButtons>
+          <Button theme="purple" onClick={() => navigate("/")}>
+            {t("auth.trust.no")}
+          </Button>
+        </LargeCardButtons>
+      )}
     </LargeCard>
   );
 }