From a1bef124c60e4130e6196480449d8bcb43fdcdf4 Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 30 May 2024 11:08:50 +0330
Subject: [PATCH] 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() {
         <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/check-email" element={<CheckEmail />} />
         <Route path="/set-new-password" element={<SetNewPassword />} />
+        <Route
+          path="/new-password-confirmed"
+          element={<NewPasswordConfirmed />}
+        />
       </Routes>
     </>
   );
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 (
+    <div className="password-confirmed-page">
+      <BackgroundPattern />
+      <div className="password-confirmed-form">
+        <div className="password-confirmed-form-header">
+          <img
+            className="password-confirmed-form-header-logo"
+            src={SuccessIcon}
+            alt="SuccessIcon"
+          />
+          <div className="password-confirmed-v-gap-medium"></div>
+          <div className="password-confirmed-form-heading">Password reset</div>
+          <div className="password-confirmed-v-gap-small"></div>
+          <div className="password-confirmed-form-subheading">
+            Your password has been successfully reset. Click below to log in
+            magically.
+          </div>
+        </div>
+        <div className="password-confirmed-v-gap-large"></div>
+        <div className="password-confirmed-body">
+          <Button
+            level="primary"
+            label="Continue"
+            sx={{
+              width: "100%",
+              fontSize: "13px",
+              fontWeight: "200",
+              height: "44px",
+            }}
+          />
+        </div>
+        <div className="password-confirmed-v-gap-large"></div>
+        <div className="password-confirmed-back-button">
+          <img
+            className="password-confirmed-back-button-img"
+            src={LeftArrow}
+            alt="LeftArrow"
+          />
+          <div className="password-confirmed-back-button-text">
+            Back to log in
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+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
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

literal 0
HcmV?d00001