Merge pull request 'feat: games are no working on moblie devices' (#6) from RWD into master

Reviewed-on: #6

.env.default

@@ -1,7 +1,7 @@
-# Site info
+PUBLIC_URL=https://example.com
-PUBLIC_URL=https://example.com # Publicly accessible website root, used for rewrites. Note there is no trailing slash in the URL.
+USE_SUBDOMAINS=true
-USE_SUBDOMAINS=true            # Whether backend allows for use of subdomains in URL generation.
 DEBUG=false
+
 # Frontend specific
-<miejsce na twoje zmienne>
+VITE_API_TARGET=https://pies.com
-VITE_API_TARGET=kitkat.example.com # Target backend for API requests.
+VITE_ALLOWED_HOST=pies.com # for sub domens add . before host address

kittyurl-frontend/index.html

@@ -13,7 +13,7 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="kittyurl shortener" />
     <meta name="twitter:description" content="Your go-to place for short and memorable URLs." />
-    <meta name="twitter:image" content="/src/assets/ket.png" />
+    <meta name="twitter:image" content="/src/assets/Ket.png" />
 
 
 </head>

kittyurl-frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
         "axios": "^1.13.2",
+        "js-cookie": "^3.0.5",
         "js-sha512": "^0.9.0",
         "lucide-react": "^0.562.0",
         "react": "^19.2.0",
@@ -18,6 +19,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -1588,6 +1590,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3007,6 +3016,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-sha512": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/js-sha512/-/js-sha512-0.9.0.tgz",

kittyurl-frontend/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
     "axios": "^1.13.2",
+    "js-cookie": "^3.0.5",
     "js-sha512": "^0.9.0",
     "lucide-react": "^0.562.0",
     "react": "^19.2.0",
@@ -21,6 +22,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",

kittyurl-frontend/src/App.tsx

@@ -7,19 +7,43 @@ import { KittyGame } from './components/KittyGame';
 import { FlappyCat } from './components/FlappyCat';
 import { useAuth } from './hooks/useAuth';
 
-// Eksportujemy typ, aby inne pliki mogły go użyć
 export type View = 'home' | 'login' | 'history' | 'jump-game' | 'flappy-game';
 
+const getSubdomain = () => {
+    const hostname = window.location.hostname;
+    const parts = hostname.split('.');
+    if (parts.length <= 2) return null;
+    return parts[0];
+};
+
 function App() {
     const [url, setUrl] = useState('');
     const [view, setView] = useState<View>('home');
     const { isAuthenticated, logout } = useAuth();
+    const subdomain = getSubdomain();
+
+    /**
+     * STAN POCHODNY (Derived State)
+     * Rozwiązuje błąd "cascading renders". Jeśli użytkownik jest na subdomenie
+     * i nie jest zalogowany, automatycznie renderujemy widok logowania,
+     * ale nie nadpisujemy stanu 'view' w nieskończoność.
+     */
+    const activeView = (subdomain && !isAuthenticated) ? 'login' : view;
 
     const renderView = () => {
-        switch (view) {
+        switch (activeView) {
             case 'login':
-                return <LoginView onBack={() => setView('home')} onSuccess={() => setView('home')} />;
+                return (
+                    <LoginView
+                        onBack={() => setView('home')}
+                        onSuccess={() => setView('home')}
+                    />
+                );
             case 'history':
+                // Strażnik dostępu dla widoku historii
+                if (!isAuthenticated) {
+                    return <LoginView onBack={() => setView('home')} onSuccess={() => setView('home')} />;
+                }
                 return <HistoryView onBack={() => setView('home')} />;
             case 'jump-game':
                 return <KittyGame onBack={() => setView('home')} />;
@@ -37,7 +61,12 @@ function App() {
                 isAuthenticated={isAuthenticated}
                 onLogout={logout}
             />
-            <main>{renderView()}</main>
+            <main>
+                {/* Jeśli użytkownik jest zalogowany (SSO), activeView od razu 
+                  pokaże Generator, zamiast LoginView.
+                */}
+                {renderView()}
+            </main>
         </div>
     );
 }

kittyurl-frontend/src/api/auth.ts

@@ -1,25 +0,0 @@
-import axios from 'axios';
-import { sha512 } from 'js-sha512';
-
-// Interfejs zgodny z Twoją dokumentacją [cite: 74-79]
-export interface AuthResponse {
-  status: "ok";
-  name: string;
-  role: "user" | "admin";
-  token: string;
-}
-
-export const loginUser = async (name: string, pass: string): Promise<AuthResponse> => {
-  // Wysyłamy POST zgodnie ze specyfikacją dokumentacji [cite: 68]
-  const response = await axios.post('https://twoj-backend.pl/api/v1/user/signIn', {
-    name: name,
-    password: sha512(pass) // Wymagane SHA-512 [cite: 71]
-  });
-
-  // Jeśli sukces, zapisujemy token JWT [cite: 78]
-  if (response.data.status === "ok") {
-    localStorage.setItem('token', response.data.token);
-  }
-
-  return response.data;
-};

kittyurl-frontend/src/components/Generator.tsx

@@ -15,7 +15,7 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                 KittyURL <PawPrint className="w-8 h-8 sm:w-12 sm:h-12" fill="currentColor" />
             </h1>
             <p className="text-pink-300 text-lg sm:text-xl font-medium px-4">
-                Shorten your links with a purr!
+                Shorten KKKKKK your links with a purr!
             </p>
         </header>
 

kittyurl-frontend/src/context/AuthProvider.tsx

@@ -1,38 +1,68 @@
-// src/context/AuthProvider.tsx
+import { useState, useCallback, type ReactNode } from 'react';
-import { useState, useCallback, type ReactNode } from 'react';
+import Cookies from 'js-cookie';
-import { AuthContext } from './AuthContext'; // Importujemy stałą z pliku obok
+import { AuthContext } from './AuthContext';
 import { sha512 } from '../utils/crypto';
-import type { AuthResponse } from '../types/auth';
+
+const TOKEN_KEY = 'ktty_shared_token';
+
+const getCookieConfig = () => {
+    const hostname = window.location.hostname;
+
+    // Sprawdzamy, czy jesteśmy na localhost
+    const isLocal = hostname === 'localhost' || hostname === '127.0.0.1';
+
+    // Sprawdzamy, czy połączenie jest bezpieczne (HTTPS)
+    const isSecure = window.location.protocol === 'https:';
+
+    return {
+        // Na produkcji używamy domeny nadrzędnej z kropką, by działało na subdomenach
+        // Na localhost MUSI być undefined, inaczej przeglądarka odrzuci ciasteczko
+        domain: isLocal ? undefined : '.ktty.is',
+
+        // Atrybut Secure wymaga HTTPS. Na localhost wyłączamy, na produkcji włączamy.
+        secure: isSecure,
+
+        // 'Lax' jest bezpieczne i pozwala na współdzielenie w obrębie subdomen.
+        // Jeśli API jest na zupełnie innej domenie, rozważ 'None' (wymaga Secure: true).
+        sameSite: 'Lax' as const,
+
+        path: '/',
+        expires: 7
+    };
+};
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-    const [token, setToken] = useState<string | null>(sessionStorage.getItem('ktty_token'));
+    const [token, setToken] = useState<string | null>(() => Cookies.get(TOKEN_KEY) || null);
     const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null); // DODANE
 
-    const authRequest = useCallback(async (endpoint: 'signUp' | 'signIn', name: string, pass: string) => {
+    const authRequest = useCallback(async (endpoint: 'signIn' | 'signUp', name: string, pass: string) => {
         setLoading(true);
         setError(null);
+
         try {
             const hashedPassword = await sha512(pass);
             const response = await fetch(`/api/v1/user/${endpoint}`, {
                 method: 'POST',
-                headers: {
+                headers: { 'Content-Type': 'application/json' },
-                    'accept': 'application/json',
+                credentials: 'include',
-                    'Content-Type': 'application/json',
+                body: JSON.stringify({ name, password: hashedPassword }),
-                },
-                body: JSON.stringify({ name, password: hashedPassword, ttl: 86400 }),
             });
 
-            const data: AuthResponse = await response.json();
+            const data = await response.json();
-            if (!response.ok) throw new Error(data.error || data.message || `Error ${response.status}`);
 
-            if (data.token) {
+            if (!response.ok) {
-                sessionStorage.setItem('ktty_token', data.token);
+                throw new Error(data?.message || 'Błąd autoryzacji');
-                setToken(data.token); // To aktualizuje stan w całej aplikacji natychmiast!
+            }
+
+            if (data?.token) {
+                Cookies.set(TOKEN_KEY, data.token, getCookieConfig());
+                setToken(data.token);
             }
             return data;
         } catch (err: unknown) {
-            setError(err instanceof Error ? err.message : 'Unknown error');
+            const msg = err instanceof Error ? err.message : 'Wystąpił błąd';
+            setError(msg);
             return null;
         } finally {
             setLoading(false);
@@ -40,7 +70,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }, []);
 
     const logout = useCallback(() => {
-        sessionStorage.removeItem('ktty_token');
+        const config = getCookieConfig();
+        // When removing, you must match the domain and path used when setting
+        Cookies.remove(TOKEN_KEY, { domain: config.domain, path: config.path });
         setToken(null);
     }, []);
 

kittyurl-frontend/tsconfig.app.json

@@ -1,4 +1,4 @@
-{
+{
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2022",

kittyurl-frontend/tsconfig.json

@@ -1,7 +1,8 @@
-{
+{
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
+
   ]
 }

kittyurl-frontend/vite.config.ts

@@ -1,50 +1,54 @@
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig, loadEnv, type PluginOption } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
-import path from 'path' // Importuj moduł path
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 export default defineConfig(({ mode }) => {
-    // Ustawiamy ścieżkę do folderu, w którym faktycznie znajduje się plik .env
-    // path.resolve(__dirname, '..') oznacza: "wyjdź jeden poziom wyżej względem tego pliku"
     const envDirectory = path.resolve(__dirname, '..');
-
-    // Ładujemy env z określonej lokalizacji
     const env = loadEnv(mode, envDirectory, '');
 
-    const apiTarget = env.VITE_API_TARGET;
+    const backendTarget = env.VITE_API_TARGET;
 
     return {
+        envDir: envDirectory,
         plugins: [
-            react(),
+            react() as PluginOption,
-            tailwindcss(),
+            tailwindcss() as PluginOption,
         ],
         server: {
             port: 6568,
+            host: true, // Pozwala na dostęp przez IP w sieci lokalnej
+            // Jeśli testujesz subdomeny lokalnie (np. app.local.ktty.is), dodaj to:
+            allowedHosts: [
+                '.ktty.is',
+                'localhost',
+                '127.0.0.1',
+
+            ],
+            // vite.config.ts
             proxy: {
                 '/api': {
-                    target: apiTarget,
+                    target: backendTarget,
                     changeOrigin: true,
                     secure: false,
-                    headers: {
+                    cookieDomainRewrite: {
-                        'Origin': apiTarget,
+                        "*": ""
-                        'Referer': `${apiTarget}/`
+                    },                    
                 },
-                    configure: (proxy) => {
-                        proxy.on('error', (err) => {
-                            console.log('[Proxy Error]:', err.message);
-                        });
-                        proxy.on('proxyReq', (_, req) => {
-                            console.log(`[Proxy] Wysyłam do: ${apiTarget}${req.url}`);
-                        });
-                        proxy.on('proxyRes', (proxyRes, req) => {
-                            console.log(`[Proxy] Odpowiedź: ${proxyRes.statusCode} ${req.url}`);
-                        });
             },
-                }
-            }
         },
         preview: {
             port: 6568,
+            allowedHosts: true,
+        },
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+            },
         },
     }
 })