Merge pull request #89 from MuhammadKhalilzadeh/new-password-confirmed

New password confirmed

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

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

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;