Academy Auth Pages (Giriş & Kayıt Tasarımı)

Achidemy’de öğrenciler, academy mağaza host’unda (<subdomain>.achidemy.net) giriş ve kayıt olurken eğitmenin vitrin markasına uyumlu auth sayfaları görür. Tasarım verisi academies.themeConfig / themeConfigDraft içindeki authPages alanında tutulur; Visual Builder’ın Giriş & Kayıt sekmesinden düzenlenir.

İlgili dokümanlar:

• Academy Visual Builder — builder rail sekmeleri ve kaydet/yayınla
• Storefront Runtime — TenantAuthShell ve login/register route’ları
• Storefront Publishing — draft → published akışı

---

Veri modeli: themeConfig.authPages

Kaynak: app/lib/academy-auth-pages.ts

type AuthPageKind = "login" | "register";
type AuthPageVariant = "v1" | "v2" | "v3";

type AuthPageSettings = {
  layout?: "centered" | "split-left" | "split-right";
  title?: string;
  subtitle?: string;
  sideTitle?: string;
  sideSubtitle?: string;
  backgroundType?: "solid" | "gradient" | "image";
  backgroundColor?: string;
  backgroundImageUrl?: string;
  gradientFrom?: string;
  gradientTo?: string;
  sideImageUrl?: string;
  cardStyle?: "elevated" | "flat" | "bordered";
  showLogo?: boolean;
  logoUrl?: string;
  academyName?: string;
  primaryColor?: string;
  showGoogleAuth?: boolean;
};

type ThemeConfigAuthPages = {
  login?: { variant: AuthPageVariant; settings: AuthPageSettings };
  register?: { variant: AuthPageVariant; settings: AuthPageSettings };
};

• v1: Ortalanmış kart (layout: centered)
• v2: Görsel solda (split-left)
• v3: Görsel sağda (split-right)

Builder kaydettiğinde themeGlobals içinde authPages: buildAuthPagesPayload(login, register) gönderilir; action bunu themeConfigDraft / yayınla ile themeConfig içine yazar.

---

Runtime: tenant login & register

Route	Dosya	Davranış
/:lang/login	app/routes/login.tsx	Loader’da getTenantByRequest; tenant varsa TenantAuthShell + parseAuthPageConfig(themeConfig, "login")
/:lang/register	app/routes/register.tsx	Aynı mantık, register config

Bileşenler: app/components/storefront/auth/

• TenantAuthShell.tsx — arka plan, split layout, logo, Google OAuth alanı
• StorefrontAuthPageLayout.tsx — kart sarmalayıcı
• AuthPreviewForm.tsx — builder iframe’inde etkileşimsiz form önizlemesi
• index.ts — barrel export

Pazaryeri apex host’unda (achidemy.net) login/register genel Achidemy deneyimini kullanır; tenant yoksa marketplace auth UI gösterilir.

---

Visual Builder entegrasyonu

Sol rail: Giriş & Kayıt sekmesi

• Route: /:lang/instructor/academy/builder (?tab ile diğer sekmelere geçilebilir)
• Inspector: app/components/instructor/academy-builder/AuthPageInspector.tsx
• Önizleme iframe: /:lang/builder-preview-auth?page=login|register

Eğitmen login ve register için ayrı ayrı şablon, metin, arka plan, logo ve Google butonu görünürlüğünü ayarlar. Değişiklikler taslak tema ile birlikte kaydedilir; Yayınla ile canlı themeConfig güncellenir.

postMessage (auth önizleme)

Parent → iframe: BUILDER_AUTH_PREVIEW_UPDATE (payload: page, login, register, theme, logoUrl, primaryColor)

Iframe → parent: BUILDER_AUTH_PREVIEW_READY

Detaylı protokol: Builder Preview (iframe).

---

Google OAuth ve güvenlik

• Oturum: Better Auth — app/routes/api.auth.ts, app/lib/auth-client.ts
• Turnstile (bot koruması): ortam değişkenleri — Ortam Değişkenleri
• showGoogleAuth: tenant auth’ta Google ile devam butonunun gösterilip gizlenmesi (tenantAuthShowsGoogle helper)

---

Geliştirici notları

• resolveAuthPagePresentation() boş başlık/alt başlıkta i18n varsayılanlarını ve akademi adını doldurur.
• Logo: settings.logoUrl yoksa getTenantLogoUrl(themeConfig) kullanılır.
• Auth sayfaları blok CMS’inden bağımsızdır; themeConfig.blocks ile karıştırılmamalıdır.