fix: docker packages and IP parsing for 127.0.0.1

fix: optimized size of kitty photos
Updated readme with the current state of app
2026-01-09 21:55:46 +01:00 · 2026-01-09 14:48:37 +01:00 · 2026-01-07 23:52:13 +01:00 · 2026-01-06 16:50:42 +01:00 · 2026-01-06 16:41:39 +01:00 · 2026-01-06 16:40:33 +01:00
18 changed files with 591 additions and 135 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1 +1,2 @@
 .env
 kittyurl-frontend/node_modules
--- a/.env.default
+++ b/.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
--- a/3
+++ b/3
@@ -1,11 +1,12 @@
 # Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
 # https://stackoverflow.com/a/56941391
 FROM node:24-trixie-slim AS builder
 WORKDIR /app
 COPY ./kittyurl-frontend/package*.json ./
 RUN npm ci && npm cache clean --force
-COPY ./kittyurl-frontend/ .
+COPY ./kittyurl-frontend/. ./
 RUN npm run build
 FROM node:24-trixie-slim AS production
--- a/README.md
+++ b/README.md
@@ -1,2 +1,73 @@
 # kittyFE
 *Front-end for the [KittyURL](https://gitea.7o7.cx/kittyteam/kittyurl) project — create short and memorable URLs with ease!*
 ## Goals
 Provide a responsive and modern user interface for:
 * Account management (login, register, history, settings)
 * Link creation (public landing page)
 * Dashboard link management (for logged-in users)
 * User management (admin panel)
 KittyFE is built with **Vite + React (TypeScript)** to integrate seamlessly with [kittyBE](https://gitea.7o7.cx/kittyteam/kittyBE) and is easily dockerizable.
 ## Running kittyFE
 KittyFE has been verified to work on **Node v24.11.1**.
 ### On bare metal
 Running the front-end is as simple as:
 1. **Install dependencies**
   * To download the required dependencies:
     ```sh
     npm install
     ```
   * To install an exact copy of all dependencies (recommended for CI):
     ```sh
     npm ci
     ```
 2. **Configure environment variables**
   Copy the `.env.example` file to `.env` and customize it to your preferences.
   **Example:** Tell the frontend where the backend API is located. Your `.env` file should look like this:
   ```properties
   VITE_API_TARGET=http://localhost:6567
   ```
   > **Important:** All environment variables exposed to Vite must start with `VITE_`. Make sure the URL matches your running instance of `kittyBE`.
 3. **Launch the development server**
   ```sh
   npm run dev
   ```
 4. **Open the app**
   Visit:
   ```text
   http://localhost:6568
   ```
   (or the port shown in your terminal output).
 ### Building for production
 To create an optimized static production build:
 ```sh
 npm run build
 ```
--- a/kittyurl-frontend/index.html
+++ b/kittyurl-frontend/index.html
@@ -2,18 +2,18 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.png" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.jpg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kittyurl - shorten URLs with ease</title>
    <meta property="og:title" content="kittyurl shortener" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content="Your go-to place for short and memorable URLs." />
-    <meta property="og:image" content="/src/assets/Ket.png" />
+    <meta property="og:image" content="/src/assets/Ket.jpg" />
    <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.jpg" />
 </head>
--- a/kittyurl-frontend/package-lock.json
+++ b/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",
--- a/kittyurl-frontend/package.json
+++ b/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",
--- a/kittyurl-frontend/src/App.tsx
+++ b/kittyurl-frontend/src/App.tsx
@@ -7,19 +7,50 @@ 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;
    // Handle localhost and 127.0.0.1 cases.
    // For more advanced cases (like bare IP hosting)
    // a regex may be necessary.
    if (hostname === 'localhost' || hostname === '127.0.0.1') {
        return null;
    }
    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 +68,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>
    );
 }
--- a/kittyurl-frontend/src/api/auth.ts
+++ b/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;
 };
--- a/kittyurl-frontend/src/assets/Ket.jpg
+++ b/kittyurl-frontend/src/assets/Ket.jpg
--- a/kittyurl-frontend/src/assets/Ket.png
+++ b/kittyurl-frontend/src/assets/Ket.png
--- a/kittyurl-frontend/src/assets/kitty.jpg
+++ b/kittyurl-frontend/src/assets/kitty.jpg
--- a/kittyurl-frontend/src/assets/kitty.png
+++ b/kittyurl-frontend/src/assets/kitty.png
--- a/kittyurl-frontend/src/components/Generator.tsx
+++ b/kittyurl-frontend/src/components/Generator.tsx
@@ -1,60 +1,388 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { PawPrint, Heart, Sparkles, Cat } from 'lucide-react';
+import {
    PawPrint, Heart, Sparkles, Cat, Hash,
    Globe, BookOpen, Shield, Calendar,
    Settings2, AlertCircle, X, Save, RefreshCw, Copy, Check, ExternalLink, User as UserIcon
 } from 'lucide-react';
 // Pobieramy adres API
 const API_BASE = import.meta.env.VITE_API_TARGET;
 // Nazwa klucza w localStorage
 const TOKEN_KEY = 'jwt_token';
 type CaseType = 'upper' | 'lower' | 'mixed';
 // 1. Definicja propsów, które przychodzą z App.tsx
 interface GeneratorProps {
    url: string;
-    setUrl: (val: string) => void;
+    setUrl: (url: string) => void;
    onGenerate: () => void;
 }
-export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
+interface GeneratorSettings {
-    <div className="max-w-[800px] mx-auto pt-10 sm:pt-16 px-4 flex flex-col items-center">
+    length: number;
-        {/* Header - Skalowanie tekstu i ikony */}
+    alphanum: boolean;
-        <header className="text-center mb-8 sm:mb-12">
+    case: CaseType;
-            <h1 className="text-4xl sm:text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2 sm:gap-4">
+    withSubdomain: boolean;
-                KittyURL <PawPrint className="w-8 h-8 sm:w-12 sm:h-12" fill="currentColor" />
+}
 // Usunęliśmy 'remoteUrl' stąd, bo teraz przychodzi z propsów (url)
 interface LinkFormData {
    uri: string;
    subdomain: string;
    privacy: boolean;
    expiryDate: string;
 }
 interface LinkPayload {
    remoteUrl: string;
    uri: string;
    subdomain?: string;
    privacy: boolean;
    expiryDate: number;
    userId?: string;
 }
 interface User {
    id: string;
    username: string;
    email?: string;
 }
 // 2. Dodajemy propsy do argumentów funkcji
 export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => {
    const [user, setUser] = useState<User | null>(null);
    // Stan formularza (bez remoteUrl, bo to jest teraz w 'url')
    const [formData, setFormData] = useState<LinkFormData>({
        uri: '',
        subdomain: '',
        privacy: true,
        expiryDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
    });
    const [genSettings, setGenSettings] = useState<GeneratorSettings>({
        length: 6,
        alphanum: true,
        case: 'mixed',
        withSubdomain: false
    });
    const [loading, setLoading] = useState(false);
    const [generatingUri, setGeneratingUri] = useState(false);
    const [errorMsg, setErrorMsg] = useState<string | null>(null);
    const [result, setResult] = useState<string | null>(null);
    const [copied, setCopied] = useState(false);
    const getAuthHeaders = () => {
        const token = localStorage.getItem(TOKEN_KEY);
        return {
            'Content-Type': 'application/json',
            ...(token ? { 'Authorization': `Bearer ${token}` } : {})
        };
    };
    // Sprawdzenie sesji użytkownika
    useEffect(() => {
        const checkUser = async () => {
            const token = localStorage.getItem(TOKEN_KEY);
            if (!token) return;
            try {
                const res = await fetch(`${API_BASE}/api/v1/user/account`, {
                    headers: getAuthHeaders()
                });
                if (res.ok) {
                    const data = await res.json();
                    setUser({
                        id: data.id || data._id || data.userId,
                        username: data.username || data.name || data.email || "User",
                        email: data.email
                    });
                } else {
                    console.log("Session expired. Logging out.");
                    localStorage.removeItem(TOKEN_KEY);
                    setUser(null);
                }
            } catch {
                console.log("API unreachable");
            }
        };
        checkUser();
    }, []);
    const handleGenerateUri = async (type: 'random' | 'wordlist') => {
        setGeneratingUri(true);
        setErrorMsg(null);
        try {
            let endpoint = '';
            const params = new URLSearchParams();
            params.append('withSubdomain', genSettings.withSubdomain.toString());
            if (type === 'random') {
                endpoint = '/api/v1/link/short';
                params.append('length', genSettings.length.toString());
                params.append('alphanum', genSettings.alphanum.toString());
                if (genSettings.case !== 'mixed') {
                    params.append('case', genSettings.case);
                }
            } else {
                endpoint = '/api/v1/link/fromWordlist';
            }
            const response = await fetch(`${API_BASE}${endpoint}?${params.toString()}`);
            const data = await response.json();
            if (!response.ok) throw new Error(data.error || 'Generation failed');
            const generatedUri = data.uri || data.shortUrl || data.link || "";
            setFormData(prev => ({ ...prev, uri: generatedUri }));
        } catch (err: unknown) {
            if (err instanceof Error) setErrorMsg(err.message);
        } finally {
            setGeneratingUri(false);
        }
    };
    const handleSubmitToDb = async () => {
        // Używamy propsa 'url' zamiast formData.remoteUrl
        if (!url) {
            setErrorMsg("Meow! I need a destination URL first! 🐾");
            return;
        }
        if (!formData.uri) {
            setErrorMsg("Please generate or write a short URI code!");
            return;
        }
        setLoading(true);
        setErrorMsg(null);
        setResult(null);
        try {
            const payload: LinkPayload = {
                remoteUrl: url, // <-- Tutaj wstawiamy wartość z propsa
                uri: formData.uri,
                subdomain: formData.subdomain || undefined,
                privacy: formData.privacy,
                expiryDate: new Date(formData.expiryDate).getTime()
            };
            if (user && user.id) {
                payload.userId = user.id;
            }
            const response = await fetch(`${API_BASE}/api/v1/link/new`, {
                method: 'POST',
                headers: getAuthHeaders(),
                body: JSON.stringify(payload)
            });
            const data = await response.json();
            if (!response.ok) {
                throw new Error(data.error || `Database error ${response.status}`);
            }
            const finalLink = data.url || `${API_BASE.replace('api.', '')}/${formData.uri}`;
            setResult(finalLink);
            // Wywołujemy callback z App.tsx (np. żeby pokazać powiadomienie)
            onGenerate();
        } catch (err: unknown) {
            if (err instanceof Error) setErrorMsg(err.message);
            else setErrorMsg("Something went wrong saving to DB!");
        } finally {
            setLoading(false);
        }
    };
    const copyToClipboard = (text: string) => {
        navigator.clipboard.writeText(text);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };
    return (
        <div className="max-w-[800px] mx-auto pt-10 px-4 flex flex-col items-center pb-20">
            {/* Header */}
            <header className="text-center mb-8 relative w-full flex flex-col items-center">
                <div className={`mb-4 px-4 py-2 rounded-full text-xs font-bold flex items-center gap-2 transition-colors ${user ? 'bg-pink-100 text-pink-600' : 'bg-gray-100 text-gray-400'}`}>
                    <UserIcon size={14} />
                    {user ? `Logged in as ${user.username}` : 'Guest Mode (Anonymous)'}
                </div>
                <h1 className="text-4xl sm:text-6xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2">
                    KittyURL <PawPrint className="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" />
                </h1>
-            <p className="text-pink-300 text-lg sm:text-xl font-medium px-4">
+                <p className="text-pink-300 font-medium">Shorten your links with a purr!</p>
                Shorten your links with a purr!
            </p>
            </header>
-        {/* Główna karta - mniejsze paddingi i zaokrąglenia na mobile */}
+            {/* Error Display */}
-        <div className="w-full bg-white rounded-[2rem] sm:rounded-[3rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-10 border-4 border-white relative overflow-hidden">
+            {errorMsg && (
-            <div className="mb-6">
+                <div className="w-full mb-6 animate-in fade-in slide-in-from-top-2">
-                <label className="block text-[10px] sm:text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">
+                    <div className="bg-red-50 border-2 border-red-200 p-4 rounded-2xl flex items-center gap-3 text-red-600 shadow-lg">
-                    Long URL to shorten
+                        <AlertCircle size={20} />
                        <span className="font-bold text-sm flex-1">{errorMsg}</span>
                        <button onClick={() => setErrorMsg(null)}><X size={20} className="hover:scale-110 transition-transform" /></button>
                    </div>
                </div>
            )}
            {/* Success Result Card */}
            {result && (
                <div className="w-full mb-8 animate-in zoom-in-95 duration-500">
                    <div className="bg-gradient-to-r from-green-400 to-emerald-500 p-1 rounded-[2.5rem] shadow-2xl shadow-green-200">
                        <div className="bg-white rounded-[2.3rem] p-6 flex flex-col sm:flex-row items-center gap-4">
                            <div className="bg-green-100 p-3 rounded-full"><Check className="text-green-600 w-6 h-6" /></div>
                            <div className="flex-1 text-center sm:text-left overflow-hidden w-full">
                                <p className="text-[10px] font-black uppercase tracking-widest text-green-400 mb-1">Saved to Database!</p>
                                <p className="text-xl font-black text-gray-700 truncate">{result}</p>
                            </div>
                            <div className="flex gap-2">
                                <button onClick={() => copyToClipboard(result)} className="p-3 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors">
                                    {copied ? <Check size={20} className="text-green-600" /> : <Copy size={20} className="text-gray-600" />}
                                </button>
                                <a href={result} target="_blank" rel="noreferrer" className="p-3 bg-pink-500 hover:bg-pink-600 text-white rounded-xl transition-colors">
                                    <ExternalLink size={20} />
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            )}
            {/* Main Form */}
            <div className="w-full bg-white rounded-[2.5rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-8 border-4 border-white">
                {/* 1. Destination URL */}
                <div className="mb-8">
                    <label className="flex items-center gap-2 text-[11px] font-black uppercase tracking-widest text-pink-400 mb-2 ml-1">
                        <Settings2 size={12} /> 1. Destination URL
                    </label>
-                <div className="relative">
+                    <div className="relative group">
                        <input
                            type="url"
-                        placeholder="https://example.com/very-long-url"
+                            placeholder="https://very-long-link.com/..."
-                        className="w-full p-4 sm:p-5 bg-pink-50/30 border-2 border-pink-100 rounded-xl sm:rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-base sm:text-lg shadow-inner pr-12"
+                            className="w-full p-4 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-pink-600 font-medium pr-12"
-                        value={url}
+                            value={url} // Używamy propsa
-                        onChange={(e) => setUrl(e.target.value)}
+                            onChange={(e) => setUrl(e.target.value)} // Używamy propsa
                        />
-                    <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 sm:w-6 sm:h-6" />
+                        <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 group-focus-within:text-pink-400 transition-colors" />
                    </div>
                </div>
-            <button
+                {/* 2. Short Code Generation */}
-                onClick={onGenerate}
+                <div className="mb-8 bg-pink-50/30 p-5 rounded-[2rem] border border-pink-100">
-                className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-4 sm:py-5 rounded-xl sm:rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-lg sm:text-xl flex items-center justify-center gap-3 cursor-pointer"
+                    <label className="flex items-center gap-2 text-[11px] font-black uppercase tracking-widest text-pink-400 mb-3 ml-1">
                        <Sparkles size={12} /> 2. Generate Short Code (URI)
                    </label>
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
                        <div className="bg-white p-2 rounded-xl border border-pink-100">
                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Length</label>
                            <input type="number" min="3" max="32" className="w-full font-bold text-pink-500 outline-none text-sm"
                                value={genSettings.length} onChange={e => setGenSettings({ ...genSettings, length: +e.target.value })} />
                        </div>
                        <div className="bg-white p-2 rounded-xl border border-pink-100">
                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Case</label>
                            <select
                                className="w-full font-bold text-pink-500 outline-none text-sm bg-transparent"
                                value={genSettings.case}
                                onChange={e => setGenSettings({ ...genSettings, case: e.target.value as CaseType })}
                            >
-                <span className="hidden xs:inline">Generate Kitty Link</span>
+                                <option value="mixed">Mixed</option>
-                <span className="xs:hidden">Generate</span>
+                                <option value="lower">Lower</option>
-                <Sparkles className="w-5 h-5 sm:w-6 sm:h-6" />
+                                <option value="upper">Upper</option>
                            </select>
                        </div>
                        <button
                            onClick={() => handleGenerateUri('random')}
                            disabled={generatingUri}
                            className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition-all active:scale-95 py-2"
                        >
                            <Hash size={16} />
                            {generatingUri ? '...' : 'Random'}
                        </button>
                        <button
                            onClick={() => handleGenerateUri('wordlist')}
                            disabled={generatingUri}
                            className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition-all active:scale-95 py-2"
                        >
                            <BookOpen size={16} />
                            {generatingUri ? '...' : 'Sentence'}
                        </button>
                    </div>
-        {/* Sekcja "No links yet" - Skalowanie paddingu i ikony */}
+                    <div className="relative">
-        <div className="w-full mt-10 sm:mt-16 text-center">
+                        <input
-            <div className="bg-pink-100/50 rounded-[2rem] sm:rounded-[2.5rem] border-4 border-dashed border-pink-200 p-8 sm:p-12">
+                            type="text"
-                <Cat className="mx-auto text-pink-200 mb-4 w-12 h-12 sm:w-16 sm:h-16" />
+                            placeholder="my-custom-uri"
-                <p className="text-pink-300 font-bold text-sm sm:text-base px-2">
+                            className="w-full p-4 pl-12 bg-white border-2 border-pink-200 rounded-2xl outline-none focus:border-pink-500 transition-all text-pink-600 font-black text-lg shadow-inner"
-                    No links generated yet. Feed me a URL! 🐾
+                            value={formData.uri}
                            onChange={(e) => setFormData({ ...formData, uri: e.target.value })}
                        />
                        <div className="absolute left-4 top-1/2 -translate-y-1/2 text-pink-300 font-bold select-none">/</div>
                        {formData.uri && (
                            <div className="absolute right-4 top-1/2 -translate-y-1/2">
                                <Check size={18} className="text-green-500" />
                            </div>
                        )}
                    </div>
                </div>
                {/* 3. Database Settings */}
                <div className="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                        <label className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400 mb-2"><Calendar size={14} /> Expiry Date</label>
                        <input type="date" className="w-full bg-white border border-gray-200 rounded-lg px-3 py-2 text-xs font-bold text-gray-600 outline-none focus:border-pink-400"
                            value={formData.expiryDate}
                            onChange={e => setFormData({ ...formData, expiryDate: e.target.value })} />
                    </div>
                    <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors">
                        <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Shield size={14} /> Private Link</span>
                        <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={formData.privacy}
                            onChange={e => setFormData({ ...formData, privacy: e.target.checked })} />
                    </label>
                    <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors sm:col-span-2">
                        <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Globe size={14} /> Subdomain Support</span>
                        <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={genSettings.withSubdomain}
                            onChange={e => {
                                setGenSettings({ ...genSettings, withSubdomain: e.target.checked });
                                setFormData({ ...formData, subdomain: e.target.checked ? 'true' : '' });
                            }} />
                    </label>
                </div>
                {/* 4. Submit Button */}
                <button
                    onClick={handleSubmitToDb}
                    disabled={loading}
                    className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.8rem] transition-all shadow-xl shadow-pink-200 active:scale-[0.98] text-xl flex items-center justify-center gap-3 disabled:opacity-50 disabled:grayscale"
                >
                    {loading ? (
                        <>Saving... <RefreshCw className="animate-spin" /></>
                    ) : (
                        <>Save to Database <Save className="w-6 h-6" /></>
                    )}
                </button>
            </div>
            <footer className="mt-12 text-center opacity-40">
                <Cat className="mx-auto text-pink-300 mb-2 w-10 h-10" />
                <p className="text-pink-300 font-black text-[10px] uppercase tracking-[0.2em]">
                    KittyURL Generator v2.0
                </p>
            </footer>
        </div>
-        </div>
+    );
-    </div>
+};
 );
--- a/kittyurl-frontend/src/context/AuthProvider.tsx
+++ b/kittyurl-frontend/src/context/AuthProvider.tsx
@@ -1,47 +1,66 @@
-// src/context/AuthProvider.tsx
+import { useState, useCallback, type ReactNode } from 'react';
-import { useState, useCallback, type ReactNode } from 'react';
+import { AuthContext } from './AuthContext';
 import { AuthContext } from './AuthContext'; // Importujemy stałą z pliku obok
 import { sha512 } from '../utils/crypto';
-import type { AuthResponse } from '../types/auth';
+
 // Nazwa klucza w localStorage (musi być spójna z Generator.tsx)
 const TOKEN_KEY = 'jwt_token';
 // Adres API
 const API_BASE = import.meta.env.VITE_API_TARGET || 'https://ktty.is';
 export function AuthProvider({ children }: { children: ReactNode }) {
-    const [token, setToken] = useState<string | null>(sessionStorage.getItem('ktty_token'));
+    // Inicjalizacja stanu
    const [token, setToken] = useState<string | null>(() => localStorage.getItem(TOKEN_KEY));
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
-    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}`, {
+
            const response = await fetch(`${API_BASE}/api/v1/user/${endpoint}`, {
                method: 'POST',
-                headers: {
+                headers: { 'Content-Type': 'application/json' },
-                    'accept': 'application/json',
+                body: JSON.stringify({ name, password: hashedPassword }),
                    'Content-Type': 'application/json',
                },
                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 || data?.error || 'Błąd autoryzacji');
                setToken(data.token); // To aktualizuje stan w całej aplikacji natychmiast!
            }
            if (data?.token) {
                localStorage.setItem(TOKEN_KEY, data.token);
                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);
        }
    }, []);
    // ZMODYFIKOWANA FUNKCJA LOGOUT
    const logout = useCallback(() => {
-        sessionStorage.removeItem('ktty_token');
+        // 1. Usuwamy token z pamięci
        localStorage.removeItem(TOKEN_KEY);
        setToken(null);
        // 2. Wymuszamy odświeżenie aplikacji
        // To jest "Hard Refresh", który czyści cały stan Reacta
        window.location.reload();
        // Opcjonalnie: Jeśli wolisz tylko przekierowanie na główną bez pełnego przeładowania (szybciej, ale zostawia stan w pamięci):
        // window.location.href = '/'; 
    }, []);
    return (
--- a/kittyurl-frontend/tsconfig.app.json
+++ b/kittyurl-frontend/tsconfig.app.json
@@ -1,4 +1,4 @@
-{
+{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
--- a/kittyurl-frontend/tsconfig.json
+++ b/kittyurl-frontend/tsconfig.json
@@ -1,7 +1,8 @@
-{
+{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/kittyurl-frontend/vite.config.ts
+++ b/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'),
            },
        },
    }
 })
Author	SHA1	Message	Date
sherl	c829cb2a6b	fix: docker packages and IP parsing for 127.0.0.1 Some checks failed Release new version / release (push) Successful in 27s Details Update changelog / changelog (push) Successful in 26s Details Build and push Docker image / build (push) Failing after 3m57s Details	2026-01-09 21:55:46 +01:00
Pc	9cba46e427	fix: optimized size of kitty photos All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-09 14:48:37 +01:00
Nom4ne	7beb46606f	Updated readme with the current state of app All checks were successful Update changelog / changelog (push) Successful in 25s Details	2026-01-07 23:52:13 +01:00
Pc	cc31de6c8d	fix: added interface that app.tsx uses Some checks failed Build and push Docker image / build (push) Failing after 4m0s Details Release new version / release (push) Successful in 28s Details Update changelog / changelog (push) Successful in 26s Details	2026-01-06 16:50:42 +01:00
Nom4ne	6383916101	Merge pull request 'Generator' (#7 ) from Generator into master All checks were successful Update changelog / changelog (push) Successful in 28s Details Reviewed-on: #7	2026-01-06 16:41:39 +01:00
Pc	2dbed7cc7e	fix: typo fix	2026-01-06 16:40:33 +01:00
Nom4ne	32ca131dde	Merge pull request 'feat: games are no working on moblie devices' (#6 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 26s Details Reviewed-on: #6	2026-01-06 16:34:31 +01:00
Pc	99a164f088	feat: added random, word, custom generated links	2026-01-06 16:04:47 +01:00
Pc	ad76294d73	test: cookie test All checks were successful Update changelog / changelog (push) Successful in 27s Details	2026-01-06 14:54:04 +01:00
Pc	5dd751600c	test:v2 All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 16:15:08 +01:00
Pc	13909c46f6	test: testing All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 14:36:29 +01:00
Pc	3c1d66ba48	fix: subdomain fix All checks were successful Update changelog / changelog (push) Successful in 31s Details	2026-01-04 14:07:16 +01:00
Pc	c765c92f89	feat: added cookies to use subdomains All checks were successful Update changelog / changelog (push) Successful in 27s Details	2026-01-04 13:56:00 +01:00
Pc	dae3479680	fix: not adding subdomain address to fetch api All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 13:43:04 +01:00
Pc	549da339e4	fix: login in works in subdomain All checks were successful Update changelog / changelog (push) Successful in 28s Details	2026-01-04 13:33:15 +01:00
Pc	4fa55b4caf	test: subdomaind api All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-03 19:00:48 +01:00
Pc	fc0ee5a4d6	fix: typo fix All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-03 18:43:12 +01:00
Pc	1d1379c776	feat: domain redirection All checks were successful Update changelog / changelog (push) Successful in 35s Details	2026-01-03 18:31:52 +01:00
Pc	95f449a3d2	fix: vite config allowedhost read from .env All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-03 15:54:50 +01:00
Pc	ceeb2cccaf	fix: typo fix All checks were successful Update changelog / changelog (push) Successful in 26s Details	2025-12-31 18:13:16 +01:00
Nom4ne	c85aa78a76	Merge pull request 'fix: typo fix in image path' (#5 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 26s Details Reviewed-on: #5	2025-12-31 17:58:57 +01:00
Nom4ne	1822a46e9f	Merge pull request 'feat: opengraph icons' (#4 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 26s Details Reviewed-on: #4	2025-12-31 17:44:29 +01:00
Nom4ne	0e2633b331	Merge pull request 'feat: responsive desing' (#3 ) from RWD into master All checks were successful Update changelog / changelog (push) Successful in 25s Details Reviewed-on: #3	2025-12-31 16:28:27 +01:00