fe edit

ui

Author: zahidayturan

rsa-frontend/src/contants/endpoints.js

@@ -5,6 +5,7 @@ const Endpoints = {
  USER_KEY : `${API_BASE_URL}/user/key`,
  FILE : `${API_BASE_URL}/file`,
  FILE_GET : `${API_BASE_URL}/file/get`,
+ KEY : `${API_BASE_URL}/key`,
 };
 
 export default Endpoints;

rsa-frontend/src/routes/components/FileExplorer.js

@@ -4,7 +4,7 @@ import {openFile} from "./api/OpenFile";
 import Endpoints from "../../contants/endpoints";
 
 const FileContainer = ({ owner, fileName, size, id }) => (
- <div className={"file-container custom-row"} style={{justifyContent:"space-between",alignItems:"center"}}>
+ <div key={id} className={"file-container custom-row"} style={{justifyContent:"space-between",alignItems:"center"}}>
  <div>
  <p className={"font-bold"}>{owner === 1 ? "Alice" : owner === 2 ? "Bob" : "Charlie" }</p>
  <p>{fileName}</p>
@@ -38,6 +38,8 @@ const FileExplorer = () => {
 
  const [loading, setLoading] = useState(false);
  const [files, setFiles] = useState(null);
+ const [publicKey, setPublicKey] = useState(null);
+ const [privateKey, setPrivateKey] = useState(null);
 
  const clean = () => {
  axios.get(`${Endpoints.USER}/clean`)
@@ -66,6 +68,7 @@ const FileExplorer = () => {
 
  useEffect(() => {
  fetchFiles();
+ getKey()
  /*
  const intervalId = setInterval(() => {
  fetchFiles();
@@ -76,6 +79,25 @@ const FileExplorer = () => {
  }, []);
 
 
+ const getKey = async () => {
+ setLoading(true);
+ try {
+ const publicResponse = await axios.get(`${Endpoints.KEY}/public`, {
+ responseType: "text",
+ });
+ setPublicKey(publicResponse.data);
+ const privateResponse = await axios.get(`${Endpoints.KEY}/private`, {
+ responseType: "text",
+ });
+ setPrivateKey(privateResponse.data);
+ } catch (error) {
+ console.error("Abahtar alınırken hata oluştu:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+
  return (
  <>
  {loading && <div className={"loading-overlay"}><div className={"main-spinner"}></div></div>}
@@ -85,18 +107,23 @@ const FileExplorer = () => {
  <p onClick={fetchFiles} style={{cursor:"pointer"}}>Yenile</p>
  </div>
  <div className={"custom-row"}>
- <img src="/icon/public.png" alt="" className={"mid-icon"}/>
+ <img src="/icon/public.png" alt="" className={"mid-icon"} />
  <div>
- <p style={{color: "var(--orange-color-1)"}}>Geçerli <span>Açık Anahtar</span></p>
- <p className={"small-text"}>Anahtar Bekleniyor</p>
+ <p style={{ color: "var(--orange-color-1)" }}>Geçerli <span>Açık Anahtar</span></p>
+ <p className={"small-text"} style={{ wordBreak: "break-all" }}>
+ {publicKey == null ? "Anahtar Bekleniyor" : publicKey}
+ </p>
  </div>
  </div>
 
+
  <div className={"custom-row"}>
  <img src="/icon/private.png" alt="" className={"mid-icon"}/>
  <div>
  <p style={{color: "var(--yellow-color-1)"}}>Geçerli <span>Kapalı Anahtar</span></p>
- <p className={"small-text"}>Anahtar Bekleniyor</p>
+ <p className={"small-text"} style={{ wordBreak: "break-all" }}>
+ {privateKey == null ? "Anahtar Bekleniyor" : privateKey}
+ </p>
  </div>
  </div>
  {

rsa-frontend/src/routes/components/ScenarioArea.js

@@ -15,7 +15,7 @@ const UserContainer = ({ user, handleUserToggle }) => {
  const fetchFiles = async () => {
  setLoading(true);
  try {
- const response = await axios.get(`${Endpoints.USER}/info/${user.id}`);
+ const response = await axios.get(`${Endpoints.FILE}/info/${user.id}`);
  setFileList(response.data);
  } catch (error) {
  console.error("Dosyalar alınırken hata oluştu:", error);

rsa-frontend/src/routes/components/Scenarios.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 
 const scenarios = [
- { id: 1, text: 'Birinci Senaryo Yazısı' },
- { id: 2, text: 'İkinci Senaryo Yazısı' },
- { id: 3, text: 'Üçüncü Senaryo Yazısı' },
+ { id: 1, text: 'Bu senaryoda tek kullanıcı vardır. Kullanıcı elinde bulunan açık anahtar ile sisteme bir dosya yükler bu dosya şifrelenerek kayıt edilir. Daha sonrasında kullanıcı dosyasına erişmek istediğinde dosyanın şifresi çözülerek kullanıcya iletilir.' },
+ { id: 2, text: 'Bu senaryoda iki kullanıcı vardır. İlk kullanıcı ikinci kullanıcıya bir dosya gönderir bu dosya şifreli olarak gider, ikinci kullanıcı ise bu şifreli dosyayı şifresi çözülmüş şekilde alır.' },
+ { id: 3, text: 'Bu senaryoda üç kullanıcı vardır. Üçüncü kullanıcı hiçbir anahtarı olmadan diğer kullanıcıların dosyalarına erişmek isteyecektir. Aynı zamanda senaryo 1 ve senaryo 2 içerisinde yapılan işlemlere izinsiz erişim sağlayacaktır. Burada şifrelenmiş dosyalarla karşılaşması beklenmektedir.' },
 ];
 
 const Scenarios = () => {
@@ -23,7 +23,10 @@ const Scenarios = () => {
  ))}
  </div>
  {activeScenario ? (
- <p>{scenarios.find(scenario => scenario.id === activeScenario)?.text}</p>
+ <div>
+ <p>{scenarios.find(scenario => scenario.id === activeScenario)?.text}</p>
+ </div>
+
  ) : (
  <p>Lütfen bir senaryo seçin</p>
  )}

rsa-frontend/src/routes/css/index.css

@@ -143,9 +143,9 @@ span{
  flex-direction: column;
  gap: 12px;
  background-color: var(--primary-color-1);
- width: max-content;
  border-radius: 12px;
  padding: 12px;
+ width: content-box;
 }
 
 .scenario-button {