feat(03-02): add domaincheck frontend - input form, results display, i18n

- DomainInput component with text input and submit button - ResultList component with green/red status badges (D-01) - checkDomainAction fetches POST /modules/domaincheck/check with auth cookie - Page renders within portal AppShell at /modules/domaincheck - i18n keys added for both DE and EN locales
2026-06-19 13:27:55 +02:00
parent 2e0a4ddc21
commit 1d9fd2280d
6 changed files with 231 additions and 0 deletions
@@ -0,0 +1,46 @@
+/**
+ * Client-side action to check domain availability via the API.
+ *
+ * Calls POST /modules/domaincheck/check with the domain label.
+ * Auth cookie is forwarded via credentials: 'include'.
+ */
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+export interface DomainCheckResult {
+  tld: string;
+  fqdn: string;
+  status: 'available' | 'registered';
+}
+
+export interface DomainCheckResponse {
+  domain: string;
+  results: DomainCheckResult[];
+}
+
+/**
+ * Check domain availability across TLD variants.
+ *
+ * @param domain - Base domain label (e.g., "example")
+ * @returns Response with domain and results array
+ * @throws Error if the API call fails
+ */
+export async function checkDomainAction(
+  domain: string,
+): Promise<DomainCheckResponse> {
+  const response = await fetch(`${API_URL}/modules/domaincheck/check`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ domain }),
+    credentials: 'include',
+  });
+
+  if (!response.ok) {
+    const errorBody = await response.text().catch(() => '');
+    throw new Error(
+      `Domain check failed: ${response.status} ${errorBody}`.trim(),
+    );
+  }
+
+  return response.json();
+}
@@ -0,0 +1,48 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { type FormEvent, useState } from 'react';
+
+interface DomainInputProps {
+  onSubmit: (domain: string) => void;
+  isLoading: boolean;
+}
+
+/**
+ * Input form for entering a domain label to check.
+ *
+ * Renders a text input with placeholder from i18n and a submit button
+ * that shows loading state while the check is in progress.
+ */
+export function DomainInput({ onSubmit, isLoading }: DomainInputProps) {
+  const t = useTranslations('domaincheck');
+  const [domain, setDomain] = useState('');
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const trimmed = domain.trim();
+    if (trimmed) {
+      onSubmit(trimmed);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-3">
+      <input
+        type="text"
+        value={domain}
+        onChange={(e) => setDomain(e.target.value)}
+        placeholder={t('inputPlaceholder')}
+        disabled={isLoading}
+        className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      />
+      <button
+        type="submit"
+        disabled={isLoading || !domain.trim()}
+        className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:pointer-events-none disabled:opacity-50"
+      >
+        {isLoading ? t('checking') : t('checkButton')}
+      </button>
+    </form>
+  );
+}
@@ -0,0 +1,51 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { DomainCheckResult } from '../actions';
+
+interface ResultListProps {
+  results: DomainCheckResult[];
+}
+
+/**
+ * Displays domain availability results as a list with color-coded status.
+ *
+ * Per D-01: green badge for "available", red badge for "registered".
+ * Per D-02: shows all TLD variants with their status.
+ * Shows empty state message when no results are available.
+ */
+export function ResultList({ results }: ResultListProps) {
+  const t = useTranslations('domaincheck');
+
+  if (results.length === 0) {
+    return (
+      <p className="text-center text-sm text-muted-foreground py-8">
+        {t('noResults')}
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {results.map((result) => (
+        <div
+          key={result.fqdn}
+          className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
+        >
+          <span className="text-sm font-medium">{result.fqdn}</span>
+          <span
+            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
+              result.status === 'available'
+                ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+            }`}
+          >
+            {result.status === 'available'
+              ? t('statusAvailable')
+              : t('statusRegistered')}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,64 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { type DomainCheckResult, checkDomainAction } from './actions';
+import { DomainInput } from './components/DomainInput';
+import { ResultList } from './components/ResultList';
+
+/**
+ * Domaincheck module page within the portal.
+ *
+ * Provides a form to enter a domain label, calls the API to check
+ * TLD variant availability, and displays color-coded results.
+ *
+ * Per D-05a: uses Card-style layout consistent with portal modules.
+ */
+export default function DomaincheckPage() {
+  const t = useTranslations('domaincheck');
+
+  const [results, setResults] = useState<DomainCheckResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (domain: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await checkDomainAction(domain);
+      setResults(response.results);
+    } catch {
+      setError(t('error'));
+      setResults([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6 p-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          {t('description')}
+        </p>
+      </div>
+
+      {/* Card panel (per D-05a) */}
+      <div className="rounded-lg border border-border bg-card p-6 shadow-sm space-y-4">
+        {/* Domain input */}
+        <DomainInput onSubmit={handleSubmit} isLoading={isLoading} />
+
+        {/* Error message */}
+        {error && (
+          <p className="text-sm text-destructive">{error}</p>
+        )}
+
+        {/* Results */}
+        <ResultList results={results} />
+      </div>
+    </div>
+  );
+}