Added rename function

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

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

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

@@ -0,0 +1,17 @@
+
+@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/RegexView/index.module.scss

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

frontend/src/components/ServiceRow/RenameForm.tsx

@@ -0,0 +1,69 @@
+import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+import React, { useEffect, useState } from 'react';
+import { fireUpdateRequest, okNotify, renameservice } from '../../js/utils';
+import { ImCross } from "react-icons/im"
+import { Service } from '../../js/models';
+
+function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) { 
+
+    const form = useForm({
+        initialValues: { name:service.name },
+        validationRules:{ name: (value) => value !== "" }
+    })
+
+    const close = () =>{
+        onClose()
+        form.reset()
+        setError(null)
+    }
+
+    useEffect(()=> form.setFieldValue("name", service.name),[opened])
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+
+    const submitRequest = ({ name }:{ name:string }) => {
+        setSubmitLoading(true)
+        renameservice(service.port, name).then( res => {
+            if (!res){
+                setSubmitLoading(false)
+                close();
+                fireUpdateRequest();
+                okNotify(`Service ${service.name} has been renamed in ${ name }`, `Successfully renamed service on port ${service.port}`)
+            }else{
+                setSubmitLoading(false)
+                setError("Error: [ "+res+" ]")
+            }
+        }).catch( err => {
+            setSubmitLoading(false)
+            setError("Request Failed! [ "+err+" ]")
+        })
+        
+    }    
+
+
+  return <Modal size="xl" title={`Rename '${service.name}' service on port ${service.port}`} opened={opened} onClose={close} closeOnClickOutside={false} centered>
+    <form onSubmit={form.onSubmit(submitRequest)}>
+            <TextInput
+                label="Service Name"
+                placeholder="Awesome Service Name!"
+                {...form.getInputProps('name')}
+            />
+            <Group position="right" mt="md">
+                <Button loading={submitLoading} type="submit">Rename</Button>
+            </Group>
+
+            <Space h="md" />
+            
+            {error?<>
+            <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                Error: {error}
+            </Notification><Space h="md" /></>:null}
+            
+        </form>
+    </Modal>
+
+}
+
+export default RenameForm;

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

@@ -0,0 +1,18 @@
+
+@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;
+}