Added rename function

frontend/src/components/Footer/Footer.module.scss

@@ -1,9 +0,0 @@
-@use "../../vars" as *;
-@use "../../index.scss" as *;
-
-.footer{
-    height: 150px;
-    margin-top: 50px;
-    background-color: $primary_color;
-    @extend .center-flex;
-}

frontend/src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from "./Footer.module.scss";
+import style from "./index.module.scss";
 
 
 function Footer() {

frontend/src/components/Header/Header.module.scss

@@ -1,17 +0,0 @@
-
-@use "../../vars" as *;
-
-.header{
-    width: 100%;
-    height: 140px;
-    background-color: $primary_color;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.logo{
-    width: 200px;
-    margin-left: 40px;
-    height: 70%;
-}

frontend/src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, Tooltip, FloatingTooltip, MediaQuery, PasswordInput } from '@mantine/core';
-import style from "./Header.module.scss";
+import style from "./index.module.scss";
 import { changepassword, errorNotify, eventUpdateName, generalstats, logout, okNotify } from '../../js/utils';
 import { ChangePassword, GeneralStats } from '../../js/models';
 import { BsPlusLg } from "react-icons/bs"

frontend/src/components/RegexView/RegexView.module.scss

@@ -1,13 +0,0 @@
-
-@use "../../vars" as *;
-
-.box{
-    padding:30px;
-    margin:5px;
-}
-
-.regex_text{
-    padding: 10px;
-    background-color: $third_color;
-    border-radius: 15px;
-}

frontend/src/components/RegexView/index.tsx

@@ -2,7 +2,7 @@ import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/c
 import React, { useState } from 'react';
 import { RegexFilter } from '../../js/models';
 import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, fireUpdateRequest, okNotify } from '../../js/utils';
-import style from "./RegexView.module.scss";
+import style from "./index.module.scss";
 import { BsTrashFill } from "react-icons/bs"
 import YesNoModal from '../YesNoModal';
 import FilterTypeSelector from '../FilterTypeSelector';

frontend/src/components/ServiceRow/ServiceRow.module.scss

@@ -1,18 +0,0 @@
-
-@use "../../index.scss" as *;
-
-.row{
-    width: 95%;
-    padding: 30px 0px;
-    border-radius: 20px;
-    margin: 10px;
-    @extend .center-flex;
-}
-
-.name{
-    font-size: 2.3em;
-    font-weight: bolder;
-    margin-right: 10px;
-    margin-bottom: 13px;
-    color:#FFF;
-}

frontend/src/components/ServiceRow/index.tsx

@@ -3,11 +3,12 @@ import React, { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
 import { Service } from '../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
-import style from "./ServiceRow.module.scss";
+import style from "./index.module.scss";
 import YesNoModal from '../YesNoModal';
 import { deleteservice, errorNotify, fireUpdateRequest, okNotify, startservice, stopservice } from '../../js/utils';
 import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
+import RenameForm from './RenameForm';
 
 function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
 
@@ -20,6 +21,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [buttonLoading, setButtonLoading] = useState(false)
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
+    const [renameModal, setRenameModal] = useState(false)
 
     const stopService = async () => {
         setButtonLoading(true)
@@ -107,7 +109,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                 <div className="center-flex">
                     <Menu>
                         <Menu.Label><b>Rename service</b></Menu.Label>
-                        <Menu.Item icon={<BiRename size={18} />} onClick={()=>{}}>Change service name</Menu.Item>
+                        <Menu.Item icon={<BiRename size={18} />} onClick={()=>setRenameModal(true)}>Change service name</Menu.Item>
                         <Divider />
                         <Menu.Label><b>Danger zone</b></Menu.Label>
                         <Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
@@ -150,6 +152,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             action={deleteService}
             opened={deleteModal}
         />
+        <RenameForm
+            onClose={()=>setRenameModal(false)}
+            opened={renameModal}
+            service={service}
+        />
     </>
 }
 

frontend/src/js/utils.tsx

@@ -114,6 +114,11 @@ export async function startservice(service_port:number){
     return status === "ok"?undefined:status
 }
 
+export async function renameservice(service_port:number, name: string){
+    const { status } = await postapi(`service/${service_port}/rename`,{ name }) as ServerResponse;
+    return status === "ok"?undefined:status
+}
+
 export async function stopservice(service_port:number){
     const { status } = await getapi(`service/${service_port}/stop`) as ServerResponse;
     return status === "ok"?undefined:status