From 7a56744fe602f1e001f8377d078ecb8f3bce9dcd Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 28 May 2024 21:28:15 +0330 Subject: [PATCH] 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