feat: remove unused example components and related tests
This commit is contained in:
Firman Ramdhani
@@ -1,334 +0,0 @@
|
|||||||
import { DateService } from '@repo/utils';
|
|
||||||
import React, { useState, useEffect, useMemo } from 'react';
|
|
||||||
|
|
||||||
export const DateServiceExample: React.FC = () => {
|
|
||||||
// --- 0. TIMEZONE CONFIGURATION (ROOT CONTROL) ---
|
|
||||||
const [currentZone, setCurrentZone] = useState<string>(DateService.getGlobalTimezone());
|
|
||||||
|
|
||||||
// Ambil list timezone dari helper static yang kita buat sebelumnya
|
|
||||||
const timezoneList = useMemo(() => DateService.getSupportedTimezones(), []);
|
|
||||||
|
|
||||||
// --- 1. STATE & DATA ---
|
|
||||||
|
|
||||||
// MOCK DATA dipindahkan ke sini & pakai useMemo
|
|
||||||
// Agar saat timezone ganti, tasks ini di-regenerate dengan waktu "Now" versi timezone baru.
|
|
||||||
const tasks = useMemo(() => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: 'Bayar Server (Lusa)',
|
|
||||||
dueDate: DateService.now().add(2, 'day').toISOString(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: 'Laporan Bulanan (Lewat 5 Hari)',
|
|
||||||
dueDate: DateService.now().subtract(5, 'day').toISOString(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: 'Meeting Tahunan (Bulan Depan)',
|
|
||||||
dueDate: DateService.now().add(1, 'month').toISOString(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: 'Deadline Besok Pagi',
|
|
||||||
dueDate: DateService.now().add(1, 'day').startOf('day').toISOString(),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}, [currentZone]); // Dependency: currentZone
|
|
||||||
|
|
||||||
const [currentTime, setCurrentTime] = useState<DateService>(DateService.now());
|
|
||||||
const [selectedDate, setSelectedDate] = useState<DateService>(DateService.now());
|
|
||||||
|
|
||||||
// State demo logic calendar
|
|
||||||
const [calendarTarget, setCalendarTarget] = useState(() => DateService.now().add(1, 'day').startOf('day'));
|
|
||||||
|
|
||||||
// Static date (Memo kosong) -> Akan tetap di Timezone saat pertama kali load (kecuali di-refresh)
|
|
||||||
// Ini bagus untuk demo bahwa object lama tidak berubah (immutable) kecuali dibuat ulang.
|
|
||||||
const staticDate = useMemo(() => new DateService(), []);
|
|
||||||
|
|
||||||
// Effect update jam tiap detik
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
setCurrentTime(DateService.now());
|
|
||||||
}, 1000);
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// --- HANDLER GANTI TIMEZONE ---
|
|
||||||
const handleZoneChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
||||||
const newZone = e.target.value;
|
|
||||||
setCurrentZone(newZone);
|
|
||||||
|
|
||||||
// 1. Set Global Config (Inti Perubahan)
|
|
||||||
DateService.setGlobalConfig(newZone);
|
|
||||||
|
|
||||||
// 2. Force Refresh State agar UI langsung berubah
|
|
||||||
// Kita buat instance baru agar mengambil config timezone terbaru
|
|
||||||
setCurrentTime(DateService.now());
|
|
||||||
|
|
||||||
// Kita recreate selectedDate dengan nilai raw yang sama, tapi context timezone baru
|
|
||||||
setSelectedDate((prev) => new DateService(prev.getRaw()));
|
|
||||||
|
|
||||||
// Recreate target demo calendar
|
|
||||||
setCalendarTarget(DateService.now().add(1, 'day').startOf('day'));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddDay = (days: number) => {
|
|
||||||
setSelectedDate((prev) => prev.add(days, 'day'));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-8 max-w-5xl mx-auto bg-gray-50 min-h-screen font-sans text-gray-800">
|
|
||||||
{/* HEADER & TIMEZONE CONTROLLER */}
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4 border-b border-gray-200 pb-6">
|
|
||||||
<h1 className="text-3xl font-bold text-blue-900">DateService Feature Showcase</h1>
|
|
||||||
|
|
||||||
<div className="bg-white p-3 rounded-lg shadow-sm border border-blue-100 flex items-center gap-3">
|
|
||||||
<label htmlFor="tz-switcher" className="text-xs font-bold text-gray-500 uppercase tracking-wide">
|
|
||||||
App Timezone:
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="tz-switcher"
|
|
||||||
value={currentZone}
|
|
||||||
onChange={handleZoneChange}
|
|
||||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block p-1.5 outline-none font-mono"
|
|
||||||
>
|
|
||||||
{timezoneList.map((tz) => (
|
|
||||||
<option key={tz} value={tz}>
|
|
||||||
{tz}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
{/* --- CARD 1: REALTIME CLOCK --- */}
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex flex-col justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Realtime Clock</h2>
|
|
||||||
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="text-4xl font-mono font-bold text-gray-900">{currentTime.format('HH:mm:ss')}</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
|
||||||
{/* UPDATE DI SINI: Gunakan .timezoneAbbr */}
|
|
||||||
<div className="text-sm font-bold text-blue-700 bg-blue-100 px-2 py-1 rounded border border-blue-200">
|
|
||||||
{/* Ini akan output "WIB", "WITA", atau "EST" */}
|
|
||||||
{currentTime.timezoneAbbr}
|
|
||||||
|
|
||||||
{/* Ini offset angka (+07:00) */}
|
|
||||||
<span className="opacity-60 text-xs ml-1">({currentTime.format('Z')})</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-lg text-gray-500 mt-2">{currentTime.format('dddd, DD MMMM YYYY')}</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4 text-xs bg-gray-100 p-2 rounded text-gray-500 font-mono break-all">
|
|
||||||
ISO (UTC): {currentTime.toISOString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* --- CARD 2: EPOCH & TIMESTAMPS --- */}
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
||||||
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Epoch / Timestamp Data</h2>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* STATIC SECTION */}
|
|
||||||
<div className="bg-blue-50 p-3 rounded-lg border border-blue-100">
|
|
||||||
<div className="text-xs font-bold text-blue-800 mb-1">STATIC (Load Once)</div>
|
|
||||||
<div className="text-xs text-blue-600 mb-2">Captured on mount (keeps original timezone).</div>
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<div className="text-[10px] uppercase text-gray-500">Epoch Millis</div>
|
|
||||||
<div className="font-mono font-bold text-gray-700">{staticDate.epochMillis}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-[10px] uppercase text-gray-500">Epoch Seconds</div>
|
|
||||||
<div className="font-mono font-bold text-gray-700">{staticDate.epochSeconds}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* LIVE SECTION */}
|
|
||||||
<div className="bg-green-50 p-3 rounded-lg border border-green-100">
|
|
||||||
<div className="text-xs font-bold text-green-800 mb-1">LIVE (Reactive)</div>
|
|
||||||
<div className="text-xs text-green-600 mb-2">Updated every second (follows dropdown).</div>
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<div className="text-[10px] uppercase text-gray-500">Epoch Millis</div>
|
|
||||||
<div className="font-mono font-bold text-gray-700">{new DateService().epochMillis}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-[10px] uppercase text-gray-500">Epoch Seconds</div>
|
|
||||||
<div className="font-mono font-bold text-gray-700">{new DateService().epochSeconds}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* --- CARD 3: CALENDAR LOGIC DEMO --- */}
|
|
||||||
<div className="bg-indigo-50 p-6 rounded-xl shadow-sm border border-indigo-200 md:col-span-2">
|
|
||||||
<h2 className="text-lg font-bold text-indigo-900 mb-4 flex items-center gap-2">
|
|
||||||
🗓️ Calendar Logic Demo (The "Zero Day" Issue)
|
|
||||||
</h2>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<div className="text-sm text-indigo-800 space-y-2">
|
|
||||||
<p>
|
|
||||||
Compare <strong>Current Time</strong> vs <strong>Tomorrow 00:00</strong>.
|
|
||||||
</p>
|
|
||||||
<div className="bg-white/50 p-2 rounded">
|
|
||||||
<div className="flex justify-between text-xs">
|
|
||||||
<span>Now ({currentZone}):</span>
|
|
||||||
<span className="font-mono font-bold">{currentTime.format('HH:mm')}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-xs mt-1">
|
|
||||||
<span>Target (Start of Day):</span>
|
|
||||||
<span className="font-mono font-bold">{calendarTarget.format('DD MMM HH:mm')}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-red-400">
|
|
||||||
<div className="text-xs text-gray-400 uppercase font-bold">Standard .diff('day')</div>
|
|
||||||
<div className="text-2xl font-bold text-red-600 mt-1">
|
|
||||||
{calendarTarget.diff(currentTime, 'day')}{' '}
|
|
||||||
<span className="text-sm font-normal text-gray-500">Days</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-red-500 mt-1">Hasil 0 jika jarak < 24 jam.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-green-500">
|
|
||||||
<div className="text-xs text-gray-400 uppercase font-bold">New .diffCalendarDay()</div>
|
|
||||||
<div className="text-2xl font-bold text-green-600 mt-1">
|
|
||||||
{calendarTarget.diffCalendarDay(currentTime)}{' '}
|
|
||||||
<span className="text-sm font-normal text-gray-500">Days</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-green-600 mt-1">Hasil 1. Benar secara kalender.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* --- CARD 4: MANIPULATION --- */}
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 md:col-span-2">
|
|
||||||
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
|
||||||
Interactive Manipulation
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="flex flex-col md:flex-row items-center gap-4 bg-gray-50 p-4 rounded-lg mb-4">
|
|
||||||
<button
|
|
||||||
onClick={() => handleAddDay(-1)}
|
|
||||||
className="px-4 py-2 bg-white border border-gray-300 shadow-sm text-gray-700 rounded hover:bg-gray-100 transition font-medium"
|
|
||||||
>
|
|
||||||
- 1 Day
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="flex-1 text-center">
|
|
||||||
<span className="block text-3xl font-bold text-blue-900">{selectedDate.format('DD MMMM YYYY')}</span>
|
|
||||||
<span className="text-sm text-blue-600 font-medium">Selected Date State</span>
|
|
||||||
<span className="text-xs text-gray-400 block mt-1">Offset: {selectedDate.format('Z')}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => handleAddDay(1)}
|
|
||||||
className="px-4 py-2 bg-white border border-gray-300 shadow-sm text-gray-700 rounded hover:bg-gray-100 transition font-medium"
|
|
||||||
>
|
|
||||||
+ 1 Day
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4 text-center">
|
|
||||||
<div className="bg-gray-100 p-2 rounded">
|
|
||||||
<span className="text-xs text-gray-500 block">Precise Diff (Float)</span>
|
|
||||||
<span className="font-mono font-bold text-gray-700">
|
|
||||||
{selectedDate.diff(currentTime, 'day', true).toFixed(2)} days
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="bg-gray-100 p-2 rounded">
|
|
||||||
<span className="text-xs text-gray-500 block">Calendar Diff (Int)</span>
|
|
||||||
<span className="font-mono font-bold text-gray-700">
|
|
||||||
{selectedDate.diffCalendarDay(currentTime)} days
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* --- CARD 5: TASK LIST (DYNAMIC) --- */}
|
|
||||||
<div className="mt-8 bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
||||||
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
|
||||||
Task List Implementation (Timezone Aware)
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full text-left border-collapse">
|
|
||||||
<thead>
|
|
||||||
<tr className="text-xs text-gray-500 border-b border-gray-100 bg-gray-50/50">
|
|
||||||
<th className="py-3 px-4 rounded-tl-lg">Task Name</th>
|
|
||||||
<th className="py-3 px-4">Due Date</th>
|
|
||||||
<th className="py-3 px-4">Status Badge</th>
|
|
||||||
<th className="py-3 px-4 rounded-tr-lg">Countdown</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{tasks.map((task) => {
|
|
||||||
const dueDate = new DateService(task.dueDate);
|
|
||||||
const now = DateService.now();
|
|
||||||
|
|
||||||
const isOverdue = now.isAfter(dueDate);
|
|
||||||
const daysDiff = dueDate.diffCalendarDay(now);
|
|
||||||
const isDueSoon = !isOverdue && daysDiff <= 3;
|
|
||||||
|
|
||||||
let statusBadge;
|
|
||||||
const rowClass = 'border-b border-gray-50 hover:bg-gray-50 transition-colors';
|
|
||||||
|
|
||||||
if (isOverdue) {
|
|
||||||
statusBadge = (
|
|
||||||
<span className="px-2 py-1 text-[10px] font-bold text-red-700 bg-red-100 rounded-full border border-red-200">
|
|
||||||
OVERDUE
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
} else if (isDueSoon) {
|
|
||||||
statusBadge = (
|
|
||||||
<span className="px-2 py-1 text-[10px] font-bold text-amber-700 bg-amber-100 rounded-full border border-amber-200">
|
|
||||||
DUE SOON
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
statusBadge = (
|
|
||||||
<span className="px-2 py-1 text-[10px] font-bold text-emerald-700 bg-emerald-100 rounded-full border border-emerald-200">
|
|
||||||
ACTIVE
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr key={task.id} className={rowClass}>
|
|
||||||
<td className="py-3 px-4 font-medium text-gray-700">{task.title}</td>
|
|
||||||
<td className="py-3 px-4 text-gray-500 font-mono text-sm">
|
|
||||||
{dueDate.format('DD MMM YYYY HH:mm')}
|
|
||||||
<span className="text-[10px] text-gray-400 ml-1">{dueDate.format('Z')}</span>
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4">{statusBadge}</td>
|
|
||||||
<td className="py-3 px-4 text-sm text-gray-600 font-medium">
|
|
||||||
{isOverdue ? (
|
|
||||||
`${Math.abs(daysDiff)} days late`
|
|
||||||
) : daysDiff === 0 ? (
|
|
||||||
<span className="text-amber-600">Today!</span>
|
|
||||||
) : (
|
|
||||||
`${daysDiff} days left`
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,179 +0,0 @@
|
|||||||
import { EncryptionService } from '@repo/utils';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
export const EncryptionDemoApps: React.FC = () => {
|
|
||||||
// --- 1. SETUP INSTANCE ---
|
|
||||||
// Kita gunakan Singleton agar hemat memory
|
|
||||||
const cryptoService = EncryptionService.getInstance();
|
|
||||||
|
|
||||||
// --- 2. STATE ---
|
|
||||||
const [plainText, setPlainText] = useState<string>('');
|
|
||||||
const [encryptedResult, setEncryptedResult] = useState<string>('');
|
|
||||||
const [decryptedResult, setDecryptedResult] = useState<string>('');
|
|
||||||
|
|
||||||
// State untuk demo LocalStorage
|
|
||||||
const [storageKey] = useState<string>('my_secure_token');
|
|
||||||
const [storageValue, setStorageValue] = useState<string>('');
|
|
||||||
const [savedStatus, setSavedStatus] = useState<string>('');
|
|
||||||
|
|
||||||
// --- 3. HANDLERS ---
|
|
||||||
|
|
||||||
const handleEncrypt = () => {
|
|
||||||
// Panggil method encrypt dari class
|
|
||||||
const result = cryptoService.encrypt(plainText);
|
|
||||||
setEncryptedResult(result);
|
|
||||||
|
|
||||||
// Reset decrypt result biar user harus klik decrypt lagi untuk validasi
|
|
||||||
setDecryptedResult('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDecrypt = () => {
|
|
||||||
// Panggil method decrypt dari class
|
|
||||||
const original = cryptoService.decrypt(encryptedResult);
|
|
||||||
setDecryptedResult(original);
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- DEMO LOCALSTORAGE ---
|
|
||||||
const saveToStorage = () => {
|
|
||||||
try {
|
|
||||||
// Encrypt sebelum simpan
|
|
||||||
const secureData = cryptoService.encrypt(storageValue);
|
|
||||||
localStorage.setItem(storageKey, secureData);
|
|
||||||
setSavedStatus(`Saved securely! Cipher: ${secureData.substring(0, 15)}...`);
|
|
||||||
} catch (error) {
|
|
||||||
setSavedStatus('Error saving data');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadFromStorage = () => {
|
|
||||||
try {
|
|
||||||
const storedData = localStorage.getItem(storageKey);
|
|
||||||
if (!storedData) {
|
|
||||||
setSavedStatus('No data found in storage');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Decrypt setelah ambil
|
|
||||||
const originalData = cryptoService.decrypt(storedData);
|
|
||||||
setSavedStatus(`Loaded & Decrypted: "${originalData}"`);
|
|
||||||
} catch (error) {
|
|
||||||
setSavedStatus('Failed to decrypt storage data');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-8 max-w-4xl mx-auto bg-slate-50 min-h-screen font-sans text-slate-800">
|
|
||||||
<h1 className="text-3xl font-bold mb-8 text-slate-900">Encryption Service Demo</h1>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
||||||
{/* === SECTION 1: INTERACTIVE PLAYGROUND === */}
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
|
|
||||||
<h2 className="text-lg font-bold text-indigo-600 mb-4 flex items-center gap-2">🔐 Live Playground</h2>
|
|
||||||
|
|
||||||
{/* INPUT */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">Secret Message (Input)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={plainText}
|
|
||||||
onChange={(e) => setPlainText(e.target.value)}
|
|
||||||
placeholder="Type sensitive data here..."
|
|
||||||
className="w-full p-2 border border-slate-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ACTIONS */}
|
|
||||||
<div className="flex gap-2 mb-6">
|
|
||||||
<button
|
|
||||||
onClick={handleEncrypt}
|
|
||||||
className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Encrypt ⬇
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleDecrypt}
|
|
||||||
disabled={!encryptedResult}
|
|
||||||
className="bg-emerald-600 text-white px-4 py-2 rounded hover:bg-emerald-700 transition text-sm font-semibold disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Decrypt ⬆
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* OUTPUT: ENCRYPTED */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">
|
|
||||||
Encrypted Output (Ciphertext)
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
readOnly
|
|
||||||
value={encryptedResult}
|
|
||||||
className="w-full p-2 bg-slate-100 border border-slate-200 rounded text-xs font-mono text-slate-600 h-24 break-all"
|
|
||||||
placeholder="Result will appear here..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* OUTPUT: DECRYPTED */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">Verified Decryption</label>
|
|
||||||
<div
|
|
||||||
className={`p-2 border rounded min-h-[40px] flex items-center ${
|
|
||||||
decryptedResult ? 'bg-green-50 border-green-200 text-green-800' : 'bg-slate-50 border-slate-200'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{decryptedResult || <span className="text-slate-400 italic text-sm">Waiting for decryption...</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* === SECTION 2: SECURE LOCALSTORAGE === */}
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
|
|
||||||
<h2 className="text-lg font-bold text-amber-600 mb-4 flex items-center gap-2">💾 Secure LocalStorage</h2>
|
|
||||||
<p className="text-sm text-slate-600 mb-4">
|
|
||||||
Simulasi menyimpan token auth. Data di browser storage akan terlihat acak, tapi aplikasi bisa membacanya
|
|
||||||
kembali.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">Data to Save</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={storageValue}
|
|
||||||
onChange={(e) => setStorageValue(e.target.value)}
|
|
||||||
placeholder="e.g., Bearer eyJhbGci..."
|
|
||||||
className="w-full p-2 border border-slate-300 rounded focus:ring-2 focus:ring-amber-500 outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={saveToStorage}
|
|
||||||
className="bg-slate-800 text-white px-4 py-2 rounded hover:bg-slate-900 transition text-sm font-semibold flex-1"
|
|
||||||
>
|
|
||||||
Save Encrypted
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={loadFromStorage}
|
|
||||||
className="bg-white border border-slate-300 text-slate-700 px-4 py-2 rounded hover:bg-slate-50 transition text-sm font-semibold flex-1"
|
|
||||||
>
|
|
||||||
Load & Decrypt
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* STATUS MONITOR */}
|
|
||||||
<div className="mt-4 bg-amber-50 border border-amber-100 p-3 rounded">
|
|
||||||
<span className="text-xs font-bold text-amber-800 uppercase block mb-1">Log / Status</span>
|
|
||||||
<code className="text-xs text-amber-900 block break-all">{savedStatus || 'Ready...'}</code>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 pt-4 border-t border-slate-100">
|
|
||||||
<p className="text-xs text-slate-400">
|
|
||||||
<strong>Tips:</strong> Buka <em>Developer Tools > Application > LocalStorage</em>. Cari key{' '}
|
|
||||||
<code>my_secure_token</code>. Kamu akan melihat string acak (encrypted), bukan teks asli.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,9 +1,5 @@
|
|||||||
import { lazy, Suspense } from 'react';
|
import { lazy, Suspense } from 'react';
|
||||||
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
||||||
import { Counter, DateServiceComponent } from '@repo/ui';
|
|
||||||
import { utilsExample } from '@repo/utils';
|
|
||||||
import { DateServiceExample } from './example/date-example';
|
|
||||||
import { EncryptionDemoApps } from './example/encryption-demo';
|
|
||||||
|
|
||||||
const AuthModule = lazy(() => import('./auth'));
|
const AuthModule = lazy(() => import('./auth'));
|
||||||
const AppModule = lazy(() => import('./modules'));
|
const AppModule = lazy(() => import('./modules'));
|
||||||
@@ -11,17 +7,6 @@ const AppModule = lazy(() => import('./modules'));
|
|||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<div className="bg-green-400"> test tailwind on web</div>
|
|
||||||
<div>
|
|
||||||
<div>test helper</div>
|
|
||||||
<div>{utilsExample()}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<EncryptionDemoApps />
|
|
||||||
<EncryptionDemoApps />
|
|
||||||
<DateServiceExample />
|
|
||||||
<DateServiceComponent />
|
|
||||||
<Counter />
|
|
||||||
<Suspense fallback={<div>Loading...</div>}>
|
<Suspense fallback={<div>Loading...</div>}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/auth/*" element={<AuthModule />} />
|
<Route path="/auth/*" element={<AuthModule />} />
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
export const add = (a: number, b: number) => a + b;
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import { expect, test } from 'vitest';
|
|
||||||
import { add } from './add';
|
|
||||||
import { subtract } from './subtract';
|
|
||||||
|
|
||||||
test('adds 1 + 2 to equal 3', () => {
|
|
||||||
expect(add(1, 2)).toBe(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('subtracts 2 - 1 to equal 1', () => {
|
|
||||||
expect(subtract(2, 1)).toBe(1);
|
|
||||||
});
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export const subtract = (a: number, b: number) => a - b;
|
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
import { utilsExample } from '@repo/utils';
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
export const Counter: React.FC = () => {
|
export const Counter: React.FC = () => {
|
||||||
@@ -6,10 +5,6 @@ export const Counter: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="py-4">
|
<div className="py-4">
|
||||||
<div>
|
|
||||||
<div>test helper</div>
|
|
||||||
<div>{utilsExample()}</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-2xl font-semibold">tailwind on package UI</div>
|
<div className="text-2xl font-semibold">tailwind on package UI</div>
|
||||||
<div className="bg-red-400 text-3xl font-bold underline">100</div>
|
<div className="bg-red-400 text-3xl font-bold underline">100</div>
|
||||||
<div className="mt-3 bg-brand-500 text-brand-800">sdsa</div>
|
<div className="mt-3 bg-brand-500 text-brand-800">sdsa</div>
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
export const add = (a: number, b: number) => a + b;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export const subtract = (a: number, b: number) => a - b;
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import { expect, test } from 'vitest';
|
|
||||||
import { add } from './add';
|
|
||||||
import { subtract } from './subtract';
|
|
||||||
|
|
||||||
test('adds 1 + 2 to equal 3', () => {
|
|
||||||
expect(add(1, 2)).toBe(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('subtracts 2 - 1 to equal 1', () => {
|
|
||||||
expect(subtract(2, 1)).toBe(1);
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user