From 1e398d9153357159674f07dd2736acd7946bdb61 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 27 May 2024 13:51:51 -0700 Subject: [PATCH 01/34] Added route and DB scaffolds --- Server/controllers/checkController.js | 37 ++++++++++++++ Server/db/MongoDB.js | 74 +++++++++++++++++++++++++++ Server/index.js | 2 + Server/routes/checkRoute.js | 24 +++++++++ 4 files changed, 137 insertions(+) create mode 100644 Server/controllers/checkController.js create mode 100644 Server/routes/checkRoute.js diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js new file mode 100644 index 000000000..ef1a1a071 --- /dev/null +++ b/Server/controllers/checkController.js @@ -0,0 +1,37 @@ +var jwt = require("jsonwebtoken"); +const SERVICE_NAME = "check"; + +const createCheck = (req, res, next) => { + try { + req.db.createCheck(req, res); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } +}; + +const getChecks = (req, res, next) => { + try { + req.db.getChecks(req, res); + // Return all checks for a monitor + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } +}; + +const deleteChecks = (req, res, next) => { + try { + req.db.deleteChecks(req, res); + // Delete all checks for a monitor + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } +}; + +module.exports = { + createCheck, + getChecks, + deleteChecks, +}; diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index 44b734954..f7f790e86 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -16,6 +16,10 @@ const connect = async () => { } }; +//**************************************** +// Users +//**************************************** + /** * Insert a User * @async @@ -55,6 +59,10 @@ const getUserByEmail = async (req, res) => { } }; +//**************************************** +// Monitors +//**************************************** + /** * Get all monitors * @async @@ -169,6 +177,69 @@ const editMonitor = async (req, res) => { } }; +//**************************************** +// Checks +//**************************************** + +/** + * Create a check for a monitor + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @throws {Error} + */ + +const createCheck = async (req, res) => { + try { + // Create check with monitor id + res + .status(200) + .json({ success: true, msg: "Create check", data: req.params.monitorId }); + } catch (error) { + throw error; + } +}; + +/** + * Get all checks for a monitor + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @throws {Error} + */ + +const getChecks = async (req, res) => { + try { + // TODO get all checks for a monitor from DB + res + .status(200) + .json({ success: true, msg: "Get checks", data: req.params.monitorId }); + } catch (error) { + throw error; + } +}; + +/** + * Delete all checks for a monitor + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @throws {Error} + */ + +const deleteChecks = async (req, res) => { + try { + // TODO Delete all checks for a monitor + res.status(200).json({ + success: true, + msg: "Deleted checks", + data: req.params.monitorId, + }); + } catch (error) { + throw error; + } +}; + module.exports = { connect, insertUser, @@ -179,4 +250,7 @@ module.exports = { createMonitor, deleteMonitor, editMonitor, + createCheck, + getChecks, + deleteChecks, }; diff --git a/Server/index.js b/Server/index.js index db3be459c..67813051e 100644 --- a/Server/index.js +++ b/Server/index.js @@ -3,6 +3,7 @@ const helmet = require("helmet"); const cors = require("cors"); const authRouter = require("./routes/authRoute"); const monitorRouter = require("./routes/monitorRoute"); +const checkRouter = require("./routes/checkRoute"); const { connectDbAndRunServer } = require("./configs/db"); require("dotenv").config(); const logger = require("./utils/logger"); @@ -62,6 +63,7 @@ app.use((req, res, next) => { //routes app.use("/api/v1/auth", authRouter); app.use("/api/v1/monitors", verifyJWT, monitorRouter); +app.use("/api/v1/checks", verifyJWT, checkRouter); /** * Error handler middleware diff --git a/Server/routes/checkRoute.js b/Server/routes/checkRoute.js new file mode 100644 index 000000000..6569dd49a --- /dev/null +++ b/Server/routes/checkRoute.js @@ -0,0 +1,24 @@ +const router = require("express").Router(); +const checkController = require("../controllers/checkController"); +const { verifyOwnership } = require("../middleware/verifyOwnership"); +const Monitor = require("../models/Monitor"); + +router.post( + "/:monitorId", + verifyOwnership(Monitor, "monitorId"), + checkController.createCheck +); + +router.get( + "/:monitorId", + verifyOwnership(Monitor, "monitorId"), + checkController.getChecks +); + +router.post( + "/delete/:monitorId", + verifyOwnership(Monitor, "monitorId"), + checkController.deleteChecks +); + +module.exports = router; From 9e3278b304a9020b5cd63c46d0f834dc000a4440 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 27 May 2024 16:04:44 -0700 Subject: [PATCH 02/34] Added placeholders to readme --- README.md | 142 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 117 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 8767a3633..2fb1d944c 100644 --- a/README.md +++ b/README.md @@ -10,15 +10,21 @@ BlueWave uptime monitoring application 2. [Installation (Server)](#server) 3. [Configuration(Server)](#config-server) 4. [Endpoints](#endpoints) + ###### Auth - POST [/api/v1/auth/register](#post-register) - POST [/api/v1/auth/login](#post-login) - POST [/api/v1/auth/user/{userId}](#post-auth-user-edit-id) + ###### Monitors - GET [/api/v1/monitors](#get-monitors) - GET [/api/v1/monitor/{id}](#get-monitor-id) - GET [/api/v1/monitors/user/{userId}](#get-monitors-user-userid) - POST [/api/v1/monitors](#post-monitors) - POST [/api/v1/monitors/delete/{monitorId}](#post-monitors-del-id) - POST [/api/v1/monitors/edit/{monitorId}](#post-monitors-edit-id) + ###### Checks + - POST [/api/v1/checks/{monitorId}](#post-checks) + - GET [/api/v1/checks/{monitorId}](#get-checks) + - POST [/api/v1/checks/delete/{monitorId}](#delete-checks) 5. [Error Handling](#error-handling) 6. [Contributors](#contributors) @@ -122,15 +128,15 @@ Example:
Check -| Name | Type | Notes | -| ----------- | --------- | ------------------------------------------------| -| monitorId | `string` | Unique ID for the monitor | -| status | `boolean` | Indicates the service is Up or Down | -| responseTime| `integer` | Indicates the response time of the service (ms) | -| statusCode | `integer` | Status Code returned from the service | -| message | `string` | Message returned from the service | -| updatedAt | `Date` | Last time the check was updated | -| CreatedAt | `Date` | When the check was created | +| Name | Type | Notes | +| ------------ | --------- | ----------------------------------------------- | +| monitorId | `string` | Unique ID for the monitor | +| status | `boolean` | Indicates the service is Up or Down | +| responseTime | `integer` | Indicates the response time of the service (ms) | +| statusCode | `integer` | Status Code returned from the service | +| message | `string` | Message returned from the service | +| updatedAt | `Date` | Last time the check was updated | +| CreatedAt | `Date` | When the check was created |
@@ -138,9 +144,9 @@ Example: Alert | Name | Type | Notes | -| ----------- | --------- | --------------------------------------------------| +| ----------------- | --------- | ------------------------------------------------- | | checkId | `string` | Unique ID for the check | -| status | `boolean` | Indicates the service is Up or Down | +| status | `boolean` | Indicates the service is Up or Down | | message | `string` | Message for the user about the down service | | notifiedStatus | `boolean` | Indicates whether the user is notified | | acknowledgeStatus | `boolean` | Indicates whether the user acknowledged the alert | @@ -148,8 +154,11 @@ Example: | CreatedAt | `Date` | When the alert was created | + --- +###### Auth +
POST /api/v1/auth/register @@ -201,8 +210,6 @@ curl --request POST \
---- -
POST /api/v1/auth/login @@ -250,8 +257,6 @@ curl --request POST \
---- -
POST/api/v1/auth/user/{userId} @@ -313,6 +318,8 @@ curl --request POST \ --- +###### Monitors +
GET /api/v1/monitors @@ -373,8 +380,6 @@ curl --request GET \
---- -
GET /api/v1/monitor/{id} @@ -421,8 +426,6 @@ curl --request GET \
---- -
GET /api/v1/monitors/user/{userId} @@ -483,8 +486,6 @@ curl --request GET \
---- -
POST/api/v1/monitors @@ -538,8 +539,6 @@ curl --request POST \
---- -
POST/api/v1/monitors/delete/{monitorId} @@ -575,8 +574,6 @@ curl --request POST \ ##
---- -
POST/api/v1/monitors/edit/{monitorId} @@ -636,6 +633,101 @@ curl --request POST \ --- +###### Checks + +
+POST/api/v1/checks/{monitorId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | POST | + +###### Response Payload + +> | Type | Notes | +> | ---- | ------------------- | +> | None | No payload returned | + +###### Body + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+ +
+GET/api/v1/checks/{monitorId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | POST | + +###### Response Payload + +> | Type | Notes | +> | --------------- | ------------------------ | +> | `Array[Checks]` | Array of `Check` objects | + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+ +
+POST/api/v1/checks/delete/{monitorId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | POST | + +###### Response Payload + +> | Type | Notes | +> | ---- | ------------------- | +> | None | No payload returned | + +###### Body + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+ +--- + ### Error handling {#error-handling} Errors are returned in a standard format: From 7a56744fe602f1e001f8377d078ecb8f3bce9dcd Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 28 May 2024 21:28:15 +0330 Subject: [PATCH 03/34] Forgot password page --- Client/src/App.jsx | 6 +- Client/src/Pages/ForgotPassword/index.css | 94 ++++++++++++++++++++++ Client/src/Pages/ForgotPassword/index.jsx | 60 ++++++++++++++ Client/src/assets/Images/arrow-left.png | Bin 0 -> 310 bytes Client/src/assets/Images/key-password.png | Bin 0 -> 1761 bytes 5 files changed, 158 insertions(+), 2 deletions(-) create mode 100644 Client/src/Pages/ForgotPassword/index.css create mode 100644 Client/src/Pages/ForgotPassword/index.jsx create mode 100644 Client/src/assets/Images/arrow-left.png create mode 100644 Client/src/assets/Images/key-password.png diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 9b21de1a4..8d1cdf097 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -6,17 +6,18 @@ import Register from "./Pages/Register"; import HomeLayout from "./Layouts/HomeLayout"; import Demo from "./Pages/Demo/Demo"; import PlayGround from "./Pages/PlayGround/PlayGround"; -import Monitors from "./Pages/Monitors" +import Monitors from "./Pages/Monitors"; import Incidents from "./Pages/Incidents"; import Status from "./Pages/Status"; import Integrations from "./Pages/Integrations"; import Settings from "./Pages/Settings"; +import ForgotPassword from "./Pages/ForgotPassword"; function App() { return ( <> - } > + }> } /> } /> } /> @@ -28,6 +29,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/Client/src/Pages/ForgotPassword/index.css b/Client/src/Pages/ForgotPassword/index.css new file mode 100644 index 000000000..1308bc3d2 --- /dev/null +++ b/Client/src/Pages/ForgotPassword/index.css @@ -0,0 +1,94 @@ +:root { + --spacing-1: 15px; + --spacing-2: 20px; + --spacing-3: 25px; + --textfield-font-size: 13px; + + --forgot-password-page-width-1: 100vw; + --forgot-password-page-height-1: 100vh; + + --forgot-password-form-width-1: 360px; + --forgot-password-form-height-1: 526px; + + --logo-width-1: 20px; + --forgot-font-size-medium: 13px; + + --forgot-color-1: #101828; + --forgot-color-2: #1570ef; + --forgot-color-3: #475467; +} + +.forgot-password-page { + width: var(--forgot-password-page-width-1); + display: flex; + justify-content: center; + min-height: var(--forgot-password-page-height-1); +} + +.forgot-password-form { + width: var(--forgot-password-form-width-1); + height: var(--forgot-password-form-height-1); + margin: 90px auto; +} + +.forgot-password-form-header { + justify-content: center; + align-items: center; + text-align: center; +} + +.forgot-password-form-header-logo { + margin: 0 auto; +} + +.forgot-password-v-gap-large { + height: 32px; +} + +.forgot-password-v-gap-medium { + height: 24px; +} + +.forgot-password-v-gap-small { + height: 12px; +} + +.forgot-password-form-heading { + font-size: 16px; + font-weight: 700; + color: #101828; +} + +.forgot-password-form-subheading { + font-size: 13px; + font-weight: 500; + color: var(--forgot-color-3); +} + +.forgot-password-body { + width: 360px; +} + +#forgot-password-email-input { + width: 308px; + height: 11px; + font-size: var(--textfield-font-size); +} + +.forgot-password-back-button { + display: flex; + justify-content: center; + align-items: center; +} + +.forgot-password-back-button-img { + width: 20px; + height: 20px; + margin-right: 5px; +} + +.forgot-password-back-button-text { + font-size: 13px; + font-weight: 500; + color: var(--forgot-color-3); +} diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx new file mode 100644 index 000000000..b94546251 --- /dev/null +++ b/Client/src/Pages/ForgotPassword/index.jsx @@ -0,0 +1,60 @@ +import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern"; +import "./index.css"; +import React from "react"; +import Logomark from "../../assets/Images/key-password.png"; +import EmailTextField from "../../Components/TextFields/Email/EmailTextField"; +import Button from "../../Components/Button"; +import LeftArrow from "../../assets/Images/arrow-left.png"; + +const ForgotPassword = () => { + return ( +
+ +
+
+ Logomark +
+
Forgot password?
+
+
+ No worries, we’ll send you reset instructions. +
+
+
+
+ +
+
+
+
+ LeftArrow +
Back to log in
+
+
+
+ ); +}; + +export default ForgotPassword; diff --git a/Client/src/assets/Images/arrow-left.png b/Client/src/assets/Images/arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..0bd5b126873ebe4e6f34f14149d0520efd81078d GIT binary patch literal 310 zcmeAS@N?(olHy`uVBq!ia0vp^qChOd!3HFgyvvM%6lZ})WHAE+w=f7ZGR&GI0Tg5` z4sv&5Sa(k5C6L3C?&#~tz_78O`%fY(kbm0K#WAFU@$KZjyoU?~+|EDre|e)}&7?jf z)l@I984aQ@7&@7(CO9nW$vDB*!E4iG&D~Kdq3No$=#Jy1iQ%`Nr_ZmEKM=2M;d=Pu zjl=5a-W{8JZ28VbuVklPcyKgMzO1^6fk$SVz(MDdL!awPnc13jZS=MsaJizZGbK#4 z&Z9Zu(skL|TJFoSo}2=XwnEp>`?;QUSG2TxxjN)v)V!SEhqlRw=I+-s%wDojbo#L` z;f6E+&XMSmm%V0K+IFUHOSIQTp?y>H6f(Ut7E~~rwY8}n{PT1t&|3_iu6{1-oD!M< DIv{hg literal 0 HcmV?d00001 diff --git a/Client/src/assets/Images/key-password.png b/Client/src/assets/Images/key-password.png new file mode 100644 index 0000000000000000000000000000000000000000..ed7fa653834949ec61f09ba829e4f8155ae1cafe GIT binary patch literal 1761 zcmV<71|Io|P)WAHV>M1~7zJFwa(^PrvO@+aV4xag~PHAQn4G6I^@YaPpk{iIAIK_dbgf@N8G zGGdF1f1i|jiinv9xeBhYCS(Y>JlTw~sdrD0-IRHfFleg!8B>)h$QT&+W|^XV$~pJd zS`t=J%O^C@nvgMUt1!-5pb*d!lgf~Rx4(f><*T?5@yFk!c`TM z%olUD3YmwlcSyogsK-IVKoSNGju0Q~U+B2@PvF)rk1_U&Kc6!nn$RDx?jHn6*g115 zpX%vCFCbCczL5)?-`gwR#7@+IHNSrVDS;$>=G2!cT*H+|EXp7V>v|>sA83y#NzWV@ zlH=2uv@zuI8NEGT5Y7^@}8qUtskrd*$!F=iuGZhxd# zuj8oKkhrb|^~;b7bPVQ>YuRsnfBNjf?6i&Q+=WSDZuoNG7-jv z0Rw>CcGgi%n=}-^hlJ2|-H(03MxO;tOOJ@Bqh+MRn12b?j0OS?7q9KK z^9@?JeG-`Fj!GkpzB(PW&Whx|7Wb)X%;!L>i^oE!$d0s60Nr1a1mS95mm_j2M6zec zf5Ca{0lVQ~2xaFZ?Gxa%FVul}T3oEH><~$jdWWBpXoZtaWiSs3LB6zU0`EIvG&psP zZeh1=2i&`H+tD&64c*+#!&yiOBWD}C%G zYs6AZT7u9qnGw^#Y^3K?`*unT66vnPamWVit%s+Hv`YdTJCR4DRe?Z_sfzDQLwe{M zE#YZ>3uz!OStK=sWb@(PFz~6`c%oRxrRp2#15!0w2a%O-BYIOLLE01$*?TC}rh?WR zV_QXQJlDg=P7Yd!O(qE^c07bt-IpwtIlw0)P3q`A#;!5*018Z6nJb30+Q`g2T6TRS9(hKUQ03GU6A#z2Wm;C`WNr6GJ~ni~o!cmeo?eaGQ$ug$rnA`mMryo|~h(KFl1H~*Ye|!$&`?`4;MhxUkYZxFo4(yors9_kL@V(BO za$M#x!T;3K-msd%-NkI7WmyHf$s@iGcjqu;9Gb4XeGxJS&4Gf)`Ez+P>wkGD77f1b zcuzdWb;uaFqFi&fogbt5%HzjRPLt?YtkJkR8y9pVcwynMa}fU2g5Z;r_g?~ve#}#D zLPkJ0YF*Ua3m4vR?o(V-78aJz`8R2;3|uZn4jt6k<>h6PZm;FHs{Zq$bBEMmlu7%R z895LaIKR$(}-v<+M9RCh_!;7TU+^1WDuWt3|8N3fBQ7;?9v2EkVw6$c~qTvbV(&{gf02kI4+;j^~8{@!wm zMIG@TSwDEEP*=)RL|5kVnrjS{s=1bHu00000NkvXXu0mjf D4mCSg literal 0 HcmV?d00001 From 7430a6eb48e835ac0ebfdeeb2f9b70f2b0ea33e2 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 28 May 2024 11:17:03 -0700 Subject: [PATCH 04/34] Started work on alert routes and controller --- Server/controllers/alertController.js | 15 +++++++++++++++ Server/routes/alertRoute.js | 27 +++++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 Server/controllers/alertController.js create mode 100644 Server/routes/alertRoute.js diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js new file mode 100644 index 000000000..6d7a493d4 --- /dev/null +++ b/Server/controllers/alertController.js @@ -0,0 +1,15 @@ +const createAlert = (req, res, next) => {}; +const getAlertsByUserId = (req, res, next) => {}; +const getAlertsByMonitorId = (req, res, next) => {}; +const getAlertById = (req, res, next) => {}; +const editAlert = (req, res, next) => {}; +const deleteAlert = (req, res, next) => {}; + +module.exports = { + createAlert, + getAlertsByUserId, + getAlertsByMonitorId, + getAlertById, + editAlert, + deleteAlert, +}; diff --git a/Server/routes/alertRoute.js b/Server/routes/alertRoute.js new file mode 100644 index 000000000..be252e8c4 --- /dev/null +++ b/Server/routes/alertRoute.js @@ -0,0 +1,27 @@ +const router = require("express").Router(); +const alertController = require("../controllers/alertController"); +const { verifyOwnership } = require("../middleware/verifyOwnership"); +const Alert = require("../models/Alert"); + +// Create alert +router.post("/:monitorId", alertController.createAlert); +// Get all alerts for a user +router.get("/user/:userId", alertController.getAlertsByUserId); +// Get all alerts for a monitor +router.get("/monitor/:monitorId", alertController.getAlertsByMonitorId); +// Get a single alert +router.get("/:alertId", alertController.getAlertById); +// Edit +router.post( + "/edit/:alertId", + verifyOwnership(Alert, "alertId"), + alertController.editAlert +); +//Delete +router.post( + "/delete/:alertId", + verifyOwnership(Alert, "alertId"), + alertController.deleteAlert +); + +module.exports = router; From 7e9f8d9d290f39ec9122f74940be493d02d1b2a7 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 28 May 2024 11:34:25 -0700 Subject: [PATCH 05/34] Implemented routes --- Server/controllers/alertController.js | 31 +++++++++++++++++++++------ Server/index.js | 2 ++ 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js index 6d7a493d4..25edb1643 100644 --- a/Server/controllers/alertController.js +++ b/Server/controllers/alertController.js @@ -1,9 +1,28 @@ -const createAlert = (req, res, next) => {}; -const getAlertsByUserId = (req, res, next) => {}; -const getAlertsByMonitorId = (req, res, next) => {}; -const getAlertById = (req, res, next) => {}; -const editAlert = (req, res, next) => {}; -const deleteAlert = (req, res, next) => {}; +const express = require("express"); +const {} = require("../validation/joi"); +const logger = require("../utils/logger"); +require("dotenv").config(); + +const SERVICE_NAME = "alerts"; + +const createAlert = (req, res, next) => { + res.status(200).json({ success: true, msg: "Create Alert" }); +}; +const getAlertsByUserId = (req, res, next) => { + res.status(200).json({ success: true, msg: "Get Alerts By UserID" }); +}; +const getAlertsByMonitorId = (req, res, next) => { + res.status(200).json({ success: true, msg: "Get Alerts By MonitorID" }); +}; +const getAlertById = (req, res, next) => { + res.status(200).json({ success: true, msg: "Get Alert By alertID" }); +}; +const editAlert = (req, res, next) => { + res.status(200).json({ success: true, msg: "Edit alert" }); +}; +const deleteAlert = (req, res, next) => { + res.status(200).json({ success: true, msg: "Delete alert" }); +}; module.exports = { createAlert, diff --git a/Server/index.js b/Server/index.js index 1596e0862..96f7553fd 100644 --- a/Server/index.js +++ b/Server/index.js @@ -4,6 +4,7 @@ const cors = require("cors"); const authRouter = require("./routes/authRoute"); const monitorRouter = require("./routes/monitorRoute"); const checkRouter = require("./routes/checkRoute"); +const alertRouter = require("./routes/alertRoute"); const { connectDbAndRunServer } = require("./configs/db"); require("dotenv").config(); const logger = require("./utils/logger"); @@ -64,6 +65,7 @@ app.use((req, res, next) => { app.use("/api/v1/auth", authRouter); app.use("/api/v1/monitors", verifyJWT, monitorRouter); app.use("/api/v1/checks", verifyJWT, checkRouter); +app.use("/api/v1/alerts", verifyJWT, alertRouter); // Testing email service // app.use('/sendEmail', async (req, res) => { From e90073da24d4b2ab83d789b5f7f0ca44830ceac1 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 28 May 2024 11:39:55 -0700 Subject: [PATCH 06/34] Add validation to createAlert --- Server/controllers/alertController.js | 19 ++++++++++++++++--- Server/validation/joi.js | 5 +++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js index 25edb1643..b7295b901 100644 --- a/Server/controllers/alertController.js +++ b/Server/controllers/alertController.js @@ -2,14 +2,27 @@ const express = require("express"); const {} = require("../validation/joi"); const logger = require("../utils/logger"); require("dotenv").config(); +const { createAlertParamValidation } = require("../validation/joi"); const SERVICE_NAME = "alerts"; -const createAlert = (req, res, next) => { - res.status(200).json({ success: true, msg: "Create Alert" }); +const createAlert = async (req, res, next) => { + try { + await createAlertParamValidation.validateAsync(req.params); + res + .status(200) + .json({ success: true, msg: "Create Alert", data: req.params.monitorId }); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } }; const getAlertsByUserId = (req, res, next) => { - res.status(200).json({ success: true, msg: "Get Alerts By UserID" }); + res.status(200).json({ + success: true, + msg: "Get Alerts By UserID", + data: req.params.userId, + }); }; const getAlertsByMonitorId = (req, res, next) => { res.status(200).json({ success: true, msg: "Get Alerts By MonitorID" }); diff --git a/Server/validation/joi.js b/Server/validation/joi.js index 399c243dc..441e0ebc3 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -39,6 +39,10 @@ const editUserBodyValidation = joi.object({ profilePicUrl: joi.string(), }); +const createAlertParamValidation = joi.object({ + monitorId: joi.string().required(), +}); + module.exports = { loginValidation, registerValidation, @@ -47,4 +51,5 @@ module.exports = { monitorValidation, editUserParamValidation, editUserBodyValidation, + createAlertParamValidation, }; From 424bec1366431cac54b28984b14f8fb3c6669e15 Mon Sep 17 00:00:00 2001 From: veyselboybay Date: Tue, 28 May 2024 14:42:51 -0400 Subject: [PATCH 07/34] Updated the Alert model, ReadMe file --- README.md | 4 +++- Server/models/Alert.js | 10 ++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2fb1d944c..2e1022c31 100644 --- a/README.md +++ b/README.md @@ -145,7 +145,9 @@ Example: | Name | Type | Notes | | ----------------- | --------- | ------------------------------------------------- | -| checkId | `string` | Unique ID for the check | +| checkId | `string` | Unique ID for the associated check | +| monitorId | `string` | Unique ID for the associated monitor | +| userId | `string` | Unique ID for the associated user | | status | `boolean` | Indicates the service is Up or Down | | message | `string` | Message for the user about the down service | | notifiedStatus | `boolean` | Indicates whether the user is notified | diff --git a/Server/models/Alert.js b/Server/models/Alert.js index 72705d947..758a7eba2 100644 --- a/Server/models/Alert.js +++ b/Server/models/Alert.js @@ -7,6 +7,16 @@ const AlertSchema = mongoose.Schema( ref: 'Check', immutable: true, }, + monitorId: { + type: mongoose.Schema.Types.ObjectId, + ref: 'Monitor', + immutable: true, + }, + userId: { + type: mongoose.Schema.Types.ObjectId, + ref: 'User', + immutable: true, + }, status: { type: Boolean, }, From fdb8c6b20ac193d3b8c20ae93a055c65d747af61 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 28 May 2024 13:02:19 -0700 Subject: [PATCH 08/34] Finished routes, validation, and scaffold DB --- Server/controllers/alertController.js | 130 ++++++++++++++++++++++---- Server/controllers/authController.js | 4 +- Server/db/MongoDB.js | 123 ++++++++++++++++++++++++ Server/validation/joi.js | 44 +++++++++ 4 files changed, 280 insertions(+), 21 deletions(-) diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js index b7295b901..91bb56971 100644 --- a/Server/controllers/alertController.js +++ b/Server/controllers/alertController.js @@ -1,40 +1,132 @@ const express = require("express"); -const {} = require("../validation/joi"); const logger = require("../utils/logger"); require("dotenv").config(); -const { createAlertParamValidation } = require("../validation/joi"); +const { + createAlertParamValidation, + createAlertBodyValidation, + getAlertsByUserIdParamValidation, + getAlertsByMonitorIdParamValidation, + getAlertByIdParamValidation, + editAlertParamValidation, + editAlertBodyValidation, + deleteAlertParamValidation, +} = require("../validation/joi"); const SERVICE_NAME = "alerts"; +/** + * Creates an alert for a monitor + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {Promise} + * @throws {Error} + */ const createAlert = async (req, res, next) => { try { await createAlertParamValidation.validateAsync(req.params); - res - .status(200) - .json({ success: true, msg: "Create Alert", data: req.params.monitorId }); + await createAlertBodyValidation.validateAsync(req.body); + } catch (error) { + error.status = 422; + error.message = error.details[0].message; + error.service = SERVICE_NAME; + next(error); + return; + } + + try { + req.db.createAlert(req, res); } catch (error) { error.service = SERVICE_NAME; next(error); } }; -const getAlertsByUserId = (req, res, next) => { - res.status(200).json({ - success: true, - msg: "Get Alerts By UserID", - data: req.params.userId, - }); + +/** + * Gets all alerts for a user + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {Promise} + * @throws {Error} + */ +const getAlertsByUserId = async (req, res, next) => { + try { + await getAlertsByUserIdParamValidation.validateAsync(req.params); + } catch (error) { + error.status = 422; + error.message = error.details[0].message; + error.service = SERVICE_NAME; + next(error); + return; + } + + try { + req.db.getAlertsByUserId(req, res); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } }; -const getAlertsByMonitorId = (req, res, next) => { - res.status(200).json({ success: true, msg: "Get Alerts By MonitorID" }); + +const getAlertsByMonitorId = async (req, res, next) => { + try { + await getAlertsByMonitorIdParamValidation.validateAsync(req.params); + res.status(200).json({ + success: true, + msg: "Get Alerts By MonitorID", + data: req.params.monitorId, + }); + } catch (error) { + error.status = 422; + res.status(200).json({ success: true, msg: "Edit alert" }); + + error.message = error.details[0].message; + error.service = SERVICE_NAME; + next(error); + return; + } }; -const getAlertById = (req, res, next) => { - res.status(200).json({ success: true, msg: "Get Alert By alertID" }); +const getAlertById = async (req, res, next) => { + try { + await getAlertByIdParamValidation.validateAsync(req.params); + res.status(200).json({ + success: true, + msg: "Get Alert By alertID", + data: req.params.alertId, + }); + } catch (error) { + error.status = 422; + error.message = error.details[0].message; + error.service = SERVICE_NAME; + next(error); + return; + } }; -const editAlert = (req, res, next) => { - res.status(200).json({ success: true, msg: "Edit alert" }); +const editAlert = async (req, res, next) => { + try { + await editAlertParamValidation(req.params); + await editAlertBodyValidation(req.body); + res.status(200).json({ success: true, msg: "Edit alert" }); + } catch (error) { + error.status = 422; + error.message = error.details[0].message; + error.service = SERVICE_NAME; + next(error); + return; + } }; -const deleteAlert = (req, res, next) => { - res.status(200).json({ success: true, msg: "Delete alert" }); +const deleteAlert = async (req, res, next) => { + try { + await deleteAlertParamValidation(req.params); + res.status(200).json({ success: true, msg: "Delete alert" }); + } catch (error) { + error.status = 422; + error.message = error.details[0].message; + error.service = SERVICE_NAME; + next(error); + return; + } }; module.exports = { diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js index cc476ab54..257048937 100644 --- a/Server/controllers/authController.js +++ b/Server/controllers/authController.js @@ -17,7 +17,7 @@ const SERVICE_NAME = "auth"; * @returns {String} */ const issueToken = (payload) => { - return jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: "1h" }); + return jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: "99d" }); }; /** @@ -31,7 +31,7 @@ const registerController = async (req, res, next) => { try { await registerValidation.validateAsync(req.body); } catch (error) { - error.status = 400; + error.status = 422; error.service = SERVICE_NAME; error.message = error.details[0].message; next(error); diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index a4c9422a3..32d5d33f7 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -265,6 +265,123 @@ const deleteChecks = async (req, res) => { } }; +//**************************************** +// Alerts +//**************************************** + +/** + * Creates an Alert associated with a Monitor and User + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {>} + * @throws {Error} + */ +const createAlert = async (req, res) => { + try { + res + .status(200) + .json({ success: true, msg: "Create Alert", data: req.params.monitorId }); + } catch (error) { + throw error; + } +}; + +/** + * Gets all alerts a User has set + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {>} + * @throws {Error} + */ +const getAlertsByUserId = async (req, res) => { + try { + res.status(200).json({ + success: true, + msg: "Get Alerts By UserID", + data: req.params.userId, + }); + } catch (error) { + throw error; + } +}; + +/** + * Gets all alerts a for an associated Monitor + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {>} + * @throws {Error} + */ +const getAlertsByMonitorId = async (req, res) => { + try { + res.status(200).json({ + success: true, + msg: "Get Alerts By MonitorID", + data: req.params.monitorId, + }); + } catch (error) { + throw error; + } +}; + +/** + * Gets an alert with specified ID + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {Promise} + * @throws {Error} + */ +const getAlertById = async (req, res) => { + try { + res.status(200).json({ + success: true, + msg: "Get Alert By alertID", + data: req.params.alertId, + }); + } catch (error) { + throw error; + } +}; + +/** + * Returns an edited monitor with the specified ID + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {Promise>} + * @throws {Error} + */ +const editAlert = async (req, res) => { + try { + res + .status(200) + .json({ success: true, msg: "Edit alert", data: req.params.alertId }); + } catch (error) { + throw error; + } +}; + +/** + * Deletes a monitor with the specified ID + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @throws {Error} + */ +const deleteAlert = async (req, res) => { + try { + res + .status(200) + .json({ success: true, msg: "Delete alert", data: req.params.alertId }); + } catch (error) { + throw error; + } +}; + module.exports = { connect, insertUser, @@ -279,4 +396,10 @@ module.exports = { createCheck, getChecks, deleteChecks, + createAlert, + getAlertsByUserId, + getAlertsByMonitorId, + getAlertById, + editAlert, + deleteAlert, }; diff --git a/Server/validation/joi.js b/Server/validation/joi.js index 441e0ebc3..01a0d0ada 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -43,6 +43,43 @@ const createAlertParamValidation = joi.object({ monitorId: joi.string().required(), }); +const createAlertBodyValidation = joi.object({ + checkId: joi.string().required(), + monitorId: joi.string().required(), + userId: joi.string().required(), + status: joi.boolean(), + message: joi.string(), + notifiedStatus: joi.boolean(), + acknowledgeStatus: joi.boolean(), +}); + +const getAlertsByUserIdParamValidation = joi.object({ + userId: joi.string().required(), +}); + +const getAlertsByMonitorIdParamValidation = joi.object({ + monitorId: joi.string().required(), +}); + +const getAlertByIdParamValidation = joi.object({ + alertId: joi.string().required(), +}); + +const editAlertParamValidation = joi.object({ + alertId: joi.string().required(), +}); + +const editAlertBodyValidation = joi.object({ + status: joi.boolean(), + message: joi.string(), + notifiedStatus: joi.boolean(), + acknowledgeStatus: joi.boolean(), +}); + +const deleteAlertParamValidation = joi.object({ + alertId: joi.string().required(), +}); + module.exports = { loginValidation, registerValidation, @@ -52,4 +89,11 @@ module.exports = { editUserParamValidation, editUserBodyValidation, createAlertParamValidation, + createAlertBodyValidation, + getAlertsByUserIdParamValidation, + getAlertsByMonitorIdParamValidation, + getAlertByIdParamValidation, + editAlertParamValidation, + editAlertBodyValidation, + deleteAlertParamValidation, }; From 476b6ff6d81c5a0c82ad011a175107e0e33f4ecc Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 28 May 2024 13:18:32 -0700 Subject: [PATCH 09/34] Added routes to readme --- README.md | 209 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 199 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 2e1022c31..dfc57064d 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,13 @@ BlueWave uptime monitoring application - POST [/api/v1/checks/{monitorId}](#post-checks) - GET [/api/v1/checks/{monitorId}](#get-checks) - POST [/api/v1/checks/delete/{monitorId}](#delete-checks) + ###### Alerts + - POST [/api/v1/alerts/{monitorId}](#create-alert) + - GET [/api/v1/alerts/user/{userId}](#get-alerts-user-id) + - GET [/api/v1/alerts/monitor/{monitorId}](#get-alerts-monitor-id) + - GET [/api/v1/alerts/{alertId}](#get-alert-alert-id) + - POST [/api/v1/alerts/edit/{alertId}](#edit-alert) + - POST [/api/v1/alerts/delete/{alertId}](#delete-alert) 5. [Error Handling](#error-handling) 6. [Contributors](#contributors) @@ -333,9 +340,9 @@ curl --request POST \ ##### Response Payload -> | Type | Notes | -> | ---------------- | ----------------- | -> | `Array[Monitor]` | Array of monitors | +> | Type | Notes | +> | ---------------- | --------------------- | +> | `Array` | Array of all monitors | ###### Sample cURL Request @@ -439,9 +446,9 @@ curl --request GET \ ###### Response Payload -> | Type | Notes | -> | ---------------- | ------------------------------------------------------------------ | -> | `Array[Monitor]` | Array of monitors created by user with userId specified in request | +> | Type | Notes | +> | ---------------- | ------------------------------------------------------- | +> | `Array` | Array of monitors created by user with specified UserID | ###### Sample cURL Request @@ -499,9 +506,9 @@ curl --request GET \ ###### Response Payload -> | Type | Notes | -> | --------- | --------------------------------- | -> | `Monitor` | Newly created monitor is returned | +> | Type | Notes | +> | --------- | ------------------------------- | +> | `Monitor` | Returns newly created `Monitor` | ##### Sample CURL request @@ -681,7 +688,7 @@ curl --request POST \ > | Type | Notes | > | --------------- | ------------------------ | -> | `Array[Checks]` | Array of `Check` objects | +> | `Array` | Array of `Check` objects | ##### Sample CURL request @@ -730,6 +737,188 @@ curl --request POST \ --- +###### Alerts + +
+POST/api/v1/alerts/{monitorId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | POST | + +###### Response Payload + +> | Type | Notes | +> | ------- | ----------------------------- | +> | `Alert` | Returns newly created `Alert` | + +###### Body + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+ +
+GET/api/v1/alerts/user/{userId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | GET | + +###### Response Payload + +> | Type | Notes | +> | -------------- | --------------------------------------- | +> | `Array` | Returns all `Alert` created by a `User` | + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+
+GET/api/v1/alerts/monitor/{monitorId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | GET | + +###### Response Payload + +> | Type | Notes | +> | -------------- | -------------------------------------------------------------- | +> | `Array` | Returns an array of `Alert` belonging to a specified `Monitor` | + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+ +
+GET/api/v1/alerts/{alertId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | GET | + +###### Response Payload + +> | Type | Notes | +> | ------- | ------------------------- | +> | `Alert` | Returns specified `Alert` | + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+ +
+POST/api/v1/alerts/edit/{alertId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | POST | + +###### Response Payload + +> | Type | Notes | +> | ------- | -------------------- | +> | `Alert` | Returns edited alert | + +###### Body + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+
+POST/api/v1/alerts/delete/{alertId} + +###### Method/Headers + +> | Method/Headers | Value | +> | -------------- | ----- | +> | Method | POST | + +###### Response Payload + +> | Type | Notes | +> | ---- | ------------------- | +> | None | No payload returned | + +###### Body + +##### Sample CURL request + +``` + +``` + +###### Sample Response + +```json + +``` + +
+ +--- + ### Error handling {#error-handling} Errors are returned in a standard format: From aec859947bf747bd6c71baddae9e5ac9f5071d45 Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 28 May 2024 15:52:55 -0700 Subject: [PATCH 10/34] Deleted unnecessary Vite timestamp files. --- ...config.js.timestamp-1714807476723-44482001f0038.mjs | 10 ---------- ...config.js.timestamp-1714807479464-cc660fde72923.mjs | 10 ---------- ...config.js.timestamp-1714807482127-bba3249973ca6.mjs | 0 ...config.js.timestamp-1714807487371-43b917cc75e26.mjs | 10 ---------- ....config.js.timestamp-1714807494135-d5aa25dec011.mjs | 0 ...config.js.timestamp-1714807590920-36497efd2dbd1.mjs | 10 ---------- ...config.js.timestamp-1714807965878-e54134a7db9a9.mjs | 10 ---------- ...config.js.timestamp-1714807967318-789fa77657938.mjs | 10 ---------- 8 files changed, 60 deletions(-) delete mode 100644 Client/vite.config.js.timestamp-1714807476723-44482001f0038.mjs delete mode 100644 Client/vite.config.js.timestamp-1714807479464-cc660fde72923.mjs delete mode 100644 Client/vite.config.js.timestamp-1714807482127-bba3249973ca6.mjs delete mode 100644 Client/vite.config.js.timestamp-1714807487371-43b917cc75e26.mjs delete mode 100644 Client/vite.config.js.timestamp-1714807494135-d5aa25dec011.mjs delete mode 100644 Client/vite.config.js.timestamp-1714807590920-36497efd2dbd1.mjs delete mode 100644 Client/vite.config.js.timestamp-1714807965878-e54134a7db9a9.mjs delete mode 100644 Client/vite.config.js.timestamp-1714807967318-789fa77657938.mjs diff --git a/Client/vite.config.js.timestamp-1714807476723-44482001f0038.mjs b/Client/vite.config.js.timestamp-1714807476723-44482001f0038.mjs deleted file mode 100644 index f54c5cbfe..000000000 --- a/Client/vite.config.js.timestamp-1714807476723-44482001f0038.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.js -import { defineConfig } from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/vite/dist/node/index.js"; -import react from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJjOlxcXFxVc2Vyc1xcXFxjb3NtaVxcXFxPbmVEcml2ZVxcXFxEZXNrdG9wXFxcXEJsdWVXYXZlXFxcXFVwdGltZS1Nb25pdG9yXFxcXGJsdWV3YXZlLXVwdGltZVxcXFxDbGllbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcImM6XFxcXFVzZXJzXFxcXGNvc21pXFxcXE9uZURyaXZlXFxcXERlc2t0b3BcXFxcQmx1ZVdhdmVcXFxcVXB0aW1lLU1vbml0b3JcXFxcYmx1ZXdhdmUtdXB0aW1lXFxcXENsaWVudFxcXFx2aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vYzovVXNlcnMvY29zbWkvT25lRHJpdmUvRGVza3RvcC9CbHVlV2F2ZS9VcHRpbWUtTW9uaXRvci9ibHVld2F2ZS11cHRpbWUvQ2xpZW50L3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBOGEsU0FBUyxvQkFBb0I7QUFDM2MsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K diff --git a/Client/vite.config.js.timestamp-1714807479464-cc660fde72923.mjs b/Client/vite.config.js.timestamp-1714807479464-cc660fde72923.mjs deleted file mode 100644 index f54c5cbfe..000000000 --- a/Client/vite.config.js.timestamp-1714807479464-cc660fde72923.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.js -import { defineConfig } from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/vite/dist/node/index.js"; -import react from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJjOlxcXFxVc2Vyc1xcXFxjb3NtaVxcXFxPbmVEcml2ZVxcXFxEZXNrdG9wXFxcXEJsdWVXYXZlXFxcXFVwdGltZS1Nb25pdG9yXFxcXGJsdWV3YXZlLXVwdGltZVxcXFxDbGllbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcImM6XFxcXFVzZXJzXFxcXGNvc21pXFxcXE9uZURyaXZlXFxcXERlc2t0b3BcXFxcQmx1ZVdhdmVcXFxcVXB0aW1lLU1vbml0b3JcXFxcYmx1ZXdhdmUtdXB0aW1lXFxcXENsaWVudFxcXFx2aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vYzovVXNlcnMvY29zbWkvT25lRHJpdmUvRGVza3RvcC9CbHVlV2F2ZS9VcHRpbWUtTW9uaXRvci9ibHVld2F2ZS11cHRpbWUvQ2xpZW50L3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBOGEsU0FBUyxvQkFBb0I7QUFDM2MsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K diff --git a/Client/vite.config.js.timestamp-1714807482127-bba3249973ca6.mjs b/Client/vite.config.js.timestamp-1714807482127-bba3249973ca6.mjs deleted file mode 100644 index e69de29bb..000000000 diff --git a/Client/vite.config.js.timestamp-1714807487371-43b917cc75e26.mjs b/Client/vite.config.js.timestamp-1714807487371-43b917cc75e26.mjs deleted file mode 100644 index f54c5cbfe..000000000 --- a/Client/vite.config.js.timestamp-1714807487371-43b917cc75e26.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.js -import { defineConfig } from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/vite/dist/node/index.js"; -import react from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJjOlxcXFxVc2Vyc1xcXFxjb3NtaVxcXFxPbmVEcml2ZVxcXFxEZXNrdG9wXFxcXEJsdWVXYXZlXFxcXFVwdGltZS1Nb25pdG9yXFxcXGJsdWV3YXZlLXVwdGltZVxcXFxDbGllbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcImM6XFxcXFVzZXJzXFxcXGNvc21pXFxcXE9uZURyaXZlXFxcXERlc2t0b3BcXFxcQmx1ZVdhdmVcXFxcVXB0aW1lLU1vbml0b3JcXFxcYmx1ZXdhdmUtdXB0aW1lXFxcXENsaWVudFxcXFx2aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vYzovVXNlcnMvY29zbWkvT25lRHJpdmUvRGVza3RvcC9CbHVlV2F2ZS9VcHRpbWUtTW9uaXRvci9ibHVld2F2ZS11cHRpbWUvQ2xpZW50L3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBOGEsU0FBUyxvQkFBb0I7QUFDM2MsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K diff --git a/Client/vite.config.js.timestamp-1714807494135-d5aa25dec011.mjs b/Client/vite.config.js.timestamp-1714807494135-d5aa25dec011.mjs deleted file mode 100644 index e69de29bb..000000000 diff --git a/Client/vite.config.js.timestamp-1714807590920-36497efd2dbd1.mjs b/Client/vite.config.js.timestamp-1714807590920-36497efd2dbd1.mjs deleted file mode 100644 index f54c5cbfe..000000000 --- a/Client/vite.config.js.timestamp-1714807590920-36497efd2dbd1.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.js -import { defineConfig } from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/vite/dist/node/index.js"; -import react from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJjOlxcXFxVc2Vyc1xcXFxjb3NtaVxcXFxPbmVEcml2ZVxcXFxEZXNrdG9wXFxcXEJsdWVXYXZlXFxcXFVwdGltZS1Nb25pdG9yXFxcXGJsdWV3YXZlLXVwdGltZVxcXFxDbGllbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcImM6XFxcXFVzZXJzXFxcXGNvc21pXFxcXE9uZURyaXZlXFxcXERlc2t0b3BcXFxcQmx1ZVdhdmVcXFxcVXB0aW1lLU1vbml0b3JcXFxcYmx1ZXdhdmUtdXB0aW1lXFxcXENsaWVudFxcXFx2aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vYzovVXNlcnMvY29zbWkvT25lRHJpdmUvRGVza3RvcC9CbHVlV2F2ZS9VcHRpbWUtTW9uaXRvci9ibHVld2F2ZS11cHRpbWUvQ2xpZW50L3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBOGEsU0FBUyxvQkFBb0I7QUFDM2MsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K diff --git a/Client/vite.config.js.timestamp-1714807965878-e54134a7db9a9.mjs b/Client/vite.config.js.timestamp-1714807965878-e54134a7db9a9.mjs deleted file mode 100644 index f54c5cbfe..000000000 --- a/Client/vite.config.js.timestamp-1714807965878-e54134a7db9a9.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.js -import { defineConfig } from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/vite/dist/node/index.js"; -import react from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJjOlxcXFxVc2Vyc1xcXFxjb3NtaVxcXFxPbmVEcml2ZVxcXFxEZXNrdG9wXFxcXEJsdWVXYXZlXFxcXFVwdGltZS1Nb25pdG9yXFxcXGJsdWV3YXZlLXVwdGltZVxcXFxDbGllbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcImM6XFxcXFVzZXJzXFxcXGNvc21pXFxcXE9uZURyaXZlXFxcXERlc2t0b3BcXFxcQmx1ZVdhdmVcXFxcVXB0aW1lLU1vbml0b3JcXFxcYmx1ZXdhdmUtdXB0aW1lXFxcXENsaWVudFxcXFx2aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vYzovVXNlcnMvY29zbWkvT25lRHJpdmUvRGVza3RvcC9CbHVlV2F2ZS9VcHRpbWUtTW9uaXRvci9ibHVld2F2ZS11cHRpbWUvQ2xpZW50L3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBOGEsU0FBUyxvQkFBb0I7QUFDM2MsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K diff --git a/Client/vite.config.js.timestamp-1714807967318-789fa77657938.mjs b/Client/vite.config.js.timestamp-1714807967318-789fa77657938.mjs deleted file mode 100644 index f54c5cbfe..000000000 --- a/Client/vite.config.js.timestamp-1714807967318-789fa77657938.mjs +++ /dev/null @@ -1,10 +0,0 @@ -// vite.config.js -import { defineConfig } from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/vite/dist/node/index.js"; -import react from "file:///c:/Users/cosmi/OneDrive/Desktop/BlueWave/Uptime-Monitor/bluewave-uptime/Client/node_modules/@vitejs/plugin-react/dist/index.mjs"; -var vite_config_default = defineConfig({ - plugins: [react()] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJjOlxcXFxVc2Vyc1xcXFxjb3NtaVxcXFxPbmVEcml2ZVxcXFxEZXNrdG9wXFxcXEJsdWVXYXZlXFxcXFVwdGltZS1Nb25pdG9yXFxcXGJsdWV3YXZlLXVwdGltZVxcXFxDbGllbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcImM6XFxcXFVzZXJzXFxcXGNvc21pXFxcXE9uZURyaXZlXFxcXERlc2t0b3BcXFxcQmx1ZVdhdmVcXFxcVXB0aW1lLU1vbml0b3JcXFxcYmx1ZXdhdmUtdXB0aW1lXFxcXENsaWVudFxcXFx2aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vYzovVXNlcnMvY29zbWkvT25lRHJpdmUvRGVza3RvcC9CbHVlV2F2ZS9VcHRpbWUtTW9uaXRvci9ibHVld2F2ZS11cHRpbWUvQ2xpZW50L3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBOGEsU0FBUyxvQkFBb0I7QUFDM2MsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K From b34c411eadb7ebcc87876604825820ec6d7ed3e9 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 29 May 2024 11:08:59 +0330 Subject: [PATCH 11/34] Check email page --- Client/src/App.jsx | 2 + Client/src/Pages/CheckEmail/index.css | 102 ++++++++++++++++++++++++++ Client/src/Pages/CheckEmail/index.jsx | 58 +++++++++++++++ Client/src/assets/Images/email.png | Bin 0 -> 1729 bytes 4 files changed, 162 insertions(+) create mode 100644 Client/src/Pages/CheckEmail/index.css create mode 100644 Client/src/Pages/CheckEmail/index.jsx create mode 100644 Client/src/assets/Images/email.png diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 8d1cdf097..4b9bc086a 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -12,6 +12,7 @@ import Status from "./Pages/Status"; import Integrations from "./Pages/Integrations"; import Settings from "./Pages/Settings"; import ForgotPassword from "./Pages/ForgotPassword"; +import CheckEmail from "./Pages/CheckEmail"; function App() { return ( @@ -30,6 +31,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/Client/src/Pages/CheckEmail/index.css b/Client/src/Pages/CheckEmail/index.css new file mode 100644 index 000000000..db564e0ec --- /dev/null +++ b/Client/src/Pages/CheckEmail/index.css @@ -0,0 +1,102 @@ +:root { + --spacing-1: 15px; + --spacing-2: 20px; + --spacing-3: 25px; + --textfield-font-size: 13px; + + --check-email-page-width-1: 100vw; + --check-email-page-height-1: 100vh; + + --check-email-form-width-1: 360px; + --check-email-form-height-1: 526px; + + --logo-width-1: 20px; + --check-email-font-size-medium: 13px; + + --check-email-color-1: #101828; + --check-email-color-2: #1570ef; + --check-email-color-3: #475467; +} + +.check-email-page { + width: 100vw; + display: flex; + justify-content: center; + min-height: 100vh; +} + +.check-email-form { + width: 360px; + margin: 90px auto; +} + +.check-email-form-header { + justify-content: center; + align-items: center; + text-align: center; +} + +.check-email-v-gap-large { + height: 32px; +} + +.check-email-v-gap-medium { + height: 24px; +} + +.check-email-v-gap-small { + height: 12px; +} + +.check-email-form-heading { + font-size: 16px; + font-weight: 700; + color: var(--check-email-color-1); +} + +.check-email-form-subheading { + font-size: 13px; + font-weight: 400; + color: var(--check-email-color-3); +} + +.check-email-form-subheading span { + font-weight: 700; +} + +.check-email-body { + width: 360px; +} + +.check-email-resend { + font-size: 13px; + font-weight: 400; + color: var(--check-email-color-3); + text-align: center; + cursor: pointer; +} + +.check-email-resend span { + font-weight: 700; + color: var(--check-email-color-2); +} + +.check-email-back-button { + display: flex; + justify-content: center; + align-items: center; +} + +.check-email-back-button-img { + width: 20px; + height: 20px; + margin-right: 5px; + align-items: center; +} + +.check-email-back-button-text { + font-size: 13px; + font-weight: 500; + color: var(--check-email-color-3); + align-items: center; +} diff --git a/Client/src/Pages/CheckEmail/index.jsx b/Client/src/Pages/CheckEmail/index.jsx new file mode 100644 index 000000000..97cb2a5d9 --- /dev/null +++ b/Client/src/Pages/CheckEmail/index.jsx @@ -0,0 +1,58 @@ +import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern"; +import "./index.css"; +import React from "react"; +import EmailIcon from "../../assets/Images/email.png"; +import Button from "../../Components/Button"; +import LeftArrow from "../../assets/Images/arrow-left.png"; + +const CheckEmail = () => { + return ( +
+ +
+
+ EmailIcon +
+
Check your email
+
+
+ We sent a password reset link to username@email.com +
+
+
+
+
+
+
+ Didn’t receive the email? + Click to resend +
+
+
+ LeftArrow +
Back to log in
+
+
+
+ ); +}; + +export default CheckEmail; diff --git a/Client/src/assets/Images/email.png b/Client/src/assets/Images/email.png new file mode 100644 index 0000000000000000000000000000000000000000..40b1f823251460898fbe5f19bc1ebf527a325447 GIT binary patch literal 1729 zcmV;y20rG6U502Na+j2MUFX0y%kV_x;^A- zCZ__a8@V=&0xlrBKbB?Lp#n7UK_a)`@W+;2|0p6|Tha&6yX2D8emk=>!`U@a_YmQ6 zRQqw)k9!Ao(Ee8Fy-5P}-6rxrAgW>YvuMn>#opE;^= zeSQ6sroU6bn@35BqGkw7r&M`l{EucC{2||!6Hp#tTwq_gDC0M1wErn_;lyH2j^@fZ& z6k{0121c!nj@r~E6bVi^@F7vZi-5>PeS%^^;;j)!Y9%PAI+Rklm+L^&Zf9Ft#~ zI=OQgJo%}-ee-AQyC0})SiVtaqosm5+&w^aluLYk6w8UtIjD*Ct&O=n8=gvvhuv5@ z8`BYsKm{3jNFq-OAtP_iKpNA*Z>U&#H7TWE`h-jI1iT-)Yw}j*x|}qrOI(L4Uz4|A zVj%BPLa?k|l?F;l1s!=985@V$BBRocwDHVzi&`(0ZvcJ6H$#a)`W`7HoJ}OV9~iCX zIPG>a2Lf}QNSmd~_oDiU0t-C@12_(UzCelKLc4^M1N%!@)BEV?6iXYIq)YnTXY$sa z!=6FgBukZiH$9WEte{Lhv}^~v6%~0<5peQbo!o|H3ML zO(zEHWK{YfKs{$*#Kt3o#?r>+Im~&J0;!IlELk5r9}gml(DFEh(!TTwqA~;%cY+>> z+5drP1Yg1i?L=D1tMozOxs9Sor-T9e9^T`JX#kRVzR^;N1RgLxzQ5E+OMD#}d6{>E z-w?5Ua`d_2r)h~|r)jOA@TTL$(EGvB7lj`W7}PSwKq*LeL>Z4PG9FK2Wjw;LP===# z`H2A4wN%)Bp%|keASuJOjZ>EhGahW9-NdXkLc=d~N<9L}yA%>v32eYY=Vsxjrzj@) z6SxF1hkiI0+h~Px?-a5W4^zUu=qX`R3}`~xP1RgTGM;Y3z^ptBk{=GT99sLyARv*P zRxcppI4~+*D%IQfb>_4|SxjU2OD(lc#}4)`_7|#-WAaX(Jysg}ErcT5b(>?n|pfv4HtJ(T-|8?!@)8`jh^cAN!cFuMR-VwaG_{U{x zUupqVq44+>LG(kOmRPp`w81-SU1;vrs~_11H0QL%#g)tcPFklAHkX1!9U8l`vcl3m z%>8Edzt-vxSPgoav~QWgfw|Bzu?8BYQLWa$>Q&Ma*}rRB519*fut}Up#8|6sJzyhN z4R)5Fd9bk!cJe!RAlc5yM(`!Qw6t`kT6^^kkJ!f6>jKEjv$T0U*aYrOqHm9QV>|DS zo}d5y3f6)TC41-y@b1%zi3uI+ssh9>ofQbyg>Y zsypq0dIfDbH}>BD-*zs;d&2ib_XqC`)s?Slw3BsB_P^JT8h|9 Date: Wed, 29 May 2024 20:36:43 +0330 Subject: [PATCH 12/34] Some bugs --- Client/src/Components/DashboardProgressBars/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/DashboardProgressBars/index.jsx b/Client/src/Components/DashboardProgressBars/index.jsx index 8215a0d17..4326c8d97 100644 --- a/Client/src/Components/DashboardProgressBars/index.jsx +++ b/Client/src/Components/DashboardProgressBars/index.jsx @@ -1,4 +1,4 @@ -import { BarChart } from '@mui/x-charts/BarChart'; +// import { BarChart } from '@mui/x-charts/BarChart'; const ChartsOverviewDemo = () => { return ( @@ -10,7 +10,7 @@ const ChartsOverviewDemo = () => { { data: [60, 50, 15, 25] }, ]} height={290} - xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]} + xAxis={[{ data: ["Q1", "Q2", "Q3", "Q4"], scaleType: "band" }]} margin={{ top: 10, bottom: 30, left: 40, right: 10 }} /> ); From 6437e8e9bf54b55a4e51151e77c75b67e89bf6d9 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 29 May 2024 10:59:29 -0700 Subject: [PATCH 13/34] implemented DB operations for Checks --- Server/controllers/checkController.js | 62 +++++++++++++++++++++++---- Server/db/MongoDB.js | 48 +++++++++++---------- Server/validation/joi.js | 58 +++++++++++++++++++++---- 3 files changed, 127 insertions(+), 41 deletions(-) diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js index ef1a1a071..7734da45b 100644 --- a/Server/controllers/checkController.js +++ b/Server/controllers/checkController.js @@ -1,29 +1,73 @@ -var jwt = require("jsonwebtoken"); +const { + createCheckParamValidation, + createCheckBodyValidation, + getChecksParamValidation, + deleteChecksParamValidation, +} = require("../validation/joi"); const SERVICE_NAME = "check"; -const createCheck = (req, res, next) => { +const createCheck = async (req, res, next) => { try { - req.db.createCheck(req, res); + await createCheckParamValidation.validateAsync(req.params); + await createCheckBodyValidation.validateAsync(req.body); + } catch (error) { + error.status = 422; + error.service = SERVICE_NAME; + error.message = error.details[0].message; + next(error); + return; + } + + try { + const checkData = { ...req.body }; + const check = await req.db.createCheck(checkData); + return res + .status(200) + .json({ success: true, msg: "Check created", data: check }); } catch (error) { error.service = SERVICE_NAME; next(error); } }; -const getChecks = (req, res, next) => { +const getChecks = async (req, res, next) => { try { - req.db.getChecks(req, res); - // Return all checks for a monitor + await getChecksParamValidation.validateAsync(req.params); + } catch (error) { + error.status = 422; + error.service = SERVICE_NAME; + error.message = error.details[0].message; + next(error); + return; + } + + try { + const checks = await req.db.getChecks(req.params.monitorId); + return res + .status(200) + .json({ success: true, msg: "Checks retrieved", data: checks }); } catch (error) { error.service = SERVICE_NAME; next(error); } }; -const deleteChecks = (req, res, next) => { +const deleteChecks = async (req, res, next) => { try { - req.db.deleteChecks(req, res); - // Delete all checks for a monitor + await deleteChecksParamValidation.validateAsync(req.params); + } catch (error) { + error.status = 422; + error.service = SERVICE_NAME; + error.message = error.details[0].message; + next(error); + return; + } + + try { + const deletedCount = await req.db.deleteChecks(req.params.monitorId); + return res + .status(200) + .json({ success: true, msg: "Checks deleted", data: { deletedCount } }); } catch (error) { error.service = SERVICE_NAME; next(error); diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index 32d5d33f7..cc73f060d 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -1,6 +1,7 @@ const Monitor = require("../models/Monitor"); const mongoose = require("mongoose"); const UserModel = require("../models/user"); +const Check = require("../models/Check"); const verifyId = (userId, monitorId) => { return userId.toString() === monitorId.toString(); @@ -209,17 +210,20 @@ const editMonitor = async (req, res) => { /** * Create a check for a monitor * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {Object} checkData + * @param {string} checkData.monitorId + * @param {boolean} checkData.status + * @param {number} checkData.responseTime + * @param {number} checkData.statusCode + * @param {string} checkData.message + * @returns {Promise} * @throws {Error} */ -const createCheck = async (req, res) => { +const createCheck = async (checkData) => { try { - // Create check with monitor id - res - .status(200) - .json({ success: true, msg: "Create check", data: req.params.monitorId }); + const check = await new Check({ ...checkData }).save(); + return check; } catch (error) { throw error; } @@ -228,17 +232,15 @@ const createCheck = async (req, res) => { /** * Get all checks for a monitor * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {string} monitorId + * @returns {Promise>} * @throws {Error} */ -const getChecks = async (req, res) => { +const getChecks = async (monitorId) => { try { - // TODO get all checks for a monitor from DB - res - .status(200) - .json({ success: true, msg: "Get checks", data: req.params.monitorId }); + const checks = await Check.find({ monitorId }); + return checks; } catch (error) { throw error; } @@ -247,19 +249,19 @@ const getChecks = async (req, res) => { /** * Delete all checks for a monitor * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {string} monitorId + * @returns {boolean} * @throws {Error} */ -const deleteChecks = async (req, res) => { +const deleteChecks = async (monitorId) => { try { - // TODO Delete all checks for a monitor - res.status(200).json({ - success: true, - msg: "Deleted checks", - data: req.params.monitorId, - }); + const result = await Check.deleteMany({ monitorId }); + if (result.deletedCount > 0) { + return result.deletedCount; + } else { + throw new Error(`No checks found for monitor with id ${monitorId}`); + } } catch (error) { throw error; } diff --git a/Server/validation/joi.js b/Server/validation/joi.js index 01a0d0ada..75cd48cd1 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -1,5 +1,9 @@ const joi = require("joi"); +//**************************************** +// Auth +//**************************************** + const loginValidation = joi.object({ email: joi.string().email().required(), password: joi.string().min(8).required(), @@ -11,6 +15,20 @@ const registerValidation = joi.object({ password: joi.string().min(8).required(), }); +const editUserParamValidation = joi.object({ + userId: joi.string().required(), +}); + +const editUserBodyValidation = joi.object({ + firstname: joi.string(), + lastname: joi.string(), + profilePicUrl: joi.string(), +}); + +//**************************************** +// Monitors +//**************************************** + const getMonitorByIdValidation = joi.object({ monitorId: joi.string().required(), }); @@ -29,15 +47,9 @@ const monitorValidation = joi.object({ interval: joi.number(), }); -const editUserParamValidation = joi.object({ - userId: joi.string().required(), -}); - -const editUserBodyValidation = joi.object({ - firstname: joi.string(), - lastname: joi.string(), - profilePicUrl: joi.string(), -}); +//**************************************** +// Alerts +//**************************************** const createAlertParamValidation = joi.object({ monitorId: joi.string().required(), @@ -80,6 +92,30 @@ const deleteAlertParamValidation = joi.object({ alertId: joi.string().required(), }); +//**************************************** +// Checks +//**************************************** + +const createCheckParamValidation = joi.object({ + monitorId: joi.string().required(), +}); + +const createCheckBodyValidation = joi.object({ + monitorId: joi.string().required(), + status: joi.boolean().required(), + responseTime: joi.number().required(), + statusCode: joi.number().required(), + message: joi.string().required(), +}); + +const getChecksParamValidation = joi.object({ + monitorId: joi.string().required(), +}); + +const deleteChecksParamValidation = joi.object({ + monitorId: joi.string().required(), +}); + module.exports = { loginValidation, registerValidation, @@ -96,4 +132,8 @@ module.exports = { editAlertParamValidation, editAlertBodyValidation, deleteAlertParamValidation, + createCheckParamValidation, + createCheckBodyValidation, + getChecksParamValidation, + deleteChecksParamValidation, }; From 247153a133cf90bf9f25351f7858a5fcc9a5f14a Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 29 May 2024 11:07:17 -0700 Subject: [PATCH 14/34] Updated readme --- README.md | 97 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 82 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index dfc57064d..80c950307 100644 --- a/README.md +++ b/README.md @@ -655,22 +655,54 @@ curl --request POST \ ###### Response Payload -> | Type | Notes | -> | ---- | ------------------- | -> | None | No payload returned | +> | Type | Notes | +> | ------- | --------------------------- | +> | `Check` | Returns newly created check | ###### Body +> | Name | Type | Notes | +> | ------------ | --------- | -------------------------------------- | +> | monitorId | `string` | Monitor associated with Check | +> | status | `boolean` | `true` for up and `false` for down | +> | responseTime | `number` | How long it took the server to respond | +> | statusCode | `number` | HTTP Status code of response | +> | message | `string` | | + ##### Sample CURL request ``` - +curl --request POST \ + --url http://localhost:5000/api/v1/checks/66562414035c4ce6a8a610ac \ + --header 'Authorization: ' \ + --header 'Content-Type: application/json' \ + --data '{ + "monitorId": "66562414035c4ce6a8a610ac", + "status": true, + "responseTime": 1, + "statusCode": 200, + "message": "good" +}' ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Check created", + "data": { + "monitorId": "66562414035c4ce6a8a610ac", + "status": true, + "responseTime": 1, + "statusCode": 200, + "message": "good", + "_id": "66576decba9f70148ea1f354", + "createdAt": "2024-05-29T18:03:24.445Z", + "updatedAt": "2024-05-29T18:03:24.445Z", + "__v": 0 + } +} ```
@@ -682,7 +714,7 @@ curl --request POST \ > | Method/Headers | Value | > | -------------- | ----- | -> | Method | POST | +> | Method | GET | ###### Response Payload @@ -693,13 +725,42 @@ curl --request POST \ ##### Sample CURL request ``` - +curl --request GET \ + --url http://localhost:5000/api/v1/checks/66562414035c4ce6a8a610ac \ + --header 'Authorization: ' \ ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Checks retrieved", + "data": [ + { + "_id": "66576c0194e11c0d4409d3c1", + "monitorId": "66562414035c4ce6a8a610ac", + "status": true, + "responseTime": 1, + "statusCode": 200, + "message": "good", + "createdAt": "2024-05-29T17:55:13.581Z", + "updatedAt": "2024-05-29T17:55:13.581Z", + "__v": 0 + }, + { + "_id": "66576c0994e11c0d4409d3c5", + "monitorId": "66562414035c4ce6a8a610ac", + "status": true, + "responseTime": 2, + "statusCode": 200, + "message": "good", + "createdAt": "2024-05-29T17:55:21.127Z", + "updatedAt": "2024-05-29T17:55:21.127Z", + "__v": 0 + } + ] +} ```
@@ -715,22 +776,28 @@ curl --request POST \ ###### Response Payload -> | Type | Notes | -> | ---- | ------------------- | -> | None | No payload returned | - -###### Body +> | Type | Notes | +> | -------- | -------------------------------------------------------------------- | +> | `Object` | `{deletedCount: n}` Returns an object showing how many items deleted | ##### Sample CURL request ``` - +curl --request POST \ + --url http://localhost:5000/api/v1/checks/delete/66562414035c4ce6a8a610ac \ + --header 'Authorization: ' \ ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Checks deleted", + "data": { + "deletedCount": 3 + } +} ``` From 76e861a1dd92ceff06de1037c74fde73424208cc Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 29 May 2024 22:11:16 +0330 Subject: [PATCH 15/34] set new password page --- Client/src/App.jsx | 2 + Client/src/Pages/SetNewPassword/index.css | 83 ++++++++++++++++++++++ Client/src/Pages/SetNewPassword/index.jsx | 77 ++++++++++++++++++++ Client/src/assets/Images/lock-icon.png | Bin 0 -> 1724 bytes 4 files changed, 162 insertions(+) create mode 100644 Client/src/Pages/SetNewPassword/index.css create mode 100644 Client/src/Pages/SetNewPassword/index.jsx create mode 100644 Client/src/assets/Images/lock-icon.png diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 4b9bc086a..0584ebf26 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -13,6 +13,7 @@ import Integrations from "./Pages/Integrations"; import Settings from "./Pages/Settings"; import ForgotPassword from "./Pages/ForgotPassword"; import CheckEmail from "./Pages/CheckEmail"; +import SetNewPassword from "./Pages/SetNewPassword"; function App() { return ( @@ -32,6 +33,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/Client/src/Pages/SetNewPassword/index.css b/Client/src/Pages/SetNewPassword/index.css new file mode 100644 index 000000000..1eb504aad --- /dev/null +++ b/Client/src/Pages/SetNewPassword/index.css @@ -0,0 +1,83 @@ +:root { + --set-new-password-page-width-1: 100vw; + --set-new-password-page-height-1: 100vh; + + --set-new-password-form-width-1: 360px; + --set-new-password-form-height-1: 526px; + + --set-new-password-logo-width-1: 20px; + --set-new-password-font-size-medium: 13px; + + --set-new-password-color-1: #101828; + --set-new-password-color-2: #1570ef; + --set-new-password-color-3: #475467; +} + +.set-new-password-page { + width: var(--set-new-password-page-width-1); + display: flex; + justify-content: center; + min-height: var(--set-new-password-page-height-1); +} + +.set-new-password-form { + width: var(--set-new-password-form-width-1); + min-height: var(--set-new-password-form-height-1); + margin: 90px auto; +} + +.set-new-password-form-header { + justify-content: center; + align-items: center; + text-align: center; +} + +.set-new-password-form-gap-large { + height: 32px; +} + +.set-new-password-form-gap-medium { + height: 24px; +} + +.set-new-password-form-gap-small-medium { + height: 20px; +} + +.set-new-password-form-gap-small { + height: 12px; +} + +.set-new-password-form-heading { + font-size: 16px; + color: #101828; + font-weight: 700; +} + +.set-new-password-form-subheading { + font-size: 13px; + color: var(--set-new-password-color-3); + font-weight: 600; +} + +.set-new-password-back-button { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.set-new-password-back-button-img { + width: 20px; + height: 20px; + margin-right: 5px; + align-items: center; +} + +.set-new-password-back-button-text { + height: 20px; + font-size: 13px; + color: var(--set-new-password-color-3); + font-weight: 600; + align-items: center; +} diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx new file mode 100644 index 000000000..5f718f666 --- /dev/null +++ b/Client/src/Pages/SetNewPassword/index.jsx @@ -0,0 +1,77 @@ +import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern"; +import "./index.css"; +import React from "react"; +import LockIcon from "../../assets/Images/lock-icon.png"; +import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField"; +import Check from "../../Components/Check/Check"; +import Button from "../../Components/Button"; +import LeftArrow from "../../assets/Images/arrow-left.png"; + +const SetNewPassword = () => { + return ( +
+ +
+
+ LockIcon +
+
Set new password
+
+
+ Your new password must be different to previously used passwords. +
+
+
+
+ +
+ +
+
+ +
+ +
+
+
+
+
+ LeftArrow +
+ Back to log in +
+
+
+
+ ); +}; + +export default SetNewPassword; diff --git a/Client/src/assets/Images/lock-icon.png b/Client/src/assets/Images/lock-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..163adad87ac1ede49e4e12457bf227dd5fdb22f6 GIT binary patch literal 1724 zcmV;t21EIYP)GrLw5q)LW{^wzjaPOc)1+?>07fq>Ln>Mit;L)8N$U%=2W09B4XKyH=X1L`4H zmRwVWDF{`fl9&F$HpW@g263==r|<3V7(=kVkXdA#pR}Iw&g^)8^WMC9^L7kyb+F*- zRNn1=w>BU|`K1u1F}Al?iw_Nn83AAj1_=i2F7yBxgPP-tP0nE@hS%`$u+{aMPKBjX z=~J$Ku!Jp-fndvAXQl?R{P6ItJ?H`0_6ZJrBT;wUX#v8}81|35^I?de2Rk^hXAi2i zLb-aBEfnlH^Z_c^*Mq~FUBbR!<~dfb*mLE>TA^696VPX%K2zU`1B98fB-wr?DGW zYee4TLCRc+P2u`#!TUH8F^0<23^x8nZ}o4z`%sN#yI~%2;r%1E$FmmBM0E3t>*l%=Ff8w5lF&!Za+cc<{TMf;ZYGLvd5sWqE4lPTP9w4yhy4> za1rtiXiVfIkhV`a9>Z)SQ0eHb)-l8uP<2yyS)B3d*Q>d;mg4!8@pVE2XO&?c4YUQk z_YFh>18A%{M2OFguM8xL;TMcOfirQAtcSe$ljVRmf!P}R^3(JTL;}+@%0w75Ifw#C z;IW?*E2yegyLv<#lf~fcBt(N#Upf=fLX6T)ct65IZAzr{4Tu1SVR)%WI2Vn8kuXb8 z8e@*tt*+d-;2=d3FvPXbQ)y|H$x1satu$HZ{~)%3#)#tBvkt&fr~2F{N(RotwRv3S z+U#5DDYVk2BdxU3

SW>|5NPus~W!Vlk|B#KB1%gSLTfyimI~k9rbT?rC91=P;3R zFbj5KL%I z&SIO(Dx47{>mkrIHC77^Pb#p?=2giO0;!UApnDWcfD)Xp!^+TNVLM8M3>tKYMISD> zW1t4jb(pDgEd}tn-*V?Ui|*#eL*vUr=iV{ZK6Uh-R{LKT3AsjJHzM_=dkcoQGn7{P zx}zN!f)J`zwhKI?B?1X&l<$K(p#l0h?w-aw)sY5J)m)a_1>I{C)P!l#J+vsr`I+ie zFW4P*gHM>LA&mQl);AA3N+gUCi+qqxJv1^YxFUjQ4a(O=eG}B+%;rH^Obfjv@{r__ zgB9={h|plZ1)l<6!i(sHJcaiJZ63b+_KBX$<(xpJv&xJXbr4BYmPk(pS7?aSSGh{a zo=4C+#if5#8pNYm6$fXMUvhto&WnZ5Y@%y=Db47F)~IE0>*fUFm2MvT0g=YEdI^%_ zjd3k=xk~G~&MdzvbC}@0YAGMumVb6}uu!z^1fApw-VZnDFk=EN$Ejc0JL*;F4M?~` zptqJg-47>|IZFJHbICD9k`{x~@s7IY$bYwOQ@0B1H2 zAeNS%zX25ekjrOaKtLyI9n{jOEw%?2~X17+uQex-%j6>Pq)GG+z~|{r6g@0Z`c%Ystd}c?fa8EB*)9s1H3r ST6cW_0000 Date: Wed, 29 May 2024 12:12:56 -0700 Subject: [PATCH 16/34] Added alert DB operations --- Server/controllers/alertController.js | 84 +++++++++++++++++----- Server/db/MongoDB.js | 100 +++++++++++++------------- 2 files changed, 117 insertions(+), 67 deletions(-) diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js index 91bb56971..f0c3df5dd 100644 --- a/Server/controllers/alertController.js +++ b/Server/controllers/alertController.js @@ -11,6 +11,7 @@ const { editAlertBodyValidation, deleteAlertParamValidation, } = require("../validation/joi"); +const { get } = require("mongoose"); const SERVICE_NAME = "alerts"; @@ -35,7 +36,11 @@ const createAlert = async (req, res, next) => { } try { - req.db.createAlert(req, res); + const alertData = { ...req.body }; + const alert = await req.db.createAlert(alertData); + return res + .status(200) + .json({ success: true, msg: "Alert created", data: alert }); } catch (error) { error.service = SERVICE_NAME; next(error); @@ -62,7 +67,10 @@ const getAlertsByUserId = async (req, res, next) => { } try { - req.db.getAlertsByUserId(req, res); + const alerts = await req.db.getAlertsByUserId(req.params.userId); + return res + .status(200) + .json({ success: true, msg: "Got alerts", data: alerts }); } catch (error) { error.service = SERVICE_NAME; next(error); @@ -72,29 +80,30 @@ const getAlertsByUserId = async (req, res, next) => { const getAlertsByMonitorId = async (req, res, next) => { try { await getAlertsByMonitorIdParamValidation.validateAsync(req.params); - res.status(200).json({ - success: true, - msg: "Get Alerts By MonitorID", - data: req.params.monitorId, - }); } catch (error) { error.status = 422; - res.status(200).json({ success: true, msg: "Edit alert" }); - error.message = error.details[0].message; error.service = SERVICE_NAME; next(error); return; } + + try { + const alerts = await req.db.getAlertsByMonitorId(req.params.monitorId); + return res.status(200).json({ + success: true, + msg: "Got alerts by Monitor", + data: alerts, + }); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } }; + const getAlertById = async (req, res, next) => { try { await getAlertByIdParamValidation.validateAsync(req.params); - res.status(200).json({ - success: true, - msg: "Get Alert By alertID", - data: req.params.alertId, - }); } catch (error) { error.status = 422; error.message = error.details[0].message; @@ -102,24 +111,49 @@ const getAlertById = async (req, res, next) => { next(error); return; } + + try { + const alert = await req.db.getAlertById(req.params.alertId); + return res.status(200).json({ + success: true, + msg: "Got Alert By alertID", + data: alert, + }); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } }; + const editAlert = async (req, res, next) => { try { - await editAlertParamValidation(req.params); - await editAlertBodyValidation(req.body); - res.status(200).json({ success: true, msg: "Edit alert" }); + await editAlertParamValidation.validateAsync(req.params); + await editAlertBodyValidation.validateAsync(req.body); } catch (error) { + console.log(error); error.status = 422; error.message = error.details[0].message; error.service = SERVICE_NAME; next(error); return; } + + try { + const alertData = { ...req.body }; + const alert = await req.db.editAlert(req.params.alertId, alertData); + return res.status(200).json({ + success: true, + msg: "Edited alert", + data: alert, + }); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } }; const deleteAlert = async (req, res, next) => { try { - await deleteAlertParamValidation(req.params); - res.status(200).json({ success: true, msg: "Delete alert" }); + await deleteAlertParamValidation.validateAsync(req.params); } catch (error) { error.status = 422; error.message = error.details[0].message; @@ -127,6 +161,18 @@ const deleteAlert = async (req, res, next) => { next(error); return; } + + try { + const deleted = await req.db.deleteAlert(req.params.alertId); + return res.status(200).json({ + success: true, + msg: "Deleted alert", + data: deleted, + }); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + } }; module.exports = { diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index cc73f060d..f8ea2bead 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -2,6 +2,7 @@ const Monitor = require("../models/Monitor"); const mongoose = require("mongoose"); const UserModel = require("../models/user"); const Check = require("../models/Check"); +const Alert = require("../models/Alert"); const verifyId = (userId, monitorId) => { return userId.toString() === monitorId.toString(); @@ -60,10 +61,6 @@ const getUserByEmail = async (req, res) => { } }; -//**************************************** -// Monitors -//**************************************** - /** * Update a user by ID * @async @@ -89,6 +86,10 @@ const updateUser = async (req, res) => { } }; +//**************************************** +// Monitors +//**************************************** + /** * Get all monitors * @async @@ -222,6 +223,7 @@ const editMonitor = async (req, res) => { const createCheck = async (checkData) => { try { + console.log(checkData); const check = await new Check({ ...checkData }).save(); return check; } catch (error) { @@ -274,16 +276,21 @@ const deleteChecks = async (monitorId) => { /** * Creates an Alert associated with a Monitor and User * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {Object} alertData + * @param {string} alertData.checkId + * @param {string} alert.monitorId + * @param {string} alert.userId + * @param {boolean} alert.status + * @param {string} alert.message + * @param {boolean} alert.notifiedStatus + * @param {boolean} alert.acknowledgeStatus * @returns {>} * @throws {Error} */ -const createAlert = async (req, res) => { +const createAlert = async (alertData) => { try { - res - .status(200) - .json({ success: true, msg: "Create Alert", data: req.params.monitorId }); + const alert = await new Alert({ ...alertData }).save(); + return alert; } catch (error) { throw error; } @@ -292,18 +299,14 @@ const createAlert = async (req, res) => { /** * Gets all alerts a User has set * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {string} userId * @returns {>} * @throws {Error} */ -const getAlertsByUserId = async (req, res) => { +const getAlertsByUserId = async (userId) => { try { - res.status(200).json({ - success: true, - msg: "Get Alerts By UserID", - data: req.params.userId, - }); + const alerts = await Alert.find({ userId }); + return alerts; } catch (error) { throw error; } @@ -312,73 +315,74 @@ const getAlertsByUserId = async (req, res) => { /** * Gets all alerts a for an associated Monitor * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {string} monitorId * @returns {>} * @throws {Error} */ -const getAlertsByMonitorId = async (req, res) => { +const getAlertsByMonitorId = async (monitorId) => { try { - res.status(200).json({ - success: true, - msg: "Get Alerts By MonitorID", - data: req.params.monitorId, - }); + const alerts = await Alert.find({ monitorId }); + return alerts; } catch (error) { throw error; } }; /** - * Gets an alert with specified ID + * Returns an alert with specified ID * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {string} alertId * @returns {Promise} * @throws {Error} */ -const getAlertById = async (req, res) => { +const getAlertById = async (alertId) => { try { - res.status(200).json({ - success: true, - msg: "Get Alert By alertID", - data: req.params.alertId, - }); + const alert = await Alert.findById(alertId); + return alert; } catch (error) { throw error; } }; /** - * Returns an edited monitor with the specified ID + * Returns an edited alert with the specified ID * @async - * @param {Express.Request} req + * @param {string} alertId + * @param {Object} alertData + * @param {string} alertData.checkId + * @param {string} alertData.monitorId + * @param {string} alertData.userId + * @param {boolean} alertData.status + * @param {string} alertData.message + * @param {boolean} alertData.notifiedStatus + * @param {boolean} alertData.acknowledgeStatus * @param {Express.Response} res * @returns {Promise>} * @throws {Error} */ -const editAlert = async (req, res) => { +const editAlert = async (alertId, alertData) => { try { - res - .status(200) - .json({ success: true, msg: "Edit alert", data: req.params.alertId }); + const editedAlert = await Alert.findByIdAndUpdate(alertId, alertData, { + new: true, + }); + return editedAlert; } catch (error) { throw error; } }; /** - * Deletes a monitor with the specified ID + * Deletes an alert with the specified ID * @async - * @param {Express.Request} req - * @param {Express.Response} res + * @param {string} alertId * @throws {Error} */ -const deleteAlert = async (req, res) => { +const deleteAlert = async (alertId) => { try { - res - .status(200) - .json({ success: true, msg: "Delete alert", data: req.params.alertId }); + const result = await Alert.findByIdAndDelete(alertId); + if (result) { + return result; + } else throw new Error(`Alert with id ${alertId} not found`); } catch (error) { throw error; } From 5fc4b018f98474e7e5d8cfad07b872d73f37d6e3 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 29 May 2024 12:15:59 -0700 Subject: [PATCH 17/34] Fixed return type for deleteChecks --- Server/db/MongoDB.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index cc73f060d..a410e7dfa 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -250,7 +250,7 @@ const getChecks = async (monitorId) => { * Delete all checks for a monitor * @async * @param {string} monitorId - * @returns {boolean} + * @returns {number} * @throws {Error} */ From c6f0fcb13a1eec7ae2d22b0c4ff49cec3e6b5389 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 29 May 2024 12:30:13 -0700 Subject: [PATCH 18/34] Updated documentation --- README.md | 160 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 142 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 80c950307..ff5190652 100644 --- a/README.md +++ b/README.md @@ -823,6 +823,24 @@ curl --request POST \ ###### Body + "checkId": "66577a3fd16dcf7c1ce35148", + "monitorId": "6657789ebf6766ee8e2d2edb", + "userId": "6654d1a2634754f789e1f115", + "status": false, + "message": "This is a test alert", + "notifiedStatus": "false", + "acknowledgeStatus": false + +> | Name | Type | Notes | +> | ----------------- | --------- | --------------------------------------- | +> | checkId | `string` | Id of `Check` associated with `Alert` | +> | monitorId | `string` | Id of `Monitor` associated with `Alert` | +> | userId | `string` | Id of `User` associated with `Alert` | +> | status | `boolean` | Status of `Alert` | +> | message | `string` | `Alert` message | +> | notifiedStatus | `boolean` | | +> | acknowledgeStatus | `boolean` | | + ##### Sample CURL request ``` @@ -855,13 +873,33 @@ curl --request POST \ ##### Sample CURL request ``` - +curl --request GET \ + --url http://localhost:5000/api/v1/alerts/user/6654d1a2634754f789e1f115 \ + --header 'Authorization: ' ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Got alerts", + "data": [ + { + "_id": "6657813d809adfded891a6b7", + "checkId": "66577a3fd16dcf7c1ce35148", + "monitorId": "6657789ebf6766ee8e2d2edb", + "userId": "6654d1a2634754f789e1f115", + "status": false, + "message": "This is a test alert", + "notifiedStatus": false, + "acknowledgeStatus": false, + "createdAt": "2024-05-29T19:25:49.317Z", + "updatedAt": "2024-05-29T19:25:49.317Z", + "__v": 0 + } + ] +} ``` @@ -883,13 +921,33 @@ curl --request POST \ ##### Sample CURL request ``` - +curl --request GET \ + --url http://localhost:5000/api/v1/alerts/monitor/6657789ebf6766ee8e2d2edb \ + --header 'Authorization: ' \ ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Got alerts by Monitor", + "data": [ + { + "_id": "6657813d809adfded891a6b7", + "checkId": "66577a3fd16dcf7c1ce35148", + "monitorId": "6657789ebf6766ee8e2d2edb", + "userId": "6654d1a2634754f789e1f115", + "status": false, + "message": "This is a test alert", + "notifiedStatus": false, + "acknowledgeStatus": false, + "createdAt": "2024-05-29T19:25:49.317Z", + "updatedAt": "2024-05-29T19:25:49.317Z", + "__v": 0 + } + ] +} ``` @@ -912,13 +970,31 @@ curl --request POST \ ##### Sample CURL request ``` - +curl --request GET \ + --url http://localhost:5000/api/v1/alerts/66577ddae5ff3c91437d0887 \ + --header 'Authorization: ' \ ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Got Alert By alertID", + "data": { + "_id": "66577ddae5ff3c91437d0887", + "checkId": "66577a3fd16dcf7c1ce35148", + "monitorId": "6657789ebf6766ee8e2d2edb", + "userId": "6654d1a2634754f789e1f115", + "status": false, + "message": "This is a test alert", + "notifiedStatus": false, + "acknowledgeStatus": false, + "createdAt": "2024-05-29T19:11:22.205Z", + "updatedAt": "2024-05-29T19:11:22.205Z", + "__v": 0 + } +} ``` @@ -934,22 +1010,54 @@ curl --request POST \ ###### Response Payload -> | Type | Notes | -> | ------- | -------------------- | -> | `Alert` | Returns edited alert | +> | Type | Notes | +> | ------- | ---------------------- | +> | `Alert` | Returns edited `Alert` | ###### Body +> | Name | Type | Notes | +> | ----------------- | --------- | ------------------------------------------ | +> | checkId | `string` | ID of `Check` associated with `Alert` | +> | monitorId | `string` | ID of `Monitor` id associated with `Alert` | +> | userId | `string` | ID of `User` associated with `Alert` | +> | status | `boolean` | Alert status | +> | message | `string` | Alert message | +> | notifiedStatus | `boolean` | | +> | acknowledgeStatus | `boolean` | | + ##### Sample CURL request ``` - +curl --request POST \ + --url http://localhost:5000/api/v1/alerts/edit/66577ddae5ff3c91437d0887 \ + --header 'Authorization: ' \ + --header 'Content-Type: application/json' \ + --data '{ + "acknowledgeStatus": true +}' ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Edited alert", + "data": { + "_id": "66577ddae5ff3c91437d0887", + "checkId": "66577a3fd16dcf7c1ce35148", + "monitorId": "6657789ebf6766ee8e2d2edb", + "userId": "6654d1a2634754f789e1f115", + "status": false, + "message": "This is a test alert", + "notifiedStatus": false, + "acknowledgeStatus": true, + "createdAt": "2024-05-29T19:11:22.205Z", + "updatedAt": "2024-05-29T19:12:23.951Z", + "__v": 0 + } +} ``` @@ -964,22 +1072,38 @@ curl --request POST \ ###### Response Payload -> | Type | Notes | -> | ---- | ------------------- | -> | None | No payload returned | - -###### Body +> | Type | Notes | +> | ------- | --------------------------- | +> | `Alert` | Returns the deleted `Alert` | ##### Sample CURL request ``` - +curl --request POST \ + --url http://localhost:5000/api/v1/alerts/delete/66577ddae5ff3c91437d0887 \ + --header 'Authorization: ' \ ``` ###### Sample Response ```json - +{ + "success": true, + "msg": "Deleted alert", + "data": { + "_id": "66577ddae5ff3c91437d0887", + "checkId": "66577a3fd16dcf7c1ce35148", + "monitorId": "6657789ebf6766ee8e2d2edb", + "userId": "6654d1a2634754f789e1f115", + "status": false, + "message": "This is a test alert", + "notifiedStatus": false, + "acknowledgeStatus": true, + "createdAt": "2024-05-29T19:11:22.205Z", + "updatedAt": "2024-05-29T19:12:23.951Z", + "__v": 0 + } +} ``` From ce0cf9cb836dd696faf33b5996304cba00a986ec Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 29 May 2024 23:33:51 +0330 Subject: [PATCH 19/34] un-commenting --- Client/src/Components/DashboardProgressBars/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Components/DashboardProgressBars/index.jsx b/Client/src/Components/DashboardProgressBars/index.jsx index 4326c8d97..4b81c9d1a 100644 --- a/Client/src/Components/DashboardProgressBars/index.jsx +++ b/Client/src/Components/DashboardProgressBars/index.jsx @@ -1,4 +1,4 @@ -// import { BarChart } from '@mui/x-charts/BarChart'; +import { BarChart } from "@mui/x-charts/BarChart"; const ChartsOverviewDemo = () => { return ( From 43e3fc19d3679b41164094b352fee1179b9a0edc Mon Sep 17 00:00:00 2001 From: M M Date: Wed, 29 May 2024 23:50:22 -0700 Subject: [PATCH 20/34] Navbar now takes up the full viewport width. --- Client/src/Components/NavBar/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx index fa1a8bc15..0caf90ff5 100644 --- a/Client/src/Components/NavBar/index.jsx +++ b/Client/src/Components/NavBar/index.jsx @@ -46,8 +46,8 @@ function NavBar() { }; return ( - - + + Date: Thu, 30 May 2024 11:08:50 +0330 Subject: [PATCH 21/34] New password confirmed (Password reset) page completed --- Client/src/App.jsx | 5 ++ .../src/Pages/NewPasswordConfirmed/index.css | 73 ++++++++++++++++++ .../src/Pages/NewPasswordConfirmed/index.jsx | 56 ++++++++++++++ Client/src/assets/Images/success-icon.png | Bin 0 -> 1851 bytes 4 files changed, 134 insertions(+) create mode 100644 Client/src/Pages/NewPasswordConfirmed/index.css create mode 100644 Client/src/Pages/NewPasswordConfirmed/index.jsx create mode 100644 Client/src/assets/Images/success-icon.png diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 0584ebf26..6f64d45da 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -14,6 +14,7 @@ import Settings from "./Pages/Settings"; import ForgotPassword from "./Pages/ForgotPassword"; import CheckEmail from "./Pages/CheckEmail"; import SetNewPassword from "./Pages/SetNewPassword"; +import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed"; function App() { return ( @@ -34,6 +35,10 @@ function App() { } /> } /> } /> + } + /> ); diff --git a/Client/src/Pages/NewPasswordConfirmed/index.css b/Client/src/Pages/NewPasswordConfirmed/index.css new file mode 100644 index 000000000..15d9ee30e --- /dev/null +++ b/Client/src/Pages/NewPasswordConfirmed/index.css @@ -0,0 +1,73 @@ +:root { + --password-confirmed-color-1: #101828; + --password-confirmed-color-2: #1570ef; + --password-confirmed-color-3: #475467; +} + +.password-confirmed-page { + width: 100vw; + display: flex; + justify-content: center; + min-height: 100vh; +} + +.password-confirmed-form { + width: 360px; + margin: 90px auto; +} + +.password-confirmed-form-header { + justify-content: center; + align-items: center; + text-align: center; +} + +.password-confirmed-v-gap-large { + height: 32px; +} + +.password-confirmed-v-gap-medium { + height: 24px; +} + +.password-confirmed-v-gap-small { + height: 12px; +} + +.password-confirmed-form-heading { + font-size: 16px; + font-weight: 700; + color: var(--password-confirmed-color-1); +} + +.password-confirmed-form-subheading { + font-size: 13px; + font-weight: 600; + color: var(--password-confirmed-color-3); +} + +.password-confirmed-body { + width: 360px; +} + +.password-confirmed-back-button { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.password-confirmed-back-button-img { + width: 20px; + height: 20px; + margin-right: 5px; + align-items: center; +} + +.password-confirmed-back-button-text { + height: 20px; + font-size: 13px; + font-weight: 600; + color: var(--password-confirmed-color-3); + text-align: center; +} diff --git a/Client/src/Pages/NewPasswordConfirmed/index.jsx b/Client/src/Pages/NewPasswordConfirmed/index.jsx new file mode 100644 index 000000000..1bbfc06ad --- /dev/null +++ b/Client/src/Pages/NewPasswordConfirmed/index.jsx @@ -0,0 +1,56 @@ +import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern"; +import "./index.css"; +import React from "react"; +import SuccessIcon from "../../assets/Images/success-icon.png"; +import Button from "../../Components/Button"; +import LeftArrow from "../../assets/Images/arrow-left.png"; + +const NewPasswordConfirmed = () => { + return ( +

+ +
+
+ SuccessIcon +
+
Password reset
+
+
+ Your password has been successfully reset. Click below to log in + magically. +
+
+
+
+
+
+
+ LeftArrow +
+ Back to log in +
+
+
+
+ ); +}; + +export default NewPasswordConfirmed; diff --git a/Client/src/assets/Images/success-icon.png b/Client/src/assets/Images/success-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..43cdbbc2a14709f758809bcf6c8d7c525bd1c8aa GIT binary patch literal 1851 zcmV-B2gLY^P)v%9DYmqOaKx5iO&autQvZPgpg7f2&fOSy#{dJf4Ku+uLRD>&kg|ngURc- z`zMv3)CNSj-xH!V#x^#*iScoMhXdH0L4pCh2m=7dz-#*am0`fr7+#Z;la&*nIqv4x z*48D%{9qAVz6PA-42wA?j1?y*&uzc}z;*X=;2Vj9ra#Al+a|;Q8UFn!#5=*Zx83>e zU9Vi*-OH5A?gR`0>e$!q9namuzW4GRtJU3XZO1EDt8M~@4Af`pJ8^(0OO_-%tYj4w z>CG+oE*wXi)@*&(bBCF%f+9_vj;h0IJ8q8FEQ|fm*2f9g_MuJ8JMhLF!PS7T{ zw)XFNRc6SP`7m|^^{WFT1XNERV=VX4h4DM8Oc4glG{0k}k%JKfo$9r}P+R8`AL5w`+yTA|4c+rsCn+Z51n?(uTg&u*=+=q73HfVt(HVYz*nLOw~6Pn91o0T2! z3-VbpopFjUf*u^&(rFEf7m-Y6>2{ZD z#qc}&g|el!n3gC7>@Wu(d@o#1YN`Q^KQNo?R8bMh;?56y!iR0y-~GXHf>f7@RA2dO_Vln;mXaWh5zFK_W}b z1T;apz?NtmGFpT1M0(1;xnu?b0bGZGUeIh7gmYmO$y}s*fl=X4Np&X7)2K19enEt> zKP9c99)jGFFR9=h<`a0$(d*R9f>Ca*rXsnAFP$gaq#B0u`QK|G9wj@Cq1uFU1jt-O zk{FhKe}Q;ab_TvJ(F)QS(;9Rrj@sAmpdz2IhtG9pjI%PO3F1>rZO5$yXBS5cRo6|> zNgnxqxV45E<4|cf4`N0J2M<;Q5 zSY2JeEKbt8BXGDBIn;5+uCK3?bdOTMY4g9$`aPNk!%SN2%*cVbzzMbn-n6Z1wf^I< zl2&B@ukGF^E)e06IE{$4S=+rwn^-kCSw8Tf%{Dm6?^XiIMkA{rB)zt_cBNW-{g_5< zdv|XU$=ic;csw`+?%u$@EzrSsIvZUm{Cx$#1s_TF$Pu8^r!zA%CVp3CNc`gY^PgU~ z#;og%v1_Qo2SRmWuwa9u!Nh%k<*(A8kFdWUefY*cH{pm#Y?ObJV(4fv6$Hbm6Q=tz ze~znsGKpb?QVD-2Su*)K=E<^2$!7N3-V@Y?2q^JXDg}kYK1-#}aZ0I7wTrj#9_0!m z1lw`NhVnMd;1biu#K8#tPMb8H&{S>R52jae4}V+j_20cusjMU0QT2m1<#eSo16onn p=xa6Z0O)Lsh4RoP4-v{w#9Ij@lM#}WtUCYz002ovPDHLkV1oL%aTEXm literal 0 HcmV?d00001 From eb54ad957fe1e955998a8ea433a848206e327ef5 Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 30 May 2024 15:14:26 -0700 Subject: [PATCH 22/34] Adjusted the class of maxWidth from xl to xxl for better responsiveness. --- Client/src/Components/NavBar/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx index 0caf90ff5..2c255eae0 100644 --- a/Client/src/Components/NavBar/index.jsx +++ b/Client/src/Components/NavBar/index.jsx @@ -47,7 +47,7 @@ function NavBar() { return ( - + Date: Sat, 1 Jun 2024 14:29:54 -0700 Subject: [PATCH 23/34] Implemented the sidebar component and added it to the home layout screen. --- Client/src/Components/DashboardMenu/index.css | 33 +++++++++++-------- .../src/Components/DashboardSidebar/index.css | 13 ++++++++ .../src/Components/DashboardSidebar/index.jsx | 19 +++++++++++ Client/src/Layouts/HomeLayout/index.css | 12 ++++++- Client/src/Layouts/HomeLayout/index.jsx | 30 ++++++++--------- 5 files changed, 75 insertions(+), 32 deletions(-) create mode 100644 Client/src/Components/DashboardSidebar/index.css create mode 100644 Client/src/Components/DashboardSidebar/index.jsx diff --git a/Client/src/Components/DashboardMenu/index.css b/Client/src/Components/DashboardMenu/index.css index 37c84655b..3c58afdb7 100644 --- a/Client/src/Components/DashboardMenu/index.css +++ b/Client/src/Components/DashboardMenu/index.css @@ -1,15 +1,20 @@ +.dashboard-menu-container { + display: flex; + flex-direction: column; + padding: 20px; +} + .icon-container { - display: flex; - align-items: center; - margin-bottom: 12px; - } - - .text-container { - display: flex; - align-items: center; - } - - .dashboard-menu-text { - margin-left: 8px; - } - \ No newline at end of file + display: flex; + align-items: center; + margin-bottom: 12px; +} + +.text-container { + display: flex; + align-items: center; +} + +.dashboard-menu-text { + margin-left: 8px; +} diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/DashboardSidebar/index.css new file mode 100644 index 000000000..83b0b349b --- /dev/null +++ b/Client/src/Components/DashboardSidebar/index.css @@ -0,0 +1,13 @@ +.dashboard-sidebar { + height: 100vh; + width: 250px; + background-color: #f4f4f4; + box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); + position: fixed; + top: 0; + left: 0; + display: flex; + flex-direction: column; + padding-top: 60px; + } + \ No newline at end of file diff --git a/Client/src/Components/DashboardSidebar/index.jsx b/Client/src/Components/DashboardSidebar/index.jsx new file mode 100644 index 000000000..d506256a3 --- /dev/null +++ b/Client/src/Components/DashboardSidebar/index.jsx @@ -0,0 +1,19 @@ +import DashboardMenu from '../../Components/DashboardMenu'; +import './index.css'; + +/** + * @component + * DashboardSidebar component serves as a sidebar containing the DashboardMenu. + * + * @returns {JSX.Element} The JSX element representing the DashboardSidebar component. + */ + +function DashboardSidebar() { + return ( +
+ +
+ ); +} + +export default DashboardSidebar; diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index d6a7f5707..3adc8ef22 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/Client/src/Layouts/HomeLayout/index.css @@ -1 +1,11 @@ -/*Homelayout styles*/ \ No newline at end of file +.home-layout { + display: flex; + } + + .main-content { + margin-left: 250px; + flex: 1; + padding: 20px; + overflow-y: auto; + } + \ No newline at end of file diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx index ed1d06fe6..7f0615907 100644 --- a/Client/src/Layouts/HomeLayout/index.jsx +++ b/Client/src/Layouts/HomeLayout/index.jsx @@ -1,21 +1,17 @@ -import NavBar from '../../Components/NavBar' -import { Outlet } from 'react-router' -import Home from '../../Pages/Home' -import './index.css' -import ChartsOverviewDemo from '../../Components/DashboardProgressBars' -import DashboardSettings from '../../Components/DashboardSettingsIcon' - +import NavBar from '../../Components/NavBar'; +import { Outlet } from 'react-router'; +import DashboardSidebar from '../../Components/DashboardSidebar'; +import './index.css'; const HomeLayout = () => { - return ( - <> - - - - - - - ) + return ( +
+ +
+ +
+
+ ); } -export default HomeLayout \ No newline at end of file +export default HomeLayout; From fc65ce17ae47946255a8c5a52634b6840d15a1b6 Mon Sep 17 00:00:00 2001 From: M M Date: Sat, 1 Jun 2024 14:54:29 -0700 Subject: [PATCH 24/34] Added the support icon at the bottom of the sidebar. --- .../src/Components/DashboardSidebar/index.css | 22 +++++++++++++++++-- .../src/Components/DashboardSidebar/index.jsx | 12 ++++++++-- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/DashboardSidebar/index.css index 83b0b349b..43af36fbd 100644 --- a/Client/src/Components/DashboardSidebar/index.css +++ b/Client/src/Components/DashboardSidebar/index.css @@ -1,13 +1,31 @@ .dashboard-sidebar { height: 100vh; width: 250px; - background-color: #f4f4f4; + background-color: #f4f4f4; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; display: flex; flex-direction: column; - padding-top: 60px; + justify-content: space-between; + padding: 20px 0; + } + + .menu-container { + margin-top: 60px; + } + + .support-container { + display: flex; + align-items: center; + padding: 10px 20px; + margin-bottom: 40px; + } + + .support-text { + margin-left: 8px; + font-size: 16px; + color: #333; } \ No newline at end of file diff --git a/Client/src/Components/DashboardSidebar/index.jsx b/Client/src/Components/DashboardSidebar/index.jsx index d506256a3..846452dbc 100644 --- a/Client/src/Components/DashboardSidebar/index.jsx +++ b/Client/src/Components/DashboardSidebar/index.jsx @@ -1,9 +1,11 @@ import DashboardMenu from '../../Components/DashboardMenu'; +import SupportIcon from '@mui/icons-material/Support'; +import SvgIcon from '@mui/material/SvgIcon'; import './index.css'; /** * @component - * DashboardSidebar component serves as a sidebar containing the DashboardMenu. + * DashboardSidebar component serves as a sidebar containing the DashboardMenu and a Support icon at the bottom. * * @returns {JSX.Element} The JSX element representing the DashboardSidebar component. */ @@ -11,7 +13,13 @@ import './index.css'; function DashboardSidebar() { return (
- +
+ +
+
+ + Support +
); } From c2f3d670c37c12bc1bdc53f13140e8cd4edc2ee3 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Sun, 2 Jun 2024 12:08:35 +0330 Subject: [PATCH 25/34] polishing .css files and reducing the code size as much as possible. Adding some new colors to the Theme --- .../announcementUpdateSubscription.css | 61 +++++++------------ .../announcementsDualButton.css | 29 +++------ .../announcementsDualButtonWithIcon.css | 51 ++++++---------- .../announcementsMessageBar.css | 12 +--- Client/src/Components/Check/check.css | 8 +-- Client/src/Components/Checkbox/Checkbox.css | 10 +-- .../dualButtonPopupModal.css | 30 ++++----- .../dualButtonPopupModalWithTextfields.css | 22 +++---- .../Description/descriptionTextField.css | 54 ++++++++++++---- .../TextFields/Email/emailTextField.css | 47 +++++++++++--- .../TextFields/Password/passwordTextField.css | 44 +++++++++++-- .../Components/TextFields/Text/textField.css | 37 +++++++++++ .../TextFields/Website/websiteTextField.css | 59 +++++++++++++----- .../TooltipWithTail/tooltipWithTail.css | 48 ++++++++++++--- Client/src/Pages/CheckEmail/index.css | 57 ++++++----------- Client/src/Pages/ForgotPassword/index.css | 53 +++++----------- Client/src/Pages/Login/index.css | 56 ++++++----------- .../src/Pages/NewPasswordConfirmed/index.css | 38 +++++------- Client/src/Pages/Register/index.css | 45 ++++---------- Client/src/Pages/Register/index.jsx | 9 +-- Client/src/Pages/SetNewPassword/index.css | 50 +++++---------- Client/src/Pages/SetNewPassword/index.jsx | 6 +- Client/src/Utils/Theme.js | 21 ++++++- Client/src/index.css | 38 ++++++++++++ 24 files changed, 483 insertions(+), 402 deletions(-) diff --git a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css index 390a130d4..6064a86cd 100644 --- a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css +++ b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css @@ -1,22 +1,5 @@ -:root { - --update-subscription-color-0: #101828; - --update-subscription-color-1: #475467; - --update-subscription-color-2: #fff; - --update-subscription-color-3: #eaecf0; - --update-subscription-color-4: #7f56d9; - --update-subscription-color-5: #1570ef; - --update-subscription-color-6: #344054; - --update-subscription-color-7: #d0d5dd; - --update-subscription-padding-0: 12px 16px; - --update-subscription-margin-right: 12px; - --update-subscription-font-size: 13px; - --update-subscription-radius-0: 4px; - --spacing-1: 16px; - --spacing-2: 20px; -} - .update-subscription { - margin: var(--spacing-2); + margin: 20px; } .update-subscription, @@ -33,7 +16,7 @@ .subscription-dialog-title { font-size: 1rem; font-weight: 700; - color: var(--update-subscription-color-0); + color: var(--env-var-color-1); } .v-spacing-small { @@ -46,7 +29,7 @@ .subscription-dialog-text { font-size: 13px; - color: var(--update-subscription-color-1); + color: var(--env-var-color-2); } .subscription-dialog-controls { @@ -54,28 +37,28 @@ } .controls-negative { - padding: var(--update-subscription-padding-0); - margin-right: var(--update-subscription-margin-right); - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-3); - background-color: var(--update-subscription-color-2); - font-size: var(--update-subscription-font-size); + padding: 12px 16px; + margin-right: 12px; + border-radius: var(--env-var-radius-1); + border: 1px solid var(--env-var-color-6); + background-color: var(--env-var-color-8); + font-size: var(--env-var-font-size-medium); } .controls-positive, .subscribe-button { - padding: var(--update-subscription-padding-0); - margin-right: var(--update-subscription-margin-right); - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-4); - background-color: var(--update-subscription-color-5); - color: var(--update-subscription-color-2); - font-size: var(--update-subscription-font-size); + padding: 12px 16px; + margin-right: 12px; + border-radius: var(--env-var-radius-1); + border: 1px solid var(--env-var-color-7); + background-color: var(--env-var-color-3); + color: var(--env-var-color-8); + font-size: var(--env-var-font-size-medium); } .update-subscription-title { - color: var(--update-subscription-color-6); - padding: 0 var(--spacing-2); + color: var(--env-var-color-5); + padding: 0 20px; font-weight: 700; font-size: 13px; margin-bottom: 10px; @@ -83,17 +66,17 @@ .subscription-email { display: flex; - padding: 0 var(--spacing-2); + padding: 0 20px; } .subscription-email-field { width: 290px; height: 24px; - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-7); + border-radius: var(--env-var-radius-1); + border: 1px solid var(--env-var-color-4); box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05); padding: 5px 15px; - margin-right: var(--spacing-2); + margin-right: 20px; } .subscribe-button { diff --git a/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css index 92fbe352a..aff02ab46 100644 --- a/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css +++ b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css @@ -1,24 +1,11 @@ -:root { - --announcement-border-color: #d0d5dd; - --announcement-border-radius: 4px; - --announcement-border-radius-2: 8px; - --announcement-font-size-0: 13px; - --announcement-font-color-0: #344054; - --announcement-font-color-1: #475467; - --announcement-font-color-2: #1570ef; - --announcement-padding: 16px; - --info-icon-frame-color: #eaecf0; - --margin: 20px; -} - .announcement-without-tile { - margin: var(--margin); + margin: 20px; max-width: 343px; width: fit-content; display: flex; - border: 1px solid var(--announcement-border-color); - padding: var(--announcement-padding); - border-radius: var(--announcement-border-radius); + border: 1px solid var(--env-var-color-4); + padding: 16px; + border-radius: var(--env-var-radius-1); } .h-spacing { @@ -26,13 +13,13 @@ } .announcement-without-content-subject { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-0); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); font-weight: 700; margin-bottom: 10px; } .announcement-without-content-body { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-1); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-2); } diff --git a/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css index 1f1659060..02f132374 100644 --- a/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css +++ b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css @@ -1,71 +1,58 @@ -:root { - --announcement-border-color: #d0d5dd; - --announcement-border-radius: 4px; - --announcement-border-radius-2: 8px; - --announcement-font-size-0: 13px; - --announcement-font-color-0: #344054; - --announcement-font-color-1: #475467; - --announcement-font-color-2: #1570ef; - --announcement-padding: 16px; - --info-icon-frame-color: #eaecf0; - --tile-margin: 20px; -} - .announcement-tile { - margin: var(--tile-margin); + margin: 20px; width: fit-content; display: flex; - border: 1px solid var(--announcement-border-color); - padding: var(--announcement-padding); - border-radius: var(--announcement-border-radius); + border: 1px solid var(--env-var-color-4); + padding: 16px; + border-radius: var(--env-var-radius-1); } .info-icon-frame { display: flex; - width: 40px; - height: 40px; - border: 1px solid var(--info-icon-frame-color); - border-radius: var(--announcement-border-radius-2); + width: var(--env-var-default-2); + height: var(--env-var-default-2); + border: 1px solid var(--env-var-color-6); + border-radius: var(--env-var-radius-2); justify-content: center; align-items: center; } .announcement-content { - padding: 0 var(--announcement-padding); + padding: 0 16px; } .announcement-content-subject { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-0); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); font-weight: 700; margin-bottom: 10px; } .announcement-content-body { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-1); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-2); font-weight: 300; } .announcement-content-controllers { display: flex; - font-size: var(--announcement-font-size-0); + font-size: var(--env-var-font-size-medium); margin-top: 15px; } .controllers-button-esc { - font-size: var(--announcement-font-size-0); + font-size: var(--env-var-font-size-medium); font-weight: 600; margin-right: 12px; } .controllers-button-primary { - font-size: var(--announcement-font-size-0); + font-size: var(--env-var-font-size-medium); font-weight: 600; - color: var(--announcement-font-color-2); + color: var(--env-var-color-3); } .announcement-close { - width: 24px; - height: 24px; + width: var(--env-var-default-1); + height: var(--env-var-default-1); } diff --git a/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css index bc3427302..7a6e30b0a 100644 --- a/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css +++ b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css @@ -1,13 +1,7 @@ -:root { - --announcement-font-size-0: 13px; - --announcement-padding: 16px; - --margin: 20px; -} - .announcement-messagebar-body { - margin: var(--margin); - font-size: var(--announcement-font-size-0); - padding: 0 var(--announcement-padding) 0 0; + margin: 20px; + font-size: var(--env-var-font-size-medium); + padding: 0 16px 0 0; justify-content: center; align-items: center; margin: auto; diff --git a/Client/src/Components/Check/check.css b/Client/src/Components/Check/check.css index 284b79bda..17f372f2b 100644 --- a/Client/src/Components/Check/check.css +++ b/Client/src/Components/Check/check.css @@ -5,8 +5,8 @@ } .check-icon { - width: 20px; - height: 20px; + width: var(--env-var-img-width-1); + height: var(--env-var-img-width-1); } .check-h-spacing { @@ -14,7 +14,7 @@ } .check-label { - font-size: 11px; + font-size: var(--env-var-font-size-small); font-weight: 600; - color: #475467; + color: var(--env-var-color-2); } diff --git a/Client/src/Components/Checkbox/Checkbox.css b/Client/src/Components/Checkbox/Checkbox.css index b77eac3d6..36a9a43be 100644 --- a/Client/src/Components/Checkbox/Checkbox.css +++ b/Client/src/Components/Checkbox/Checkbox.css @@ -1,12 +1,12 @@ .checkbox-holder { - height: 20px; + height: var(--env-var-img-width-1); display: flex; align-items: center; } .checkbox { - width: 13px; - height: 13px; + width: var(--env-var-font-size-medium); + height: var(--env-var-font-size-medium); margin: 0; padding: 0; cursor: pointer; @@ -14,8 +14,8 @@ .checkbox-label { margin-left: 5px; - font-size: 13px; - color: #344054; + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); font-weight: 600; cursor: pointer; } diff --git a/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css index 92ac7f5d6..e4ff13a7c 100644 --- a/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css +++ b/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css @@ -1,11 +1,3 @@ -:root { - --popup-color-border-0: #f2f2f2; - --popup-color-0: #101828; - --popup-color-1: #475467; - --color-0: #1570ef; - --color-1: #175cd3; -} - .dual-button-popup-modal-holder { width: 380px; height: 130px; @@ -13,19 +5,19 @@ padding: 30px; box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08); - border: 1px solid var(--popup-color-border-0); - border-radius: 4px; + border: 1px solid var(--env-var-color-9); + border-radius: var(--env-var-radius-1); } .dual-button-popup-modal-subject { - color: var(--popup-color-0); + color: var(--env-var-color-1); font-weight: bolder; font-size: 16px; } .dual-button-popup-modal-description { - color: var(--popup-color-1); - font-size: 13px; + color: var(--env-var-color-2); + font-size: var(--env-var-font-size-medium); margin-top: 10px; } @@ -42,19 +34,19 @@ width: 145px; height: 35px; padding: 5px 20px; - background-color: var(--color-0); - border: 1px solid var(--color-1); - border-radius: 4px; + background-color: var(--env-var-color-3); + border: 1px solid var(--env-var-color-10); + border-radius: var(--env-var-radius-1); margin: 5px 0; margin-left: 20px; - color: white; + color: var(--env-var-color-8); cursor: pointer; - font-size: 13px; + font-size: var(--env-var-font-size-medium); } .transparent-discard-button { border: none; background-color: transparent; margin: 5px 10px; - font-size: 13px; + font-size: var(--env-var-font-size-medium); } diff --git a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css index a1be3cd3a..be8930422 100644 --- a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css +++ b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css @@ -1,16 +1,10 @@ -:root { - --popup-color-with-input-border-0: #f2f2f2; - --popup-color-with-input-border-1: #d0d5dd; - --popup-modal-with-input-title-color: #344054; -} - .popup-modal-holder { width: 480px; font-family: var(--popup-font-family-0); padding: 50px 40px; - border-radius: 4px; + border-radius: var(--env-var-radius-1); margin: 10px 20px; - border: 1px solid var(--popup-color-with-input-border-0); + border: 1px solid var(--env-var-color-9); box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08); } @@ -31,14 +25,14 @@ .popup-modal-input-title { margin-bottom: 15px; - color: var(--popup-modal-with-input-title-color); + color: var(--env-var-color-5); } .popup-modal-text-field { width: 100%; height: 35px; - border: 1px solid var(--popup-color-with-input-border-1); - border-radius: 4px; + border: 1px solid var(--env-var-color-4); + border-radius: var(--env-var-radius-1); } .popup-modal-controllers { @@ -54,8 +48,8 @@ width: 145px; height: 35px; padding: 5px 20px; - border: 1px solid var(--popup-color-with-input-border-1); - border-radius: 4px; + border: 1px solid var(--env-var-color-4); + border-radius: var(--env-var-radius-1); cursor: pointer; - font-size: 13px; + font-size: var(--env-var-font-size-medium); } diff --git a/Client/src/Components/TextFields/Description/descriptionTextField.css b/Client/src/Components/TextFields/Description/descriptionTextField.css index 28616863e..e86727452 100644 --- a/Client/src/Components/TextFields/Description/descriptionTextField.css +++ b/Client/src/Components/TextFields/Description/descriptionTextField.css @@ -1,32 +1,64 @@ :root { - --color-title-1: #344054; - --text-field-margin-0: 10px 20px; - --description-color-0: #344054; + --env-var-color-1: #101828; + --env-var-color-2: #475467; + --env-var-color-3: #1570ef; + + --env-var-color-4: #d0d5dd; + --env-var-color-5: #344054; + --env-var-color-6: #eaecf0; + --env-var-color-7: #7f56d9; + --env-var-color-8: #fff; + --env-var-color-9: #f2f2f2; + --env-var-color-10: #175cd3; + + --env-var-radius-1: 4px; + --env-var-radius-2: 8px; + + --env-var-width-1: 100vw; + --env-var-width-2: 360px; + + --env-var-height-1: 100vh; + + --env-var-spacing-1: 12px; + --env-var-spacing-2: 24px; + --env-var-spacing-3: 32px; + --env-var-spacing-4: 40px; + + --env-var-font-size-small: 11px; + --env-var-font-size-medium: 13px; + --env-var-font-size-medium-plus: 14px; + --env-var-font-size-large: 16px; + --env-var-font-size-xlarge: 30px; + + --env-var-img-width-1: 20px; + + --env-var-default-1: 24px; + --env-var-default-2: 40px; } .description-field-holder { - margin: var(--text-field-margin-0); + margin: 10px 20px; margin-top: 20px; } .text-field-title { - color: var(--color-title-1); + color: var(--env-var-color-5); font-weight: bold; margin-bottom: 10px; - font-size: 13px; - color: var(--description-color-0); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); font-weight: bold; } .description-field-area { min-width: 320px; - font-size: 13px; + font-size: var(--env-var-font-size-medium); border-radius: 8px; } .description-field-label { margin-top: 10px; - font-size: 11px; + font-size: var(--env-var-font-size-small); } .with-error { @@ -36,10 +68,10 @@ #description-field-area-helper-text { margin-left: 0; margin-top: 10px; - font-size: 11px; + font-size: var(--env-var-font-size-small); } #description-field-area { min-width: 320px; - font-size: 13px; + font-size: var(--env-var-font-size-medium); } diff --git a/Client/src/Components/TextFields/Email/emailTextField.css b/Client/src/Components/TextFields/Email/emailTextField.css index 05ca4c07f..e89ef8ffc 100644 --- a/Client/src/Components/TextFields/Email/emailTextField.css +++ b/Client/src/Components/TextFields/Email/emailTextField.css @@ -1,6 +1,39 @@ :root { - --textfield-color-0: #344054; - --textfield-font-size: 13px; + --env-var-color-1: #101828; + --env-var-color-2: #475467; + --env-var-color-3: #1570ef; + + --env-var-color-4: #d0d5dd; + --env-var-color-5: #344054; + --env-var-color-6: #eaecf0; + --env-var-color-7: #7f56d9; + --env-var-color-8: #fff; + --env-var-color-9: #f2f2f2; + --env-var-color-10: #175cd3; + + --env-var-radius-1: 4px; + --env-var-radius-2: 8px; + + --env-var-width-1: 100vw; + --env-var-width-2: 360px; + + --env-var-height-1: 100vh; + + --env-var-spacing-1: 12px; + --env-var-spacing-2: 24px; + --env-var-spacing-3: 32px; + --env-var-spacing-4: 40px; + + --env-var-font-size-small: 11px; + --env-var-font-size-medium: 13px; + --env-var-font-size-medium-plus: 14px; + --env-var-font-size-large: 16px; + --env-var-font-size-xlarge: 30px; + + --env-var-img-width-1: 20px; + + --env-var-default-1: 24px; + --env-var-default-2: 40px; } .email-text-field { @@ -11,24 +44,24 @@ #outlined-basic { width: 320px; height: 14px; - font-size: var(--textfield-font-size); + font-size: var(--env-var-font-size-medium); padding: 8px 12px; } .email-text-field-title { - font-size: var(--textfield-font-size); - color: var(--textfield-color-0); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); font-weight: bold; } .email-text-field-input { - font-size: var(--textfield-font-size); + font-size: var(--env-var-font-size-medium); } #outlined-basic-helper-text { margin-left: 0; margin-top: 10px; - font-size: 11px; + font-size: var(--env-var-font-size-small); } .text-field-icon { diff --git a/Client/src/Components/TextFields/Password/passwordTextField.css b/Client/src/Components/TextFields/Password/passwordTextField.css index 01ea94445..99efdc12b 100644 --- a/Client/src/Components/TextFields/Password/passwordTextField.css +++ b/Client/src/Components/TextFields/Password/passwordTextField.css @@ -1,5 +1,39 @@ :root { - --textfield-color-0: #344054; + --env-var-color-1: #101828; + --env-var-color-2: #475467; + --env-var-color-3: #1570ef; + + --env-var-color-4: #d0d5dd; + --env-var-color-5: #344054; + --env-var-color-6: #eaecf0; + --env-var-color-7: #7f56d9; + --env-var-color-8: #fff; + --env-var-color-9: #f2f2f2; + --env-var-color-10: #175cd3; + + --env-var-radius-1: 4px; + --env-var-radius-2: 8px; + + --env-var-width-1: 100vw; + --env-var-width-2: 360px; + + --env-var-height-1: 100vh; + + --env-var-spacing-1: 12px; + --env-var-spacing-2: 24px; + --env-var-spacing-3: 32px; + --env-var-spacing-4: 40px; + + --env-var-font-size-small: 11px; + --env-var-font-size-medium: 13px; + --env-var-font-size-medium-plus: 14px; + --env-var-font-size-large: 16px; + --env-var-font-size-xlarge: 30px; + + --env-var-img-width-1: 20px; + + --env-var-default-1: 24px; + --env-var-default-2: 40px; } .password-text-field { @@ -10,20 +44,20 @@ #outlined-basic { width: 320px; height: 14px; - font-size: 13px; + font-size: var(--env-var-font-size-medium); padding: 8px 12px; } .password-text-field-title { - font-size: 13px; - color: var(--textfield-color-0); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); font-weight: bold; } #outlined-basic-helper-text { margin-left: 0; margin-top: 10px; - font-size: 11px; + font-size: var(--env-var-font-size-small); } .text-field-icon { diff --git a/Client/src/Components/TextFields/Text/textField.css b/Client/src/Components/TextFields/Text/textField.css index e69de29bb..79d7ecec1 100644 --- a/Client/src/Components/TextFields/Text/textField.css +++ b/Client/src/Components/TextFields/Text/textField.css @@ -0,0 +1,37 @@ +:root { + --env-var-color-1: #101828; + --env-var-color-2: #475467; + --env-var-color-3: #1570ef; + + --env-var-color-4: #d0d5dd; + --env-var-color-5: #344054; + --env-var-color-6: #eaecf0; + --env-var-color-7: #7f56d9; + --env-var-color-8: #fff; + --env-var-color-9: #f2f2f2; + --env-var-color-10: #175cd3; + + --env-var-radius-1: 4px; + --env-var-radius-2: 8px; + + --env-var-width-1: 100vw; + --env-var-width-2: 360px; + + --env-var-height-1: 100vh; + + --env-var-spacing-1: 12px; + --env-var-spacing-2: 24px; + --env-var-spacing-3: 32px; + --env-var-spacing-4: 40px; + + --env-var-font-size-small: 11px; + --env-var-font-size-medium: 13px; + --env-var-font-size-medium-plus: 14px; + --env-var-font-size-large: 16px; + --env-var-font-size-xlarge: 30px; + + --env-var-img-width-1: 20px; + + --env-var-default-1: 24px; + --env-var-default-2: 40px; +} diff --git a/Client/src/Components/TextFields/Website/websiteTextField.css b/Client/src/Components/TextFields/Website/websiteTextField.css index 66cdf4fa4..b1004695c 100644 --- a/Client/src/Components/TextFields/Website/websiteTextField.css +++ b/Client/src/Components/TextFields/Website/websiteTextField.css @@ -1,17 +1,46 @@ :root { - --website-color-0: #344054; - --border-color: #d0d5dd; - --label-font-color: #475467; - --icon-color: #98a2b3; - --text-field-margin-0: 10px 20px; - --text-field-margin-1: 10px 20px 5px; + --env-var-color-1: #101828; + --env-var-color-2: #475467; + --env-var-color-3: #1570ef; + + --env-var-color-4: #d0d5dd; + --env-var-color-5: #344054; + --env-var-color-6: #eaecf0; + --env-var-color-7: #7f56d9; + --env-var-color-8: #fff; + --env-var-color-9: #f2f2f2; + --env-var-color-10: #175cd3; + + --env-var-radius-1: 4px; + --env-var-radius-2: 8px; + + --env-var-width-1: 100vw; + --env-var-width-2: 360px; + + --env-var-height-1: 100vh; + + --env-var-spacing-1: 12px; + --env-var-spacing-2: 24px; + --env-var-spacing-3: 32px; + --env-var-spacing-4: 40px; + + --env-var-font-size-small: 11px; + --env-var-font-size-medium: 13px; + --env-var-font-size-medium-plus: 14px; + --env-var-font-size-large: 16px; + --env-var-font-size-xlarge: 30px; + + --env-var-img-width-1: 20px; + + --env-var-default-1: 24px; + --env-var-default-2: 40px; } .website-textfield-title { margin: 0 20px; margin-top: 30px; font-size: 13px; - color: var(--website-color-0); + color: var(--env-var-color-5); font-weight: bold; } @@ -19,17 +48,17 @@ display: flex; align-items: center; position: relative; - margin: var(--text-field-margin-1); + margin: 10px 20px 5px; } .website-textfield-hint { - margin: var(--text-field-margin-0); + margin: 10px 20px; font-size: 11px; } .website-label { padding: 6px 20px 6px 10px; - border: solid 1px var(--border-color); + border: solid 1px var(--env-var-color-4); border-right: none; border-radius: 4px 0 0 4px; font-size: 13px; @@ -37,21 +66,21 @@ display: flex; justify-content: center; align-items: center; - color: var(--label-font-color); + color: var(--env-var-color-2); } .website-url { width: 248px; height: 31.5px; padding: 0px 15px; - border: solid 1px var(--border-color); + border: solid 1px var(--env-var-color-4); } .website-icon-holder { width: 40px; height: 33px; padding: 5px; - border: solid 1px var(--border-color); + border: solid 1px var(--env-var-color-4); border-left: none; text-align: center; display: flex; @@ -61,7 +90,7 @@ .copy-to-clipboard-button { padding: 5.5px 20px 6px 10px; - border: solid 1px var(--border-color); + border: solid 1px var(--env-var-color-4); border-left: none; border-radius: 0 8px 8px 0; font-size: 13px; @@ -69,7 +98,7 @@ display: flex; justify-content: space-evenly; align-items: center; - color: var(--label-font-color); + color: var(--env-var-color-2); cursor: pointer; } diff --git a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css index 1b1adf507..3efe67643 100644 --- a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css +++ b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css @@ -1,17 +1,49 @@ :root { - --tooltip-color-0: #d0d5dd; - --tooltip-margin: 5px; - --tooltip-font-size: 12px; + --env-var-color-1: #101828; + --env-var-color-2: #475467; + --env-var-color-3: #1570ef; + + --env-var-color-4: #d0d5dd; + --env-var-color-5: #344054; + --env-var-color-6: #eaecf0; + --env-var-color-7: #7f56d9; + --env-var-color-8: #fff; + --env-var-color-9: #f2f2f2; + --env-var-color-10: #175cd3; + + --env-var-radius-1: 4px; + --env-var-radius-2: 8px; + + --env-var-width-1: 100vw; + --env-var-width-2: 360px; + + --env-var-height-1: 100vh; + + --env-var-spacing-1: 12px; + --env-var-spacing-2: 24px; + --env-var-spacing-3: 32px; + --env-var-spacing-4: 40px; + + --env-var-font-size-small: 11px; + --env-var-font-size-medium: 13px; + --env-var-font-size-medium-plus: 14px; + --env-var-font-size-large: 16px; + --env-var-font-size-xlarge: 30px; + + --env-var-img-width-1: 20px; + + --env-var-default-1: 24px; + --env-var-default-2: 40px; } .tooltip-title { - font-size: var(--tooltip-font-size); + font-size: var(--env-var-font-size-medium); font-weight: bold; - margin: var(--tooltip-margin); + margin: 5px; } .tooltip-description { - font-size: var(--tooltip-font-size); - color: var(--tooltip-color-0); - margin: var(--tooltip-margin); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-4); + margin: 5px; } diff --git a/Client/src/Pages/CheckEmail/index.css b/Client/src/Pages/CheckEmail/index.css index db564e0ec..dac0a0a0d 100644 --- a/Client/src/Pages/CheckEmail/index.css +++ b/Client/src/Pages/CheckEmail/index.css @@ -1,32 +1,12 @@ -:root { - --spacing-1: 15px; - --spacing-2: 20px; - --spacing-3: 25px; - --textfield-font-size: 13px; - - --check-email-page-width-1: 100vw; - --check-email-page-height-1: 100vh; - - --check-email-form-width-1: 360px; - --check-email-form-height-1: 526px; - - --logo-width-1: 20px; - --check-email-font-size-medium: 13px; - - --check-email-color-1: #101828; - --check-email-color-2: #1570ef; - --check-email-color-3: #475467; -} - .check-email-page { - width: 100vw; + width: var(--env-var-width-1); display: flex; justify-content: center; - min-height: 100vh; + min-height: var(--env-var-height-1); } .check-email-form { - width: 360px; + width: var(--env-var-width-2); margin: 90px auto; } @@ -37,27 +17,27 @@ } .check-email-v-gap-large { - height: 32px; + height: var(--env-var-spacing-3); } .check-email-v-gap-medium { - height: 24px; + height: var(--env-var-spacing-2); } .check-email-v-gap-small { - height: 12px; + height: var(--env-var-spacing-1); } .check-email-form-heading { - font-size: 16px; + font-size: var(--env-var-font-size-large); font-weight: 700; - color: var(--check-email-color-1); + color: var(--env-var-color-1); } .check-email-form-subheading { - font-size: 13px; + font-size: var(--env-var-font-size-medium); font-weight: 400; - color: var(--check-email-color-3); + color: var(--env-var-color-2); } .check-email-form-subheading span { @@ -65,20 +45,20 @@ } .check-email-body { - width: 360px; + width: var(--env-var-width-2); } .check-email-resend { - font-size: 13px; + font-size: var(--env-var-font-size-medium); font-weight: 400; - color: var(--check-email-color-3); + color: var(--env-var-color-2); text-align: center; cursor: pointer; } .check-email-resend span { font-weight: 700; - color: var(--check-email-color-2); + color: var(--env-var-color-3); } .check-email-back-button { @@ -88,15 +68,16 @@ } .check-email-back-button-img { - width: 20px; - height: 20px; + width: var(--env-var-img-width-1); + height: var(--env-var-img-width-1); margin-right: 5px; align-items: center; } .check-email-back-button-text { - font-size: 13px; + height: var(--env-var-img-width-1); + font-size: var(--env-var-font-size-medium); font-weight: 500; - color: var(--check-email-color-3); + color: var(--env-var-color-2); align-items: center; } diff --git a/Client/src/Pages/ForgotPassword/index.css b/Client/src/Pages/ForgotPassword/index.css index 1308bc3d2..acb24e6e9 100644 --- a/Client/src/Pages/ForgotPassword/index.css +++ b/Client/src/Pages/ForgotPassword/index.css @@ -1,33 +1,12 @@ -:root { - --spacing-1: 15px; - --spacing-2: 20px; - --spacing-3: 25px; - --textfield-font-size: 13px; - - --forgot-password-page-width-1: 100vw; - --forgot-password-page-height-1: 100vh; - - --forgot-password-form-width-1: 360px; - --forgot-password-form-height-1: 526px; - - --logo-width-1: 20px; - --forgot-font-size-medium: 13px; - - --forgot-color-1: #101828; - --forgot-color-2: #1570ef; - --forgot-color-3: #475467; -} - .forgot-password-page { - width: var(--forgot-password-page-width-1); + width: var(--env-var-width-1); display: flex; justify-content: center; - min-height: var(--forgot-password-page-height-1); + min-height: var(--env-var-height-1); } .forgot-password-form { - width: var(--forgot-password-form-width-1); - height: var(--forgot-password-form-height-1); + width: var(--env-var-width-2); margin: 90px auto; } @@ -42,37 +21,37 @@ } .forgot-password-v-gap-large { - height: 32px; + height: var(--env-var-spacing-3); } .forgot-password-v-gap-medium { - height: 24px; + height: var(--env-var-spacing-2); } .forgot-password-v-gap-small { - height: 12px; + height: var(--env-var-spacing-1); } .forgot-password-form-heading { - font-size: 16px; + font-size: var(--env-var-font-size-large); font-weight: 700; - color: #101828; + color: var(--env-var-color-1); } .forgot-password-form-subheading { - font-size: 13px; + font-size: var(--env-var-font-size-medium); font-weight: 500; - color: var(--forgot-color-3); + color: var(--env-var-color-2); } .forgot-password-body { - width: 360px; + width: var(--env-var-width-2); } #forgot-password-email-input { width: 308px; height: 11px; - font-size: var(--textfield-font-size); + font-size: var(--env-var-font-size-medium); } .forgot-password-back-button { @@ -82,13 +61,13 @@ } .forgot-password-back-button-img { - width: 20px; - height: 20px; + width: var(--env-var-img-width-1); + height: var(--env-var-img-width-1); margin-right: 5px; } .forgot-password-back-button-text { - font-size: 13px; + font-size: var(--env-var-font-size-medium); font-weight: 500; - color: var(--forgot-color-3); + color: var(--env-var-color-2); } diff --git a/Client/src/Pages/Login/index.css b/Client/src/Pages/Login/index.css index c823e2a6a..68c1df5e2 100644 --- a/Client/src/Pages/Login/index.css +++ b/Client/src/Pages/Login/index.css @@ -1,34 +1,13 @@ -:root { - --spacing-1: 15px; - --spacing-2: 20px; - --spacing-3: 25px; - --textfield-font-size: 13px; - - --login-page-width-1: 100vw; - --login-page-height-1: 100vh; - - --login-form-width-1: 360px; - --login-form-height-1: 526px; - - --logo-width-1: 20px; - --login-font-size-medium: 13px; - - --login-color-1: #101828; - --login-color-2: #1570ef; - --login-color-3: #475467; -} - .login-page { - width: var(--login-page-width-1); + width: var(--env-var-width-1); display: flex; justify-content: center; align-items: center; - min-height: var(--login-page-height-1); + min-height: var(--env-var-height-1); } .login-form { - width: var(--login-form-width-1); - height: var(--login-form-height-1); + width: var(--env-var-width-2); margin: 90px auto; } @@ -43,27 +22,27 @@ } .login-form-v-spacing { - height: var(--spacing-1); + height: var(--env-var-spacing-1); } .login-form-v2-spacing { - height: var(--spacing-2); + height: var(--env-var-spacing-2); } .login-form-v3-spacing { - height: var(--spacing-3); + height: var(--env-var-spacing-3); } .login-form-heading { - font-size: 30px; + font-size: var(--env-var-font-size-xlarge); font-weight: 700; - color: var(--login-color-1); + color: var(--env-var-color-1); } #login-email-input { width: 308px; height: 11px; - font-size: var(--textfield-font-size); + font-size: var(--env-var-font-size-medium); } .login-form-password-options { @@ -73,15 +52,15 @@ } .login-form-forgot-password { - color: var(--login-color-2); + color: var(--env-var-color-3); font-weight: 600; cursor: pointer; - font-size: var(--login-font-size-medium); + font-size: var(--env-var-font-size-medium); } .google-enter { - width: var(--logo-width-1); - height: var(--logo-width-1); + width: var(--env-var-img-width-1); + height: var(--env-var-img-width-1); margin-right: 10px; } @@ -89,14 +68,15 @@ display: flex; justify-content: center; align-items: center; - color: var(--login-color-3); - font-size: var(--login-font-size-medium); + color: var(--env-var-color-2); + font-size: var(--env-var-font-size-medium); font-weight: 600; } .new-account-option-span { margin-left: 5px; - color: var(--login-color-2); - font-size: 14px; + color: var(--env-var-color-3); + font-size: var(--env-var-font-size-medium); cursor: pointer; + font-weight: 700; } diff --git a/Client/src/Pages/NewPasswordConfirmed/index.css b/Client/src/Pages/NewPasswordConfirmed/index.css index 15d9ee30e..39f8bcd68 100644 --- a/Client/src/Pages/NewPasswordConfirmed/index.css +++ b/Client/src/Pages/NewPasswordConfirmed/index.css @@ -1,18 +1,12 @@ -:root { - --password-confirmed-color-1: #101828; - --password-confirmed-color-2: #1570ef; - --password-confirmed-color-3: #475467; -} - .password-confirmed-page { - width: 100vw; + width: var(--env-var-width-1); display: flex; justify-content: center; - min-height: 100vh; + min-height: var(--env-var-height-1); } .password-confirmed-form { - width: 360px; + width: var(--env-var-width-2); margin: 90px auto; } @@ -23,31 +17,31 @@ } .password-confirmed-v-gap-large { - height: 32px; + height: var(--env-var-spacing-3); } .password-confirmed-v-gap-medium { - height: 24px; + height: var(--env-var-spacing-2); } .password-confirmed-v-gap-small { - height: 12px; + height: var(--env-var-spacing-1); } .password-confirmed-form-heading { - font-size: 16px; + font-size: var(--env-var-font-size-large); font-weight: 700; - color: var(--password-confirmed-color-1); + color: var(--env-var-color-1); } .password-confirmed-form-subheading { - font-size: 13px; + font-size: var(--env-var-font-size-medium); font-weight: 600; - color: var(--password-confirmed-color-3); + color: var(--env-var-color-2); } .password-confirmed-body { - width: 360px; + width: var(--env-var-width-2); } .password-confirmed-back-button { @@ -58,16 +52,16 @@ } .password-confirmed-back-button-img { - width: 20px; - height: 20px; + width: var(--env-var-img-width-1); + height: var(--env-var-img-width-1); margin-right: 5px; align-items: center; } .password-confirmed-back-button-text { - height: 20px; - font-size: 13px; + height: var(--env-var-img-width-1); + font-size: var(--env-var-font-size-medium); font-weight: 600; - color: var(--password-confirmed-color-3); + color: var(--env-var-color-2); text-align: center; } diff --git a/Client/src/Pages/Register/index.css b/Client/src/Pages/Register/index.css index 10b1694d5..8d4b99f1b 100644 --- a/Client/src/Pages/Register/index.css +++ b/Client/src/Pages/Register/index.css @@ -1,29 +1,12 @@ -:root { - --dimension-width-1: 100vw; - --dimension-width-2: 360px; - - --dimension-height-1: 100vh; - - --spacing-small: 12px; - --spacing-medium: 24px; - --spacing-large: 40px; - - --font-size-small: 13px; - --font-size-medium: 16px; - - --register-form-heading-color-1: #101828; - --register-form-subheading-color-1: #475467; -} - .register-page { - width: var(--dimension-width-1); + width: var(--env-var-width-1); display: flex; justify-content: center; - min-height: var(--dimension-height-1); + min-height: var(--env-var-height-1); } .register-form { - width: var(--dimension-width-2); + width: var(--env-var-width-2); margin: 140px auto; } @@ -37,27 +20,23 @@ margin: 0 auto; } -.register-form-v-spacing-24px { - height: var(--spacing-medium); +.register-form-v-spacing-large { + height: var(--env-var-spacing-3); } -.register-form-v-spacing-12px { - height: var(--spacing-small); -} - -.register-form-v-spacing-40px { - height: var(--spacing-large); +.register-form-v-spacing-small { + height: var(--env-var-spacing-1); } .register-form-heading { - font-size: var(--spacing-medium); + font-size: var(--env-var-font-size-large); font-weight: 700; - color: var(--register-form-heading-color-1); + color: var(--env-var-color-1); } .register-form-subheading { - font-size: var(--spacing-small); - color: var(--register-form-subheading-color-1); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-2); font-weight: 600; } @@ -65,7 +44,7 @@ #register-lastname-input, #register-email-input, #register-password-input { - font-size: var(--spacing-small); + font-size: var(--env-var-font-size-medium); width: 294px; height: 11px; padding: 12px 14px; diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx index 6409ad536..c533190be 100644 --- a/Client/src/Pages/Register/index.jsx +++ b/Client/src/Pages/Register/index.jsx @@ -20,12 +20,9 @@ const Register = () => { src={Logomark} alt="Logomark" /> -
+
Create an account
-
-
- Start your 30-day free trial. -
+
@@ -60,7 +57,7 @@ const Register = () => {
-
+
diff --git a/Client/src/Pages/SetNewPassword/index.css b/Client/src/Pages/SetNewPassword/index.css index 1eb504aad..183e8d21f 100644 --- a/Client/src/Pages/SetNewPassword/index.css +++ b/Client/src/Pages/SetNewPassword/index.css @@ -1,28 +1,12 @@ -:root { - --set-new-password-page-width-1: 100vw; - --set-new-password-page-height-1: 100vh; - - --set-new-password-form-width-1: 360px; - --set-new-password-form-height-1: 526px; - - --set-new-password-logo-width-1: 20px; - --set-new-password-font-size-medium: 13px; - - --set-new-password-color-1: #101828; - --set-new-password-color-2: #1570ef; - --set-new-password-color-3: #475467; -} - .set-new-password-page { - width: var(--set-new-password-page-width-1); + width: var(--env-var-width-1); display: flex; justify-content: center; - min-height: var(--set-new-password-page-height-1); + min-height: var(--env-var-height-1); } .set-new-password-form { - width: var(--set-new-password-form-width-1); - min-height: var(--set-new-password-form-height-1); + width: var(--env-var-width-2); margin: 90px auto; } @@ -33,30 +17,26 @@ } .set-new-password-form-gap-large { - height: 32px; + height: var(--env-var-spacing-3); } .set-new-password-form-gap-medium { - height: 24px; -} - -.set-new-password-form-gap-small-medium { - height: 20px; + height: var(--env-var-spacing-2); } .set-new-password-form-gap-small { - height: 12px; + height: var(--env-var-spacing-1); } .set-new-password-form-heading { - font-size: 16px; - color: #101828; + font-size: var(--env-var-font-size-large); + color: var(--env-var-color-1); font-weight: 700; } .set-new-password-form-subheading { - font-size: 13px; - color: var(--set-new-password-color-3); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-2); font-weight: 600; } @@ -68,16 +48,16 @@ } .set-new-password-back-button-img { - width: 20px; - height: 20px; + width: var(--env-var-img-width-1); + height: var(--env-var-img-width-1); margin-right: 5px; align-items: center; } .set-new-password-back-button-text { - height: 20px; - font-size: 13px; - color: var(--set-new-password-color-3); + height: var(--env-var-img-width-1); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-2); font-weight: 600; align-items: center; } diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx index 5f718f666..31e213c10 100644 --- a/Client/src/Pages/SetNewPassword/index.jsx +++ b/Client/src/Pages/SetNewPassword/index.jsx @@ -33,20 +33,20 @@ const SetNewPassword = () => { placeholder="••••••••" id="register-password-input" /> -
+
-
+
-
+
    {links.map((link) => (
  • @@ -304,7 +357,7 @@ const Demo = () => {

Section

-
+
); }; diff --git a/Client/src/main.jsx b/Client/src/main.jsx index b39e60580..1955bdd29 100644 --- a/Client/src/main.jsx +++ b/Client/src/main.jsx @@ -5,12 +5,17 @@ import "./index.css"; import { BrowserRouter as Router, HashRouter } from "react-router-dom"; import theme from "./Utils/Theme.js"; import { ThemeProvider } from "@mui/material"; +import { Provider } from "react-redux"; +import store from "./store"; + ReactDOM.createRoot(document.getElementById("root")).render( - - - - - + + + + + + + ); diff --git a/Client/src/store.js b/Client/src/store.js new file mode 100644 index 000000000..e8409d993 --- /dev/null +++ b/Client/src/store.js @@ -0,0 +1,6 @@ +import { configureStore } from "@reduxjs/toolkit"; +import monitorsReducer from "./Features/Monitors/monitorsSlice"; + +export default configureStore({ + reducer: { monitors: monitorsReducer }, +}); From fbe357091aa68a55651b3f2dc52b5f27d5409321 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 4 Jun 2024 12:40:05 -0700 Subject: [PATCH 29/34] Revised initial state for monitors --- Client/src/Features/Monitors/monitorsSlice.js | 36 ++++++------------- Client/src/Pages/Demo/Demo.jsx | 24 +++++++------ 2 files changed, 25 insertions(+), 35 deletions(-) diff --git a/Client/src/Features/Monitors/monitorsSlice.js b/Client/src/Features/Monitors/monitorsSlice.js index a4e110e0d..b7b76e954 100644 --- a/Client/src/Features/Monitors/monitorsSlice.js +++ b/Client/src/Features/Monitors/monitorsSlice.js @@ -1,34 +1,20 @@ import { createSlice } from "@reduxjs/toolkit"; -const initialState = [ - { - _id: 1, - userId: 1, - name: "Google", - description: "Search engine", - url: "https://www.google.com", - isActive: true, - interval: 1000, - createdAt: "2021-01", - updatedAt: "2021-01", - }, - { - _id: 2, - userId: 1, - name: "Yahoo", - description: "Search engine", - url: "https://www.yahoo.com", - isActive: true, - interval: 1000, - createdAt: "2021-01", - updatedAt: "2021-01", - }, -]; +const initialState = { + isLoading: false, + monitors: [], + success: null, + msg: null, +}; const monitorsSlice = createSlice({ name: "monitors", initialState, - reducers: { setMonitors: (state, action) => action.payload }, + reducers: { + setMonitors: (state, action) => { + state.monitors = action.payload; + }, + }, }); export const { setMonitors } = monitorsSlice.actions; diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 06878f4e9..135c86072 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -180,8 +180,8 @@ const Demo = () => { // ********************************* // Redux Demo // ********************************* - const monitors = useSelector((state) => state.monitors); - + const monitorState = useSelector((state) => state.monitors); + const { monitors } = monitorState; return (
@@ -195,14 +195,17 @@ const Demo = () => { Name URL - {monitors.map((monitor) => { - return ( - - {monitor.name} - {monitor.url} - - ); - })} + {monitors && + monitors.map((monitor) => { + return ( + + + {monitor.name} + + {monitor.url} + + ); + })}
From 6bd1cee24f96b0a9d13c9378124fa21ec7334133 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 4 Jun 2024 13:44:46 -0700 Subject: [PATCH 31/34] Added msg display --- Client/src/Pages/Demo/Demo.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 393e2b529..ec7875167 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -181,7 +181,7 @@ const Demo = () => { // Redux Demo // ********************************* const monitorState = useSelector((state) => state.monitors); - const { monitors } = monitorState; + const { monitors, msg } = monitorState; return (
@@ -208,6 +208,7 @@ const Demo = () => { })} +

Message: {msg}