From 1eccf6da314d461fe03a13a7ec1e137388fa520f Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Wed, 10 Jul 2024 03:03:44 +0200 Subject: [PATCH] =?UTF-8?q?+=20modifs=20param=C3=A8tres=20serveurs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.css | 7 +- src/pages/DashboardPage/DashboardPage.jsx | 12 ++- .../DashboardPage/DashboardPage.module.scss | 1 + src/pages/ServerDetails/ServerDetails.jsx | 88 ++++++++++++++++++- .../ServerDetails/ServerDetails.module.scss | 82 +++++++++++++++-- src/service/api.tsx | 87 +++++++++--------- 6 files changed, 226 insertions(+), 51 deletions(-) diff --git a/src/main.css b/src/main.css index d65f2ab..009958c 100644 --- a/src/main.css +++ b/src/main.css @@ -1,4 +1,4 @@ -/* index.css */ +/* main.css */ html { font-size: 12px; font-family: 'Poppins', sans-serif; @@ -18,6 +18,11 @@ html { --main-bg-color: #050816; --text-color: white; --text-color-black: black; + --input-bg-color: #44475a; + --input-border-color: #6272a4; + --button-bg-color: #50fa7b; + --button-text-color: #282a36; + --button-bg-color-hover: #8be9fd; } body { diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx index 2b286af..07fcd69 100644 --- a/src/pages/DashboardPage/DashboardPage.jsx +++ b/src/pages/DashboardPage/DashboardPage.jsx @@ -81,6 +81,13 @@ const DashboardPage = ({ user }) => { } }; + const handleCopyAddress = () => { + const address = `${subdomain}.servii.fr`; + navigator.clipboard.writeText(address) + .then(() => { + }) + }; + if (loading) { return (
@@ -102,7 +109,10 @@ const DashboardPage = ({ user }) => { ) : (
- Adresse de connexion à vos serveurs : {subdomain}.servii.fr + Adresse de connexion à vos serveurs : + + {" " + subdomain}.servii.fr +
+
); + }; export default ServerDetails; diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss index 87d3df9..81dcf6f 100644 --- a/src/pages/ServerDetails/ServerDetails.module.scss +++ b/src/pages/ServerDetails/ServerDetails.module.scss @@ -1,9 +1,4 @@ -html, body { - margin: 0; - padding: 0; - color: white; -} - +/* ServerDetails.module.scss */ .serverDetailsContainer { padding-top: var(--navbar-height); background-color: var(--main-bg-color); @@ -11,5 +6,78 @@ html, body { flex-direction: column; align-items: center; color: var(--text-color); -} + } + + .details { + margin-top: 5rem; + padding: 3rem; + padding-top: 0rem; + background-color: var(--card-bg-color); + width: 60rem; + border-radius: 1rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + } + + .formGroup { + margin-bottom: 2.5rem; + display: flex; + flex-direction: column; + } + + .formGroup label { + font-weight: bold; + margin-bottom: 1.2rem; + font-size: 1.4rem; + } + + .formGroup input, + .formGroup select { + width: calc(100% - 2px); + padding: 1.2rem; + height: 3.5rem; + background-color: var(--input-bg-color); + border: 1px solid var(--input-border-color); + border-radius: 0.5rem; + color: var(--text-color); + font-size: 1.2rem; + box-sizing: border-box; + } + + .saveButton { + padding: 1.2rem 2.5rem; + background-color: var(--button-bg-color); + color: var(--button-text-color); + border: none; + border-radius: 0.5rem; + cursor: pointer; + transition: background-color 0.3s; + font-size: 1.2rem; + align-self: flex-start; + } + + .quitButton{ + padding: 1.2rem 2.5rem; + background-color: gray; + color: var(--button-text-color); + border: none; + border-radius: 0.5rem; + cursor: pointer; + transition: background-color 0.3s; + font-size: 1.2rem; + align-self: flex-start; + margin-left: 3rem; + } + .saveButton:hover { + background-color: var(--button-bg-hover-color); + } + + .error { + color: red; + font-size: 1.2rem; + } + + .details h1 { + font-size: 2.5rem; + margin-bottom: 3rem; + } \ No newline at end of file diff --git a/src/service/api.tsx b/src/service/api.tsx index a711930..08506ac 100644 --- a/src/service/api.tsx +++ b/src/service/api.tsx @@ -1,5 +1,4 @@ -// src/services/serverService.ts -import {getAuth} from 'firebase/auth'; +import { getAuth } from 'firebase/auth'; const apiUrl: string = 'https://www.servii.fr/api'; @@ -8,37 +7,30 @@ interface ApiResponse { message: string; } -//fetchServers, accountCreate, accountDelete, interface BaseRequest { token: string; } -//setSubdomain -interface SubdomainRequest { - token: string; + +interface SubdomainRequest extends BaseRequest { subdomain: string; } -//serverDelete, serverRun, serverStop -interface ServerRequest { - token: string; + +interface ServerRequest extends BaseRequest { name: string; } -//serverCreate -interface ServerCreationRequest { - token: string; + +interface ServerCreationRequest extends BaseRequest { name: string; version: string; framework: string; } -//updateProperty -interface UpdatePropertyRequest { - token: string; + +interface UpdatePropertiesRequest extends BaseRequest { name: string; - prop: string; - value: string; + props: [string, string][]; } -//command -interface CommandRequest { - token: string; + +interface CommandRequest extends BaseRequest { command: string; name: string; } @@ -52,14 +44,14 @@ enum serviiRequest { accountDelete = 'AccountDelete', serverRun = 'ServerRun', serverStop = 'ServerStop', - updateProperty = 'UpdateProperty', + updateProperty = 'UpdateProperties', command = 'Command', } class serviiApi { constructor() {} - private static async call(endpoint: serviiRequest, body: T):Promise{ + private static async call(endpoint: serviiRequest, body: T): Promise { const response = await fetch(`${apiUrl}/${endpoint}`, { method: 'POST', headers: { @@ -67,62 +59,77 @@ class serviiApi { }, body: JSON.stringify(body), }); - const status: number = response.status + const status: number = response.status; const json = await response.json(); if (json.message === undefined) { - if (!(endpoint === serviiRequest.fetchServers)){ - return {return_code: status, message: "Couldn't find an available API, we're sorry for the inconvenience."}; + if (!(endpoint === serviiRequest.fetchServers)) { + return { return_code: status, message: "Couldn't find an available API, we're sorry for the inconvenience." }; } - return {return_code: status, message: json}; + return { return_code: status, message: json }; } - return {return_code: status, message: json.message}; + return { return_code: status, message: json.message }; } private static token(): string { const currentUser = getAuth().currentUser; - if (!currentUser) {throw new Error('No user is currently logged in.');} + if (!currentUser) { + throw new Error('No user is currently logged in.'); + } return currentUser.uid; } public static async setSubdomain(subdomain: string): Promise { - const payload : SubdomainRequest = {token: this.token(), subdomain: subdomain} + const payload: SubdomainRequest = { token: this.token(), subdomain: subdomain }; return this.call(serviiRequest.setSubdomain, payload); } + public static async fetchServers(): Promise { - const payload : BaseRequest = {token: this.token()} + const payload: BaseRequest = { token: this.token() }; return this.call(serviiRequest.fetchServers, payload); } + public static async accountCreate(): Promise { - const payload : BaseRequest = {token: this.token()} + const payload: BaseRequest = { token: this.token() }; return this.call(serviiRequest.accountCreate, payload); } + public static async serverCreate(name: string, version: string, framework: string): Promise { - const payload : ServerCreationRequest = {token: this.token(), name: name, version: version, framework: framework}; + const payload: ServerCreationRequest = { token: this.token(), name: name, version: version, framework: framework }; return this.call(serviiRequest.serverCreate, payload); } + public static async serverDelete(name: string): Promise { - const payload : ServerRequest = {token: this.token(), name: name} + const payload: ServerRequest = { token: this.token(), name: name }; return this.call(serviiRequest.serverDelete, payload); } + public static async accountDelete(): Promise { - const payload : BaseRequest = {token: this.token()} + const payload: BaseRequest = { token: this.token() }; return this.call(serviiRequest.accountDelete, payload); } + public static async serverRun(name: string): Promise { - const payload : ServerRequest = {token: this.token(), name: name} + const payload: ServerRequest = { token: this.token(), name: name }; return this.call(serviiRequest.serverRun, payload); } + public static async serverStop(name: string): Promise { - const payload : ServerRequest = {token: this.token(), name: name} + const payload: ServerRequest = { token: this.token(), name: name }; return this.call(serviiRequest.serverStop, payload); } - public static async updateProperty(name: string, prop: string, value: string): Promise { - const payload : UpdatePropertyRequest = {token: this.token(), name: name, prop: prop, value: value} - return this.call(serviiRequest.updateProperty, payload); + + public static async updateProperties(name: string, props: [string, string][]): Promise { + const payload: UpdatePropertiesRequest = { + token: this.token(), + name: name, + props: props, + }; + return this.call(serviiRequest.updateProperty, payload); // Correct usage here } + public static async command(command: string, name: string): Promise { - const payload : CommandRequest = {token: this.token(), command: command, name: name}; + const payload: CommandRequest = { token: this.token(), command: command, name: name }; return this.call(serviiRequest.command, payload); } }