@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/pages/SearchEngineGuide.tsx

@@ -0,0 +1,135 @@
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft, Search, Code, CheckCircle } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import Button from '../components/ui/Button';
+import { useAppConfig } from '../contexts/AppConfigContext';
+
+export default function SearchEngineGuide() {
+  const { t } = useTranslation();
+  const { appBasePath } = useAppConfig();
+
+  const baseUrl = window.location.origin;
+  const goPath = '/go/%s';
+  const searchUrl = `${baseUrl}${goPath}`;
+
+  return (
+    <div className="space-y-6 max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Link to={`${appBasePath}/bookmarks`}>
+          <Button variant="ghost" size="sm" icon={ArrowLeft}>
+            {t('common.back')}
+          </Button>
+        </Link>
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
+            <Search className="h-8 w-8" />
+            {t('searchEngineGuide.title')}
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {t('searchEngineGuide.description')}
+          </p>
+        </div>
+      </div>
+
+      {/* How it works */}
+      <div className="bg-primary/10 border border-primary/30 rounded-xl p-6">
+        <h2 className="text-xl font-semibold text-foreground mb-3">
+          {t('searchEngineGuide.howItWorks')}
+        </h2>
+        <p className="text-muted-foreground mb-4">
+          {t('searchEngineGuide.howItWorksDescription')}
+        </p>
+        <div className="bg-card rounded-lg p-4 border border-primary/30">
+          <div className="flex items-center gap-2 text-sm font-mono text-foreground">
+            <Code className="h-4 w-4 text-primary" />
+            <span className="text-primary">go</span>
+            <span className="text-gray-400">your-slug</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Your search URL */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
+          {t('searchEngineGuide.yourSearchUrl')}
+        </h2>
+        <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+          <code className="text-sm font-mono text-gray-900 dark:text-white break-all">
+            {searchUrl}
+          </code>
+        </div>
+        <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
+          {t('searchEngineGuide.urlNote')}
+        </p>
+      </div>
+
+      {/* Chromium-based browsers */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <CheckCircle className="h-6 w-6 text-green-600 dark:text-green-400" />
+          {t('searchEngineGuide.chromiumTitle')}
+        </h2>
+        <p className="text-gray-700 dark:text-gray-300 mb-4">
+          {t('searchEngineGuide.chromiumDescription')}
+        </p>
+        <ol className="list-decimal list-inside space-y-3 text-gray-700 dark:text-gray-300">
+          <li>{t('searchEngineGuide.chromiumStep1')}</li>
+          <li>{t('searchEngineGuide.chromiumStep2')}</li>
+          <li>{t('searchEngineGuide.chromiumStep3')}</li>
+          <li>
+            {t('searchEngineGuide.chromiumStep4')}
+            <ul className="list-disc list-inside ml-6 mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-400">
+              <li>{t('searchEngineGuide.chromiumStep4a')}</li>
+              <li>{t('searchEngineGuide.chromiumStep4b')}</li>
+              <li>{t('searchEngineGuide.chromiumStep4c')}</li>
+            </ul>
+          </li>
+          <li>{t('searchEngineGuide.chromiumStep5')}</li>
+        </ol>
+      </div>
+
+      {/* Firefox */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <CheckCircle className="h-6 w-6 text-orange-600 dark:text-orange-400" />
+          {t('searchEngineGuide.firefoxTitle')}
+        </h2>
+        <p className="text-gray-700 dark:text-gray-300 mb-4">
+          {t('searchEngineGuide.firefoxDescription')}
+        </p>
+        <ol className="list-decimal list-inside space-y-3 text-gray-700 dark:text-gray-300">
+          <li>{t('searchEngineGuide.firefoxStep1')}</li>
+          <li>{t('searchEngineGuide.firefoxStep2')}</li>
+          <li>{t('searchEngineGuide.firefoxStep3')}</li>
+          <li>
+            {t('searchEngineGuide.firefoxStep4')}
+            <ul className="list-disc list-inside ml-6 mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-400">
+              <li>{t('searchEngineGuide.firefoxStep4a')}</li>
+              <li>{t('searchEngineGuide.firefoxStep4b')}</li>
+              <li>{t('searchEngineGuide.firefoxStep4c')}</li>
+            </ul>
+          </li>
+          <li>{t('searchEngineGuide.firefoxStep5')}</li>
+        </ol>
+      </div>
+
+      {/* Usage example */}
+      <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+          {t('searchEngineGuide.usageExample')}
+        </h2>
+        <div className="space-y-2 text-gray-700 dark:text-gray-300">
+          <p>{t('searchEngineGuide.usageStep1')}</p>
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-3 border border-green-200 dark:border-green-700">
+            <code className="text-sm font-mono text-gray-900 dark:text-white">go test</code>
+          </div>
+          <p className="mt-3">{t('searchEngineGuide.usageStep2')}</p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {t('searchEngineGuide.usageNote')}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/pages/Setup.tsx

@@ -0,0 +1,210 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import api from '../api/client';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import { useAuth } from '../contexts/AuthContext';
+import { CheckCircle, UserPlus, Shield } from 'lucide-react';
+import Button from '../components/ui/Button';
+
+export default function Setup() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { appRootPath } = useAppConfig();
+  const { user, checkAuth } = useAuth();
+  const [formData, setFormData] = useState({
+    email: '',
+    name: '',
+    password: '',
+    confirmPassword: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  // If user is already authenticated, redirect to dashboard
+  useEffect(() => {
+    if (user) {
+      navigate(appRootPath);
+    }
+  }, [user, navigate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    if (formData.password !== formData.confirmPassword) {
+      setError(t('setup.passwordMismatch'));
+      setLoading(false);
+      return;
+    }
+
+    if (formData.password.length < 8) {
+      setError(t('setup.passwordTooShort'));
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const { confirmPassword, ...dataToSend } = formData;
+      await api.post('/auth/setup', dataToSend);
+      
+      // User is automatically logged in by the backend (cookie is set)
+      // Check auth status to update AuthContext
+      await checkAuth();
+      
+      setSuccess(true);
+      // Redirect to dashboard after a brief delay
+      setTimeout(() => {
+        navigate(appRootPath);
+      }, 1500);
+    } catch (err: any) {
+      setError(err.response?.data?.error || t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg p-4">
+          <div className="text-center space-y-4">
+            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
+              <CheckCircle className="h-8 w-8 text-green-600 dark:text-green-400" />
+            </div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {t('setup.success')}
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              {t('setup.redirectingToDashboard')}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <div className="flex justify-center mb-6">
+            <img 
+              src="/slugbase_icon_blue.svg" 
+              alt="SlugBase" 
+              className="h-16 w-16 dark:hidden"
+            />
+            <img 
+              src="/slugbase_icon_white.svg" 
+              alt="SlugBase" 
+              className="h-16 w-16 hidden dark:block"
+            />
+          </div>
+          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            {t('setup.title')}
+          </h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            {t('setup.description')}
+          </p>
+        </div>
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg p-4">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="email" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('setup.email')}
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
+                placeholder={t('setup.emailPlaceholder')}
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="name" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('setup.name')}
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                required
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
+                placeholder={t('setup.namePlaceholder')}
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('setup.password')}
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                minLength={8}
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
+                placeholder={t('setup.passwordPlaceholder')}
+                value={formData.password}
+                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('setup.confirmPassword')}
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                minLength={8}
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
+                placeholder={t('setup.confirmPasswordPlaceholder')}
+                value={formData.confirmPassword}
+                onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
+              />
+            </div>
+
+            <div className="px-4 py-3 bg-primary/10 border border-primary/30 rounded-lg">
+              <div className="flex items-start gap-2">
+                <Shield className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-foreground">
+                  {t('setup.adminNote')}
+                </p>
+              </div>
+            </div>
+
+            {error && (
+              <div className="px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              variant="primary"
+              disabled={loading}
+              icon={UserPlus}
+              className="w-full"
+            >
+              {loading ? t('common.loading') : t('setup.submit')}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/pages/Signup.tsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import api from '../api/client';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import Button from '../components/ui/Button';
+
+const MIN_PASSWORD_LENGTH = 8;
+
+export default function Signup() {
+  const { t } = useTranslation();
+  const { appBasePath } = useAppConfig();
+  const [email, setEmail] = useState('');
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [acceptTerms, setAcceptTerms] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    if (password !== confirmPassword) {
+      setError(t('setup.passwordMismatch'));
+      return;
+    }
+    if (password.length < MIN_PASSWORD_LENGTH) {
+      setError(t('setup.passwordTooShort'));
+      return;
+    }
+    if (!acceptTerms) {
+      setError(t('signup.acceptTermsRequired'));
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post('/auth/register', { email, name, password });
+      setSuccess(true);
+    } catch (err: any) {
+      setError(err.response?.data?.error || t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg p-6 text-center space-y-4">
+          <div className="flex justify-center mb-4">
+            <img src="/slugbase_icon_blue.svg" alt="SlugBase" className="h-16 w-16 dark:hidden" />
+            <img src="/slugbase_icon_white.svg" alt="SlugBase" className="h-16 w-16 hidden dark:block" />
+          </div>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            {t('signup.successTitle')}
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
+            {t('signup.successMessage')}
+          </p>
+          <Link
+            to={`${appBasePath}/login`}
+            className="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg"
+          >
+            {t('signup.backToLogin')}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <div className="flex justify-center mb-6">
+            <img src="/slugbase_icon_blue.svg" alt="SlugBase" className="h-16 w-16 dark:hidden" />
+            <img src="/slugbase_icon_white.svg" alt="SlugBase" className="h-16 w-16 hidden dark:block" />
+          </div>
+          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            {t('signup.title')}
+          </h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            {t('signup.subtitle')}
+          </p>
+        </div>
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg p-4">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="signup-email" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('signup.email')}
+              </label>
+              <input
+                id="signup-email"
+                type="email"
+                required
+                autoComplete="email"
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder={t('auth.emailPlaceholder')}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="signup-name" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('signup.name')}
+              </label>
+              <input
+                id="signup-name"
+                type="text"
+                required
+                autoComplete="name"
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder={t('signup.namePlaceholder')}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="signup-password" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('signup.password')}
+              </label>
+              <input
+                id="signup-password"
+                type="password"
+                required
+                minLength={MIN_PASSWORD_LENGTH}
+                autoComplete="new-password"
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder={t('setup.passwordPlaceholder')}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{t('signup.passwordHint')}</p>
+            </div>
+            <div>
+              <label htmlFor="signup-confirm" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('signup.confirmPassword')}
+              </label>
+              <input
+                id="signup-confirm"
+                type="password"
+                required
+                minLength={MIN_PASSWORD_LENGTH}
+                autoComplete="new-password"
+                className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder={t('setup.confirmPasswordPlaceholder')}
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+              />
+            </div>
+            <div className="flex items-start gap-3">
+              <input
+                id="signup-accept-terms"
+                type="checkbox"
+                required
+                checked={acceptTerms}
+                onChange={(e) => setAcceptTerms(e.target.checked)}
+                className="mt-1 h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+              />
+              <label htmlFor="signup-accept-terms" className="text-sm text-gray-700 dark:text-gray-300">
+                {t('signup.acceptTermsPrefix')}
+                <a href="https://docs.slugbase.app" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">
+                  {t('signup.acceptTermsTerms')}
+                </a>
+                {t('signup.acceptTermsAnd')}
+                <a href="https://docs.slugbase.app" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">
+                  {t('signup.acceptTermsPrivacy')}
+                </a>
+                {t('signup.acceptTermsSuffix')}
+              </label>
+            </div>
+            {error && (
+              <div className="px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+              </div>
+            )}
+            <Button
+              type="submit"
+              variant="primary"
+              disabled={loading}
+              className="w-full"
+            >
+              {loading ? t('common.loading') : t('signup.submit')}
+            </Button>
+          </form>
+          <p className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
+            {t('signup.alreadyHaveAccount')}{' '}
+            <Link to={`${appBasePath}/login`} className="font-medium text-blue-600 dark:text-blue-400 hover:underline">
+              {t('signup.logIn')}
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}