TSM.ID
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { io, Socket } from "@/lib/zero-socket";
|
|
|
|
export default function QRScannerSimulation() {
|
|
const [sessionId, setSessionId] = useState("");
|
|
const [token, setToken] = useState("");
|
|
const [status, setStatus] = useState("Waiting for Input");
|
|
|
|
const handleScan = () => {
|
|
setStatus("Scanning...");
|
|
const socket: Socket = io(typeof window !== 'undefined' ? window.location.origin : '');
|
|
|
|
socket.on("connect", () => {
|
|
socket.emit("qr_auth_scan_success", { sessionId, token });
|
|
setStatus("Success! Session authenticated.");
|
|
setTimeout(() => {
|
|
socket.disconnect();
|
|
}, 1000);
|
|
});
|
|
|
|
socket.on("connect_error", () => {
|
|
setStatus("Error connecting to Chat Server Socket.");
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a101d] text-white flex flex-col items-center justify-center p-8">
|
|
<div className="bg-[#111827] p-8 rounded-2xl border border-gray-800 shadow-2xl max-w-md w-full">
|
|
<h1 className="text-2xl font-bold mb-4 text-brand">📱 QR Scanner Simulation</h1>
|
|
<p className="text-gray-400 text-sm mb-6">
|
|
Masukkan Session ID yang muncul di layar IAM Desktop Anda, beserta Token Auth rahasia (contoh JWT) yang dimiliki perangkat mobile ini.
|
|
</p>
|
|
|
|
<input
|
|
type="text"
|
|
value={sessionId}
|
|
onChange={(e) => setSessionId(e.target.value)}
|
|
placeholder="Session ID (ex: 12345)"
|
|
className="w-full bg-black/50 border border-white/10 p-3 rounded-lg mb-4 text-white"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={token}
|
|
onChange={(e) => setToken(e.target.value)}
|
|
placeholder="JWT Token Rahasia dari HP"
|
|
className="w-full bg-black/50 border border-white/10 p-3 rounded-lg mb-6 text-white"
|
|
/>
|
|
|
|
<button
|
|
onClick={handleScan}
|
|
className="w-full py-3 bg-brand text-black font-bold rounded-lg hover:opacity-80 transition-opacity">
|
|
[SCAN] Otentikasi Jarak Jauh
|
|
</button>
|
|
|
|
<p className="mt-6 text-center text-xs font-mono text-gray-500">Status: {status}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|