FEATURE (index.html): Adjust policices for playgronund index

2026-04-06 00:32:03 +02:00 · 2026-03-21 14:08:09 +03:00
parent cf807cfc54
commit 881167f812
5 changed files with 138 additions and 5 deletions
--- a/22
+++ b/22
@@ -257,6 +257,9 @@ COPY backend/migrations ./migrations
 # Copy UI files
 COPY --from=backend-build /app/ui/build ./ui/build

+# Copy cloud static HTML template (injected into index.html at startup when IS_CLOUD=true)
+COPY frontend/cloud-root-content.html /app/cloud-root-content.html
+
 # Copy agent binaries (both architectures) — served by the backend
 # at GET /api/v1/system/agent?arch=amd64|arm64
 COPY --from=agent-build /agent-binaries ./agent-binaries
@@ -326,6 +329,23 @@ if [ -n "\${ANALYTICS_SCRIPT:-}" ]; then
  fi
 fi

+# Inject static HTML into root div for cloud mode (payment system requires visible legal links)
+if [ "\${IS_CLOUD:-false}" = "true" ]; then
+  if ! grep -q "cloud-static-content" /app/ui/build/index.html 2>/dev/null; then
+    echo "Injecting cloud static HTML content..."
+    perl -i -pe '
+      BEGIN {
+        open my \$fh, "<", "/app/cloud-root-content.html" or die;
+        local \$/;
+        \$c = <\$fh>;
+        close \$fh;
+        \$c =~ s/\\n/ /g;
+      }
+      s/<div id="root"><\\/div>/<div id="root"><!-- cloud-static-content -->\$c<\\/div>/
+    ' /app/ui/build/index.html
+  fi
+fi
+
 # Ensure proper ownership of data directory
 echo "Setting up data directory permissions..."
 mkdir -p /databasus-data/pgdata
@@ -439,7 +459,7 @@ fi
 echo "Setting up database and user..."
 gosu postgres \$PG_BIN/psql -p 5437 -h localhost -d postgres << 'SQL'

-# We use stub password, because internal DB is not exposed outside container
+-- We use stub password, because internal DB is not exposed outside container
 ALTER USER postgres WITH PASSWORD 'Q1234567';
 SELECT 'CREATE DATABASE databasus OWNER postgres'
 WHERE NOT EXISTS (SELECT FROM pg_database WHERE datname = 'databasus')
--- a/frontend/cloud-root-content.html
+++ b/frontend/cloud-root-content.html
@@ -0,0 +1,40 @@
+<div style="font-family: 'Jost', system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: #fff;">
+  <!-- Navbar -->
+  <div style="display: flex; align-items: center; padding: 20px 20px 0; height: 65px;">
+    <a href="https://databasus.com" target="_blank" rel="noreferrer" style="display: flex; align-items: center; gap: 12px; text-decoration: none;">
+      <img src="/logo.svg" style="height: 45px; width: 45px; padding: 4px;" alt="Databasus" />
+      <span style="font-size: 1.25rem; font-weight: 700; color: #2563eb;">Databasus</span>
+    </a>
+  </div>
+
+  <!-- Sign-in form stub -->
+  <div style="display: flex; justify-content: center; margin-top: 10vh;">
+    <div style="width: 100%; max-width: 300px; padding: 0 16px; box-sizing: border-box;">
+      <div style="text-align: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; color: #111;">Sign in</div>
+
+      <div style="margin-bottom: 4px; font-size: 14px; font-weight: 600; color: #111;">Your email</div>
+      <input type="email" placeholder="your@email.com" disabled
+        style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; box-sizing: border-box; font-size: 14px; font-family: inherit; background: #fff;" />
+
+      <div style="margin: 12px 0 4px; font-size: 14px; font-weight: 600; color: #111;">Password</div>
+      <input type="password" placeholder="********" disabled
+        style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; box-sizing: border-box; font-size: 14px; font-family: inherit; background: #fff;" />
+
+      <button disabled
+        style="width: 100%; margin-top: 16px; padding: 8px 16px; background: #1677ff; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-family: inherit; cursor: default;">
+        Sign in
+      </button>
+    </div>
+  </div>
+
+  <footer style="margin-top: auto; padding-bottom: 20px; text-align: center;">
+    <div style="font-size: 14px; color: #4b5563;">
+      <a href="https://databasus.com/terms-of-use-cloud" style="color: #2563eb; text-decoration: underline;">Terms of Use</a>
+      &nbsp;|&nbsp;
+      <a href="https://databasus.com/privacy-cloud" style="color: #2563eb; text-decoration: underline;">Privacy Policy</a>
+    </div>
+    <div style="margin-top: 20px; font-size: 14px; color: #6b7280;">
+      info@databasus.com | &copy; 2026 Databasus. All rights reserved.
+    </div>
+  </footer>
+</div>
--- a/frontend/src/features/users/ui/SignInComponent.tsx
+++ b/frontend/src/features/users/ui/SignInComponent.tsx
@@ -166,6 +166,8 @@ export function SignInComponent({
          </button>
        )}
      </div>
+
+      <div className="mb-10" />
    </div>
  );
 }
--- a/frontend/src/features/users/ui/SignUpComponent.tsx
+++ b/frontend/src/features/users/ui/SignUpComponent.tsx
@@ -1,10 +1,10 @@
 import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
-import { App, Button, Input } from 'antd';
+import { App, Button, Checkbox, Input } from 'antd';
 import { type JSX, useState } from 'react';

 import { useCloudflareTurnstile } from '../../../shared/hooks/useCloudflareTurnstile';

-import { GITHUB_CLIENT_ID, GOOGLE_CLIENT_ID } from '../../../constants';
+import { GITHUB_CLIENT_ID, GOOGLE_CLIENT_ID, IS_CLOUD } from '../../../constants';
 import { userApi } from '../../../entity/users';
 import { StringUtils } from '../../../shared/lib';
 import { FormValidator } from '../../../shared/lib/FormValidator';
@@ -34,6 +34,9 @@ export function SignUpComponent({ onSwitchToSignIn }: SignUpComponentProps): JSX

  const [signUpError, setSignUpError] = useState('');

+  const [isTermsAccepted, setTermsAccepted] = useState(false);
+  const [isPolicyAccepted, setPolicyAccepted] = useState(false);
+
  const { token, containerRef, resetCloudflareTurnstile } = useCloudflareTurnstile();

  const validateFieldsForSignUp = (): boolean => {
@@ -179,10 +182,49 @@ export function SignUpComponent({ onSwitchToSignIn }: SignUpComponentProps): JSX

      <div className="mt-3" />

+      {IS_CLOUD && (
+        <div className="mb-3 space-y-1 text-xs text-gray-600 dark:text-gray-400">
+          <div>
+            <Checkbox
+              checked={isTermsAccepted}
+              onChange={(e) => setTermsAccepted(e.target.checked)}
+            >
+              I agree to{' '}
+              <a
+                href="https://databasus.com/terms-of-use-cloud"
+                target="_blank"
+                rel="noreferrer"
+                className="underline"
+                style={{ color: 'inherit', textDecoration: 'underline' }}
+              >
+                Terms of Use
+              </a>
+            </Checkbox>
+          </div>
+          <div>
+            <Checkbox
+              checked={isPolicyAccepted}
+              onChange={(e) => setPolicyAccepted(e.target.checked)}
+            >
+              I agree to{' '}
+              <a
+                href="https://databasus.com/privacy-cloud"
+                target="_blank"
+                rel="noreferrer"
+                className="underline"
+                style={{ color: 'inherit', textDecoration: 'underline' }}
+              >
+                Privacy Policy
+              </a>
+            </Checkbox>
+          </div>
+        </div>
+      )}
+
      <CloudflareTurnstileWidget containerRef={containerRef} />

      <Button
-        disabled={isLoading}
+        disabled={isLoading || (IS_CLOUD && (!isTermsAccepted || !isPolicyAccepted))}
        loading={isLoading}
        className="w-full"
        onClick={() => {
@@ -211,6 +253,8 @@ export function SignUpComponent({ onSwitchToSignIn }: SignUpComponentProps): JSX
          </button>
        </div>
      )}
+
+      <div className="mb-10" />
    </div>
  );
 }
--- a/frontend/src/pages/AuthPageComponent.tsx
+++ b/frontend/src/pages/AuthPageComponent.tsx
@@ -2,6 +2,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { Spin } from 'antd';
 import { useEffect, useState } from 'react';

+import { IS_CLOUD } from '../constants';
 import { userApi } from '../entity/users';
 import { PlaygroundWarningComponent } from '../features/playground';
 import {
@@ -42,7 +43,7 @@ export function AuthPageComponent() {
  }, []);

  return (
-    <div className="h-full dark:bg-gray-900" style={{ height: screenHeight }}>
+    <div className="flex min-h-full flex-col dark:bg-gray-900" style={{ minHeight: screenHeight }}>
      {isLoading ? (
        <div className="flex h-screen w-screen items-center justify-center">
          <Spin indicator={<LoadingOutlined spin />} size="large" />
@@ -84,6 +85,32 @@ export function AuthPageComponent() {
        </div>
      )}

+      {IS_CLOUD && (
+        <footer className="mx-10 mt-auto pb-5 text-center text-sm text-gray-500 dark:text-gray-500">
+          <a
+            href="https://databasus.com/terms-of-use-cloud"
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+            style={{ color: 'inherit' }}
+          >
+            Terms of Use
+          </a>
+          {' | '}
+          <a
+            href="https://databasus.com/privacy-cloud"
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+            style={{ color: 'inherit' }}
+          >
+            Privacy Policy
+          </a>
+          {' | '}
+          info@databasus.com | &copy; 2026 Databasus. All rights reserved.
+        </footer>
+      )}
+
      <PlaygroundWarningComponent />
    </div>
  );