@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/pages/GoPreferences.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { ArrowLeft, Trash2, ExternalLink } from 'lucide-react';
+import Button from '../components/ui/Button';
+import { useToast } from '../components/ui/Toast';
+import api from '../api/client';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import { PageLoadingSkeleton } from '../components/ui/PageLoadingSkeleton';
+import { safeHref } from '../utils/safeHref';
+
+interface SlugPreference {
+  slug: string;
+  bookmark_id: string;
+  title: string;
+  url: string;
+  workspace: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export default function GoPreferences() {
+  const { t } = useTranslation();
+  const { appBasePath } = useAppConfig();
+  const { showToast } = useToast();
+  const [preferences, setPreferences] = useState<SlugPreference[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [deleting, setDeleting] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadPreferences();
+  }, []);
+
+  async function loadPreferences() {
+    try {
+      const res = await api.get('/go/preferences');
+      setPreferences(res.data);
+    } catch (err) {
+      console.error('Failed to load preferences:', err);
+      showToast(t('common.error'), 'error');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleRemove(slug: string) {
+    setDeleting(slug);
+    try {
+      await api.delete(`/go/preferences/${encodeURIComponent(slug)}`);
+      setPreferences((prev) => prev.filter((p) => p.slug !== slug));
+      showToast(t('common.success'), 'success');
+    } catch (err) {
+      console.error('Failed to remove preference:', err);
+      showToast(t('common.error'), 'error');
+    } finally {
+      setDeleting(null);
+    }
+  }
+
+  if (loading) {
+    return <PageLoadingSkeleton lines={6} />;
+  }
+
+  return (
+    <div className="space-y-6 max-w-3xl">
+      <div className="flex items-center gap-4">
+        <Link to={`${appBasePath}/profile`}>
+          <Button variant="ghost" size="sm" icon={ArrowLeft}>
+            {t('common.back')}
+          </Button>
+        </Link>
+        <div>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            {t('goPreferences.title')}
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {t('goPreferences.description')}
+          </p>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        {preferences.length === 0 ? (
+          <div className="p-8 text-center text-gray-500 dark:text-gray-400">
+            {t('goPreferences.empty')}
+          </div>
+        ) : (
+          <ul className="divide-y divide-gray-200 dark:divide-gray-700">
+            {preferences.map((pref) => (
+              <li
+                key={pref.slug}
+                className="flex items-center justify-between gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <code className="text-sm font-mono text-blue-600 dark:text-blue-400">
+                      /go/{pref.slug}
+                    </code>
+                    <span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                      {pref.workspace}
+                    </span>
+                  </div>
+                  <p className="mt-1 text-sm text-gray-600 dark:text-gray-400 truncate">
+                    {pref.title}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                  <a
+                    href={safeHref(pref.url)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-2 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"
+                    title={t('common.open')}
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    icon={Trash2}
+                    onClick={() => handleRemove(pref.slug)}
+                    disabled={deleting === pref.slug}
+                    className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300"
+                    title={t('common.remove')}
+                  />
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

package/frontend/src/pages/Login.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, Link, useSearchParams } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import api from '../api/client';
+import { getAuthProviderUrl } from '../config/api';
+import { LogIn, Key } from 'lucide-react';
+import Button from '../components/ui/Button';
+
+export default function Login() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { user } = useAuth();
+  const [providers, setProviders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [localAuth, setLocalAuth] = useState({
+    email: '',
+    password: '',
+  });
+  const [localLoading, setLocalLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (user) {
+      const redirectTo = searchParams.get('redirect');
+      const safePath = redirectTo?.startsWith('/') && !redirectTo.startsWith('//') ? redirectTo : null;
+      navigate(safePath || '/', { replace: true });
+    }
+  }, [user, navigate, searchParams]);
+
+  useEffect(() => {
+    // Check for OIDC error in URL query parameters
+    const errorParam = searchParams.get('error');
+    if (errorParam) {
+      if (errorParam === 'auth_failed') {
+        setError(t('auth.oidcAuthFailed'));
+      } else if (errorParam === 'auto_create_disabled') {
+        setError(t('auth.oidcAutoCreateDisabled'));
+      } else {
+        setError(t('auth.loginFailed'));
+      }
+      // Remove error from URL
+      searchParams.delete('error');
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [searchParams, setSearchParams, t]);
+
+  useEffect(() => {
+    api.get('/auth/providers')
+      .then(res => setProviders(res.data))
+      .catch(() => setProviders([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleOIDCLogin = (providerKey: string) => {
+    window.location.href = getAuthProviderUrl(providerKey);
+  };
+
+  const handleLocalLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLocalLoading(true);
+    setError('');
+
+    try {
+      await api.post('/auth/login', localAuth);
+      const redirectTo = searchParams.get('redirect');
+      const safePath = redirectTo?.startsWith('/') && !redirectTo.startsWith('//') ? redirectTo : null;
+      window.location.href = safePath || '/';
+    } catch (err: any) {
+      const code = err.response?.data?.code;
+      const message = err.response?.data?.error;
+      if (code === 'EMAIL_NOT_VERIFIED') {
+        setError(t('auth.verifyEmailRequired'));
+      } else {
+        setError(message || t('auth.loginFailed'));
+      }
+    } finally {
+      setLocalLoading(false);
+    }
+  };
+
+  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('auth.login')}
+          </h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            {t('app.tagline')}
+          </p>
+        </div>
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg p-4 space-y-6">
+          {/* Local Authentication Form */}
+          <form onSubmit={handleLocalLogin} className="space-y-5">
+            <div>
+              <label htmlFor="email" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('auth.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('auth.emailPlaceholder')}
+                value={localAuth.email}
+                onChange={(e) => setLocalAuth({ ...localAuth, email: e.target.value })}
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                {t('auth.password')}
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                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('auth.passwordPlaceholder')}
+                value={localAuth.password}
+                onChange={(e) => setLocalAuth({ ...localAuth, password: e.target.value })}
+              />
+            </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={localLoading}
+              icon={LogIn}
+              className="w-full"
+            >
+              {localLoading ? t('common.loading') : t('auth.login')}
+            </Button>
+            <div className="text-center space-y-2">
+              <Link
+                to="/password-reset"
+                className="block text-sm font-medium text-primary hover:text-primary/90"
+              >
+                {t('auth.forgotPassword')}
+              </Link>
+            </div>
+          </form>
+
+          {/* OIDC Providers */}
+          {!loading && providers.length > 0 && (
+            <>
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-3 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
+                    {t('auth.or')}
+                  </span>
+                </div>
+              </div>
+              <div className="space-y-3">
+                {providers.map((provider) => (
+                  <Button
+                    key={provider.id}
+                    variant="secondary"
+                    icon={Key}
+                    onClick={() => handleOIDCLogin(provider.provider_key)}
+                    className="w-full"
+                  >
+                    {t('auth.loginWith', { provider: provider.provider_key })}
+                  </Button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/pages/PasswordReset.tsx

@@ -0,0 +1,242 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams, useNavigate, Link } from 'react-router-dom';
+import api from '../api/client';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import { Mail, Key, ArrowLeft } from 'lucide-react';
+import Button from '../components/ui/Button';
+
+export default function PasswordReset() {
+  const { t } = useTranslation();
+  const { appBasePath } = useAppConfig();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get('token');
+
+  const step: 'request' | 'reset' = token ? 'reset' : 'request';
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [tokenValid, setTokenValid] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    if (token) {
+      verifyToken();
+    }
+  }, [token]);
+
+  const verifyToken = async () => {
+    try {
+      const response = await api.get('/password-reset/verify', { params: { token } });
+      setTokenValid(response.data.valid);
+    } catch (error: any) {
+      setTokenValid(false);
+      setMessage({ type: 'error', text: t('passwordReset.invalidToken') });
+    }
+  };
+
+  const handleRequestReset = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      await api.post('/password-reset/request', { email });
+      setMessage({ type: 'success', text: t('passwordReset.requestSent') });
+      setEmail('');
+    } catch (error: any) {
+      // Always show success message to prevent email enumeration
+      setMessage({ type: 'success', text: t('passwordReset.requestSent') });
+      setEmail('');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReset = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+
+    if (password !== confirmPassword) {
+      setMessage({ type: 'error', text: t('passwordReset.passwordMismatch') });
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await api.post('/password-reset/reset', { token, password });
+      setMessage({ type: 'success', text: t('passwordReset.resetSuccess') });
+      setTimeout(() => {
+        navigate('/login');
+      }, 2000);
+    } catch (error: any) {
+      setMessage({
+        type: 'error',
+        text: error.response?.data?.error || t('common.error'),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
+            {t('passwordReset.title')}
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
+            {step === 'request'
+              ? t('passwordReset.description')
+              : t('passwordReset.resetPassword')}
+          </p>
+        </div>
+
+        {message && (
+          <div
+            className={`rounded-lg p-4 ${
+              message.type === 'success'
+                ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+            }`}
+          >
+            {message.text}
+          </div>
+        )}
+
+        {step === 'request' ? (
+          <form className="mt-8 space-y-6" onSubmit={handleRequestReset}>
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                {t('passwordReset.email')}
+              </label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  className="appearance-none relative block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                  placeholder={t('passwordReset.emailPlaceholder')}
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div>
+              <Button
+                type="submit"
+                variant="primary"
+                className="w-full"
+                disabled={loading}
+              >
+                {t('passwordReset.requestReset')}
+              </Button>
+            </div>
+
+            <div className="text-center">
+              <Link
+                to={`${appBasePath}/login`}
+                className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                {t('passwordReset.backToLogin')}
+              </Link>
+            </div>
+          </form>
+        ) : (
+          <>
+            {tokenValid === null ? (
+              <div className="text-center text-gray-500 dark:text-gray-400">
+                {t('common.loading')}
+              </div>
+            ) : tokenValid === false ? (
+              <div className="text-center">
+                <p className="text-red-600 dark:text-red-400 mb-4">
+                  {t('passwordReset.invalidToken')}
+                </p>
+                <Link
+                  to={`${appBasePath}/password-reset`}
+                  className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                  {t('passwordReset.backToLogin')}
+                </Link>
+              </div>
+            ) : (
+              <form className="mt-8 space-y-6" onSubmit={handleReset}>
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t('passwordReset.newPassword')}
+                  </label>
+                  <div className="relative">
+                    <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+                    <input
+                      id="password"
+                      name="password"
+                      type="password"
+                      autoComplete="new-password"
+                      required
+                      className="appearance-none relative block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                      placeholder={t('auth.passwordPlaceholder')}
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t('passwordReset.confirmPassword')}
+                  </label>
+                  <div className="relative">
+                    <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+                    <input
+                      id="confirmPassword"
+                      name="confirmPassword"
+                      type="password"
+                      autoComplete="new-password"
+                      required
+                      className="appearance-none relative block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                      placeholder={t('passwordReset.confirmPassword')}
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Button
+                    type="submit"
+                    variant="primary"
+                    className="w-full"
+                    disabled={loading}
+                  >
+                    {t('passwordReset.resetPassword')}
+                  </Button>
+                </div>
+
+                <div className="text-center">
+                  <Link
+                    to={`${appBasePath}/login`}
+                    className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+                  >
+                    <ArrowLeft className="h-4 w-4" />
+                    {t('passwordReset.backToLogin')}
+                  </Link>
+                </div>
+              </form>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}