From d676f16f2293c512d2f5a6ecf34f01068f513ada Mon Sep 17 00:00:00 2001 From: Vassshhh Date: Fri, 13 Jun 2025 19:50:13 +0700 Subject: [PATCH] merge login --- src/ChatBot.js | 2 +- src/Dashboard.js | 65 +++++++++++++++++++++++++++++++++++----- src/Dashboard.module.css | 48 +++++++++++++++++++++++++++++ src/Login.js | 44 +++++++++++++++++++++++---- src/Login.module.css | 4 +-- 5 files changed, 148 insertions(+), 15 deletions(-) diff --git a/src/ChatBot.js b/src/ChatBot.js index 287f445..af6524a 100644 --- a/src/ChatBot.js +++ b/src/ChatBot.js @@ -55,7 +55,7 @@ try { // Send to backend - const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/ask', { + const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/ask/dev', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pertanyaan: message, sessionId: JSON.parse(localStorage.getItem('session')).sessionId, lastSeen: new Date().toISOString() }), diff --git a/src/Dashboard.js b/src/Dashboard.js index 1a55a2b..af49d28 100644 --- a/src/Dashboard.js +++ b/src/Dashboard.js @@ -1,5 +1,6 @@ import React, { useRef, useState, useEffect } from 'react'; import styles from './Dashboard.module.css'; +import { useNavigate } from 'react-router-dom'; import Modal from './Modal'; import Conversations from './Conversations'; @@ -21,21 +22,32 @@ const Dashboard = () => { botMessages: 0, }); - const [isDragging, setIsDragging] = useState(false); const [selectedFile, setSelectedFile] = useState(null); + const [isLoggedIn, setIsLoggedIn] = useState(false); + const handleFile = (file) => { if (file) { setSelectedFile(file); } }; + useEffect(() => { + const token = localStorage.getItem('token'); + setIsLoggedIn(!!token); + }, []); + + const handleLogout = () => { + localStorage.removeItem('token'); + localStorage.removeItem('user'); + window.location.reload(); // Bisa juga: window.location.href = '/login'; + }; useEffect(() => { async function fetchStats() { try { - const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/dashboard'); + const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/dashboard/dev'); const data = await response.json(); setDiscussedTopics(data[0]?.result?.topics) @@ -59,7 +71,6 @@ const Dashboard = () => { }); }); - setStats({ totalChats: totalSessions.size, userMessages, @@ -74,6 +85,45 @@ const Dashboard = () => { fetchStats(); }, []); +const navigate = useNavigate(); + + useEffect(() => { + const fetchData = async () => { + const token = localStorage.getItem('token'); + + try { + const response = await fetch('https://bot.kediritechnopark.com/webhook/profile/dev', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}`, + }, + }); + + if (response.status === 401 || response.status === 403) { + // Token tidak valid atau tidak punya akses, redirect ke login + localStorage.removeItem('token'); // Hapus token agar bersih + navigate('/login'); + return; + } + + if (!response.ok) { + throw new Error('Fetch gagal dengan status: ' + response.status); + } + + const data = await response.json(); + console.log(data); + // lanjutkan penggunaan data + } catch (error) { + console.error('Error:', error); + // Bisa juga redirect ke login kalau error tertentu + navigate('/login'); + } + }; + + fetchData(); + }, [navigate]); + const openConversationsModal = () => { setModalContent(); }; @@ -82,7 +132,6 @@ const Dashboard = () => { setModalContent(); }; - useEffect(() => { if (!rawData.length) return; @@ -121,7 +170,6 @@ const Dashboard = () => { }); }); - const datasets = prefixes.map(prefix => ({ label: prefixLabelMap[prefix], data: counts[prefix], @@ -167,6 +215,11 @@ const Dashboard = () => { return (
+ {isLoggedIn ? ( + + ) : ( + Login + )} Bot Avatar

Dermalounge AI Admin Dashboard

@@ -198,7 +251,6 @@ const Dashboard = () => {
-

Update data

@@ -245,7 +297,6 @@ const Dashboard = () => {
-
© 2025 Kediri Technopark
diff --git a/src/Dashboard.module.css b/src/Dashboard.module.css index 98d6651..e677d0a 100644 --- a/src/Dashboard.module.css +++ b/src/Dashboard.module.css @@ -143,4 +143,52 @@ .mobileText { display: block; } +} + +.dashboardHeader { + position: relative; + display: flex; + align-items: center; + gap: 16px; + padding: 20px; + background-color: #075e54; + border-bottom: 1px solid #ddd; +} + +.loginButton { + position: absolute; + top: 10px; + right: 10px; + background-color: #0b7366; + color: white; + padding: 8px 18px; + border-radius: 8px; + text-decoration: none; + font-weight: bold; + font-size: 12px; + transition: background-color 0.3s ease; + border: none; +} + +.loginButton:hover { + background-color: #0f9b8a; +} + +.logoutButton { +position: absolute; + top: 10px; + right: 10px; + background-color: #ad1212; + color: white; + padding: 8px 14px; + border-radius: 8px; + text-decoration: none; + font-weight: bold; + font-size: 12px; + transition: background-color 0.3s ease; + border: none; +} + +.logoutButton:hover { + background-color: #cb0f0f; } \ No newline at end of file diff --git a/src/Login.js b/src/Login.js index b68cbf8..047c20e 100644 --- a/src/Login.js +++ b/src/Login.js @@ -13,13 +13,47 @@ const Login = () => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; - const handleSubmit = (e) => { + const handleSubmit = async (e) => { e.preventDefault(); - if (formData.username === 'dermalounge' && formData.password === '1234') { - window.location.href = '/dashboard'; // redirect after successful login - } else { - setError('Username atau password salah'); + try { + const loginResponse = await fetch('https://bot.kediritechnopark.com/webhook/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(formData) + }); + + const loginDataRaw = await loginResponse.json(); + const loginData = Array.isArray(loginDataRaw) ? loginDataRaw[0] : loginDataRaw; + + if (loginData?.success && loginData?.token) { + localStorage.setItem('token', loginData.token); + + const profileResponse = await fetch('https://bot.kediritechnopark.com/webhook/profile', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${loginData.token}` + } + }); + + const profileDataRaw = await profileResponse.json(); + const profileData = Array.isArray(profileDataRaw) ? profileDataRaw[0] : profileDataRaw; + + if (profileData?.success) { + localStorage.setItem('user', JSON.stringify(profileData.user)); + window.location.href = '/dashboard'; + } else { + setError('Token tidak valid'); + } + } else { + setError(loginData?.message || 'Username atau password salah'); + } + } catch (err) { + console.error('Login Error:', err); + setError('Gagal terhubung ke server'); } }; diff --git a/src/Login.module.css b/src/Login.module.css index 0b82780..3ee3f1f 100644 --- a/src/Login.module.css +++ b/src/Login.module.css @@ -48,7 +48,7 @@ } .button { - background-color: #4285F4; + background-color: #337f83; color: white; border: none; padding: 12px; @@ -58,7 +58,7 @@ } .button:hover { - background-color: #3367D6; + background-color: #3c9a9f; } .error {