fix: subdomain support, expiry date fix
All checks were successful
Update changelog / changelog (push) Successful in 26s
All checks were successful
Update changelog / changelog (push) Successful in 26s
This commit is contained in:
Pc
@@ -1,19 +1,15 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
PawPrint, Heart, Sparkles, Cat, Hash,
|
||||
Globe, BookOpen, Shield, Calendar,
|
||||
Globe, BookOpen, Shield, Clock,
|
||||
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: (url: string) => void;
|
||||
@@ -27,7 +23,6 @@ interface GeneratorSettings {
|
||||
withSubdomain: boolean;
|
||||
}
|
||||
|
||||
// Usunęliśmy 'remoteUrl' stąd, bo teraz przychodzi z propsów (url)
|
||||
interface LinkFormData {
|
||||
uri: string;
|
||||
subdomain: string;
|
||||
@@ -40,7 +35,7 @@ interface LinkPayload {
|
||||
uri: string;
|
||||
subdomain?: string;
|
||||
privacy: boolean;
|
||||
expiryDate: number;
|
||||
expiryDate?: number;
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
@@ -50,16 +45,14 @@ interface User {
|
||||
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]
|
||||
expiryDate: ''
|
||||
});
|
||||
|
||||
const [genSettings, setGenSettings] = useState<GeneratorSettings>({
|
||||
@@ -75,6 +68,12 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
const [result, setResult] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
// Obliczanie domeny bazowej i prefiksu do wyświetlenia w polu URI
|
||||
const baseDomain = API_BASE.replace('api.', '').replace(/^https?:\/\//, '').split('/')[0];
|
||||
const displayPrefix = genSettings.withSubdomain && formData.subdomain
|
||||
? `${formData.subdomain}.${baseDomain}`
|
||||
: baseDomain;
|
||||
|
||||
const getAuthHeaders = () => {
|
||||
const token = localStorage.getItem(TOKEN_KEY);
|
||||
return {
|
||||
@@ -83,17 +82,14 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
};
|
||||
};
|
||||
|
||||
// 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({
|
||||
@@ -101,10 +97,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
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");
|
||||
@@ -119,29 +111,21 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
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);
|
||||
}
|
||||
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 }));
|
||||
|
||||
setFormData(prev => ({ ...prev, uri: data.uri || data.shortUrl || "" }));
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) setErrorMsg(err.message);
|
||||
} finally {
|
||||
@@ -150,7 +134,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
};
|
||||
|
||||
const handleSubmitToDb = async () => {
|
||||
// Używamy propsa 'url' zamiast formData.remoteUrl
|
||||
if (!url) {
|
||||
setErrorMsg("Meow! I need a destination URL first! 🐾");
|
||||
return;
|
||||
@@ -166,17 +149,23 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
|
||||
try {
|
||||
const payload: LinkPayload = {
|
||||
remoteUrl: url, // <-- Tutaj wstawiamy wartość z propsa
|
||||
remoteUrl: url,
|
||||
uri: formData.uri,
|
||||
subdomain: formData.subdomain || undefined,
|
||||
privacy: formData.privacy,
|
||||
expiryDate: new Date(formData.expiryDate).getTime()
|
||||
};
|
||||
|
||||
if (user && user.id) {
|
||||
payload.userId = user.id;
|
||||
// Dodajemy subdomenę tylko jeśli jest włączona
|
||||
if (genSettings.withSubdomain && formData.subdomain) {
|
||||
payload.subdomain = formData.subdomain;
|
||||
}
|
||||
|
||||
// WYSYŁANIE DATY TYLKO JEŚLI JEST PODANA
|
||||
if (formData.expiryDate) {
|
||||
payload.expiryDate = new Date(formData.expiryDate).getTime();
|
||||
}
|
||||
|
||||
if (user?.id) payload.userId = user.id;
|
||||
|
||||
const response = await fetch(`${API_BASE}/api/v1/link/new`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
@@ -184,20 +173,20 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) throw new Error(data.error || `Error ${response.status}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || `Database error ${response.status}`);
|
||||
// Budowanie końcowego linku do wyświetlenia (z subdomeną)
|
||||
let finalLink = data.url;
|
||||
if (!finalLink) {
|
||||
const protocol = API_BASE.startsWith('https') ? 'https://' : 'http://';
|
||||
finalLink = `${protocol}${displayPrefix}/${formData.uri}`;
|
||||
}
|
||||
|
||||
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!");
|
||||
else setErrorMsg("Something went wrong!");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -210,14 +199,13 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-[800px] mx-auto pt-10 px-4 flex flex-col items-center pb-20">
|
||||
<div className="max-w-[800px] mx-auto pt-10 px-4 flex flex-col items-center pb-20 font-sans">
|
||||
{/* 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>
|
||||
@@ -230,7 +218,7 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
<div className="bg-red-50 border-2 border-red-200 p-4 rounded-2xl flex items-center gap-3 text-red-600 shadow-lg">
|
||||
<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>
|
||||
<button onClick={() => setErrorMsg(null)}><X size={20} /></button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -258,7 +246,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
</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 */}
|
||||
@@ -271,8 +258,8 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
type="url"
|
||||
placeholder="https://very-long-link.com/..."
|
||||
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} // Używamy propsa
|
||||
onChange={(e) => setUrl(e.target.value)} // Używamy propsa
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
/>
|
||||
<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>
|
||||
@@ -283,7 +270,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
<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>
|
||||
@@ -292,43 +278,38 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
</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 })}
|
||||
>
|
||||
<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 })}>
|
||||
<option value="mixed">Mixed</option>
|
||||
<option value="lower">Lower</option>
|
||||
<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 onClick={() => handleGenerateUri('random')} 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 py-2 transition-all active:scale-95 flex flex-col items-center justify-center gap-1">
|
||||
<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 onClick={() => handleGenerateUri('wordlist')} 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 py-2 transition-all active:scale-95 flex flex-col items-center justify-center gap-1">
|
||||
<BookOpen size={16} /> {generatingUri ? '...' : 'Sentence'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="relative flex items-center">
|
||||
{/* Dynamiczna domena przed / */}
|
||||
<div className="absolute left-4 flex items-center pointer-events-none z-10">
|
||||
<span className="text-pink-300 font-bold text-sm sm:text-lg">{displayPrefix}</span>
|
||||
<span className="text-pink-400 font-black text-lg mx-1">/</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="my-custom-uri"
|
||||
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"
|
||||
// Padding-left obliczany na podstawie długości domeny
|
||||
style={{ paddingLeft: `${displayPrefix.length * 9.5 + 40}px` }}
|
||||
className="w-full p-4 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"
|
||||
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" />
|
||||
@@ -338,12 +319,20 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
</div>
|
||||
|
||||
{/* 3. Database Settings */}
|
||||
<div className="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="mb-8 flex flex-col gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{/* Datetime input (Data + Godzina) */}
|
||||
<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"
|
||||
<label className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400 mb-2">
|
||||
<Clock size={14} /> Expiry Date & Time
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
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 })} />
|
||||
onChange={e => setFormData({ ...formData, expiryDate: e.target.value })}
|
||||
/>
|
||||
<p className="text-[8px] text-gray-400 mt-1 uppercase">Optional: Leave empty for no expiry</p>
|
||||
</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">
|
||||
@@ -351,22 +340,45 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
<input type="checkbox" className="accent-pink-500 w-5 h-5" checked={formData.privacy}
|
||||
onChange={e => setFormData({ ...formData, privacy: e.target.checked })} />
|
||||
</label>
|
||||
</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 sm:col-span-2">
|
||||
{/* Subdomain Support Box */}
|
||||
<div className="bg-gray-50 p-4 rounded-2xl border border-gray-100">
|
||||
<label className="flex items-center justify-between cursor-pointer mb-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}
|
||||
<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' : '' });
|
||||
}} />
|
||||
if (!e.target.checked) setFormData(prev => ({ ...prev, subdomain: '' }));
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{genSettings.withSubdomain && (
|
||||
<div className="animate-in slide-in-from-top-2 duration-300 mt-3">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="your-subdomain"
|
||||
className="w-full p-3 bg-white border-2 border-pink-100 rounded-xl outline-none focus:border-pink-400 text-sm font-bold text-pink-600 pr-20"
|
||||
value={formData.subdomain}
|
||||
onChange={(e) => setFormData({ ...formData, subdomain: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') })}
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-black text-pink-200">.{baseDomain}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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"
|
||||
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"
|
||||
>
|
||||
{loading ? (
|
||||
<>Saving... <RefreshCw className="animate-spin" /></>
|
||||
@@ -374,14 +386,11 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
|
||||
<>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>
|
||||
<p className="text-pink-300 font-black text-[10px] uppercase tracking-[0.2em]">KittyURL Generator v2.2</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user