Compare commits
4 Commits
6383916101
...
v0.0.2
| Author | SHA1 | Date | |
|---|---|---|---|
| c829cb2a6b | |||
|
9cba46e427 | ||
| 7beb46606f | |||
|
|
cc31de6c8d |
@@ -1 +1,2 @@
|
||||
.env
|
||||
kittyurl-frontend/node_modules
|
||||
@@ -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
|
||||
|
||||
71
README.md
71
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
|
||||
```
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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];
|
||||
|
||||
BIN
kittyurl-frontend/src/assets/Ket.jpg
Normal file
BIN
kittyurl-frontend/src/assets/Ket.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 MiB |
BIN
kittyurl-frontend/src/assets/kitty.jpg
Normal file
BIN
kittyurl-frontend/src/assets/kitty.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 MiB |
@@ -8,11 +8,18 @@ import {
|
||||
// Pobieramy adres API
|
||||
const API_BASE = import.meta.env.VITE_API_TARGET;
|
||||
|
||||
// Nazwa klucza w localStorage, gdzie trzymasz token
|
||||
// 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;
|
||||
onGenerate: () => void;
|
||||
}
|
||||
|
||||
interface GeneratorSettings {
|
||||
length: number;
|
||||
alphanum: boolean;
|
||||
@@ -20,8 +27,8 @@ interface GeneratorSettings {
|
||||
withSubdomain: boolean;
|
||||
}
|
||||
|
||||
// Usunęliśmy 'remoteUrl' stąd, bo teraz przychodzi z propsów (url)
|
||||
interface LinkFormData {
|
||||
remoteUrl: string;
|
||||
uri: string;
|
||||
subdomain: string;
|
||||
privacy: boolean;
|
||||
@@ -43,19 +50,18 @@ interface User {
|
||||
email?: string;
|
||||
}
|
||||
|
||||
export const Generator: React.FC = () => {
|
||||
// 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 głównego
|
||||
// Stan formularza (bez remoteUrl, bo to jest teraz w 'url')
|
||||
const [formData, setFormData] = useState<LinkFormData>({
|
||||
remoteUrl: '',
|
||||
uri: '',
|
||||
subdomain: '',
|
||||
privacy: true,
|
||||
expiryDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
|
||||
});
|
||||
|
||||
// Stan ustawień generatora (GET)
|
||||
const [genSettings, setGenSettings] = useState<GeneratorSettings>({
|
||||
length: 6,
|
||||
alphanum: true,
|
||||
@@ -63,14 +69,12 @@ export const Generator: React.FC = () => {
|
||||
withSubdomain: false
|
||||
});
|
||||
|
||||
// Stany UI
|
||||
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);
|
||||
|
||||
// Helper do pobierania nagłówków z tokenem
|
||||
const getAuthHeaders = () => {
|
||||
const token = localStorage.getItem(TOKEN_KEY);
|
||||
return {
|
||||
@@ -79,13 +83,10 @@ export const Generator: React.FC = () => {
|
||||
};
|
||||
};
|
||||
|
||||
// 1. Sprawdzenie sesji użytkownika przy starcie (używając JWT)
|
||||
// 1. Sprawdzenie sesji użytkownika przy starcie
|
||||
// Sprawdzenie sesji użytkownika
|
||||
useEffect(() => {
|
||||
const checkUser = async () => {
|
||||
const token = localStorage.getItem(TOKEN_KEY);
|
||||
|
||||
// Jeśli brak tokena, przerywamy (tryb gościa)
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
@@ -95,30 +96,23 @@ export const Generator: React.FC = () => {
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
|
||||
// Naprawa "Logged in as undefined":
|
||||
// API może zwracać 'name', 'username' lub tylko 'email'
|
||||
setUser({
|
||||
id: data.id || data._id || data.userId,
|
||||
username: data.username || data.name || data.email || "User",
|
||||
email: data.email
|
||||
});
|
||||
} else {
|
||||
// Jeśli token jest nieważny (401), czyścimy go
|
||||
console.log("Session expired. Logging out.");
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
setUser(null);
|
||||
}
|
||||
} catch {
|
||||
// POPRAWKA: Usunęliśmy '(err)', teraz jest samo 'catch'
|
||||
// Dzięki temu linter nie krzyczy o nieużywaną zmienną
|
||||
console.log("API unreachable");
|
||||
}
|
||||
};
|
||||
checkUser();
|
||||
}, []);
|
||||
|
||||
// 2. Generowanie URI (GET) - tutaj auth zazwyczaj nie jest wymagany, ale można dodać
|
||||
const handleGenerateUri = async (type: 'random' | 'wordlist') => {
|
||||
setGeneratingUri(true);
|
||||
setErrorMsg(null);
|
||||
@@ -140,8 +134,6 @@ export const Generator: React.FC = () => {
|
||||
endpoint = '/api/v1/link/fromWordlist';
|
||||
}
|
||||
|
||||
// GET zazwyczaj jest publiczny, więc nie musimy dodawać Bearera,
|
||||
// ale jeśli API tego wymaga, dodaj: headers: getAuthHeaders()
|
||||
const response = await fetch(`${API_BASE}${endpoint}?${params.toString()}`);
|
||||
const data = await response.json();
|
||||
|
||||
@@ -157,9 +149,9 @@ export const Generator: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 3. Zapis do bazy (POST) - WYMAGA AUTH (JWT)
|
||||
const handleSubmitToDb = async () => {
|
||||
if (!formData.remoteUrl) {
|
||||
// Używamy propsa 'url' zamiast formData.remoteUrl
|
||||
if (!url) {
|
||||
setErrorMsg("Meow! I need a destination URL first! 🐾");
|
||||
return;
|
||||
}
|
||||
@@ -174,7 +166,7 @@ export const Generator: React.FC = () => {
|
||||
|
||||
try {
|
||||
const payload: LinkPayload = {
|
||||
remoteUrl: formData.remoteUrl,
|
||||
remoteUrl: url, // <-- Tutaj wstawiamy wartość z propsa
|
||||
uri: formData.uri,
|
||||
subdomain: formData.subdomain || undefined,
|
||||
privacy: formData.privacy,
|
||||
@@ -187,7 +179,7 @@ export const Generator: React.FC = () => {
|
||||
|
||||
const response = await fetch(`${API_BASE}/api/v1/link/new`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(), // Tu wstrzykujemy JWT
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
@@ -200,6 +192,9 @@ export const Generator: React.FC = () => {
|
||||
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!");
|
||||
@@ -227,7 +222,6 @@ export const Generator: React.FC = () => {
|
||||
KittyURL <PawPrint className="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" />
|
||||
</h1>
|
||||
<p className="text-pink-300 font-medium">Shorten your links with a purr!</p>
|
||||
|
||||
</header>
|
||||
|
||||
{/* Error Display */}
|
||||
@@ -277,8 +271,8 @@ export const Generator: React.FC = () => {
|
||||
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={formData.remoteUrl}
|
||||
onChange={(e) => setFormData({ ...formData, remoteUrl: e.target.value })}
|
||||
value={url} // Używamy propsa
|
||||
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 group-focus-within:text-pink-400 transition-colors" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user