Merge pull request #85 from MuhammadKhalilzadeh/set-new-password

Set new password

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() {
         <Route path="/playground" element={<PlayGround />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/check-email" element={<CheckEmail />} />
+        <Route path="/set-new-password" element={<SetNewPassword />} />
       </Routes>
     </>
   );

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 }}
     />
   );

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;
+}

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 (
+    <div className="set-new-password-page">
+      <BackgroundPattern />
+      <div className="set-new-password-form">
+        <div className="set-new-password-form-header">
+          <img
+            className="set-new-password-form-header-logo"
+            src={LockIcon}
+            alt="LockIcon"
+          />
+          <div className="set-new-password-form-gap-medium" />
+          <div className="set-new-password-form-heading">Set new password</div>
+          <div className="set-new-password-form-gap-small" />
+          <div className="set-new-password-form-subheading">
+            Your new password must be different to previously used passwords.
+          </div>
+        </div>
+        <div className="set-new-password-form-gap-large"></div>
+        <div className="set-new-password-form-content">
+          <PasswordTextField
+            label="Password"
+            error={false}
+            placeholder="••••••••"
+            id="register-password-input"
+          />
+          <div className="set-new-password-form-gap-small-medium"></div>
+          <PasswordTextField
+            label="Confirm password"
+            error={false}
+            placeholder="••••••••"
+            id="register-password-input"
+          />
+          <div className="set-new-password-form-gap-small-medium"></div>
+          <div className="set-new-password-form-checks">
+            <Check text="Must be at least 8 characters" />
+            <div className="set-new-password-form-gap-small"></div>
+            <Check text="Must contain one special character" />
+          </div>
+          <div className="set-new-password-form-gap-small-medium"></div>
+          <Button
+            level="primary"
+            label="Reset passwprd"
+            sx={{
+              width: "100%",
+              fontSize: "13px",
+              fontWeight: "200",
+              height: "35px",
+            }}
+          />
+        </div>
+        <div className="set-new-password-form-gap-medium"></div>
+        <div className="set-new-password-back-button">
+          <img
+            className="set-new-password-back-button-img"
+            src={LeftArrow}
+            alt="LeftArrow"
+          />
+          <div className="set-new-password-back-button-text">
+            Back to log in
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SetNewPassword;