fix: introduce workaround for cross-platform docker image building

fix: docker packages and IP parsing for 127.0.0.1
fix: optimized size of kitty photos
2026-01-09 22:29:17 +01:00 · 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
13 changed files with 502 additions and 114 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1 +1,2 @@
 .env
 kittyurl-frontend/node_modules
--- a/12
+++ b/12
@@ -1,11 +1,17 @@
-# Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
+# Credit:
 # https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
 # https://stackoverflow.com/a/56941391
 #
 # Includes workaround for:
 # https://github.com/expo/expo/issues/33340
 # https://github.com/npm/cli/issues/4828
 FROM node:24-trixie-slim AS builder
 WORKDIR /app
 COPY ./kittyurl-frontend/package*.json ./
-RUN npm ci && npm cache clean --force
+RUN npm ci && npm i --force && 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
@@ -29,6 +29,7 @@
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.4.24",
        "globals": "^16.5.0",
        "lightningcss": "^1.30.2",
        "postcss": "^8.5.6",
        "tailwindcss": "^4.1.18",
        "typescript": "~5.9.3",
@@ -67,7 +68,6 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -1610,7 +1610,6 @@
      "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
      "devOptional": true,
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -1621,7 +1620,6 @@
      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "dev": true,
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -1681,7 +1679,6 @@
      "integrity": "sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==",
      "dev": true,
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.50.1",
        "@typescript-eslint/types": "8.50.1",
@@ -1933,7 +1930,6 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2093,7 +2089,6 @@
        }
      ],
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -2442,7 +2437,6 @@
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "dev": true,
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -3598,7 +3592,6 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -3625,7 +3618,6 @@
        }
      ],
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -3673,7 +3665,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -3683,7 +3674,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -3702,9 +3692,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "7.11.0",
+      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
-      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
@@ -3724,12 +3714,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "7.11.0",
+      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
-      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
      "license": "MIT",
      "dependencies": {
-        "react-router": "7.11.0"
+        "react-router": "7.12.0"
      },
      "engines": {
        "node": ">=20.0.0"
@@ -3937,7 +3927,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -4023,7 +4012,6 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -4145,7 +4133,6 @@
      "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
      "dev": true,
      "license": "MIT",
      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/kittyurl-frontend/package.json
+++ b/kittyurl-frontend/package.json
@@ -32,6 +32,7 @@
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
    "lightningcss": "^1.30.2",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.18",
    "typescript": "~5.9.3",
--- a/kittyurl-frontend/src/App.tsx
+++ b/kittyurl-frontend/src/App.tsx
@@ -11,6 +11,13 @@ 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];
--- 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 KKKKKK 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,40 +1,18 @@
 import { useState, useCallback, type ReactNode } from 'react';
 import Cookies from 'js-cookie';
 import { AuthContext } from './AuthContext';
 import { sha512 } from '../utils/crypto';
-const TOKEN_KEY = 'ktty_shared_token';
+// Nazwa klucza w localStorage (musi być spójna z Generator.tsx)
 const TOKEN_KEY = 'jwt_token';
-const getCookieConfig = () => {
+// Adres API
-    const hostname = window.location.hostname;
+const API_BASE = import.meta.env.VITE_API_TARGET || 'https://ktty.is';
    // 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>(() => Cookies.get(TOKEN_KEY) || null);
+    // Inicjalizacja stanu
    const [token, setToken] = useState<string | null>(() => localStorage.getItem(TOKEN_KEY));
    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null); // DODANE
+    const [error, setError] = useState<string | null>(null);
    const authRequest = useCallback(async (endpoint: 'signIn' | 'signUp', name: string, pass: string) => {
        setLoading(true);
@@ -42,24 +20,26 @@ export function AuthProvider({ children }: { children: ReactNode }) {
        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: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({ name, password: hashedPassword }),
            });
            const data = await response.json();
            if (!response.ok) {
-                throw new Error(data?.message || 'Błąd autoryzacji');
+                throw new Error(data?.message || data?.error || 'Błąd autoryzacji');
            }
            if (data?.token) {
-                Cookies.set(TOKEN_KEY, data.token, getCookieConfig());
+                localStorage.setItem(TOKEN_KEY, data.token);
                setToken(data.token);
            }
            return data;
        } catch (err: unknown) {
            const msg = err instanceof Error ? err.message : 'Wystąpił błąd';
            setError(msg);
@@ -69,11 +49,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
        }
    }, []);
    // ZMODYFIKOWANA FUNKCJA LOGOUT
    const logout = useCallback(() => {
-        const config = getCookieConfig();
+        // 1. Usuwamy token z pamięci
-        // When removing, you must match the domain and path used when setting
+        localStorage.removeItem(TOKEN_KEY);
        Cookies.remove(TOKEN_KEY, { domain: config.domain, path: config.path });
        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 (
Author	SHA1	Message	Date
sherl	18e7baa73c	fix: introduce workaround for cross-platform docker image building Some checks failed Build and push Docker image / build (push) Failing after 3m59s Details Release new version / release (push) Successful in 28s Details Update changelog / changelog (push) Successful in 26s Details	2026-01-09 22:29:17 +01:00
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
Pc	99a164f088	feat: added random, word, custom generated links	2026-01-06 16:04:47 +01:00