Add Forgot Password functionality and related components
- Introduced new components for the Forgot Password flow: EmailInput, OTPInput, OTPVerification, PasswordSetup, and ConfirmationMessage. - Implemented navigation updates in DashboardCard for project links. - Added a new decal image asset for the categories. - Updated sidebar assets to include decals. - Enhanced UserAuth page to include a link for forgotten passwords. - Created a dedicated ForgotPassword page to manage the entire password recovery process. - Added styles for the new Forgot Password components and updated existing styles for consistency.
This commit is contained in:
@@ -6,6 +6,7 @@ import Project from "./pages/Project";
|
||||
import UserAuth from "./pages/UserAuth";
|
||||
import "./styles/main.scss";
|
||||
import { LoggerProvider } from "./components/ui/log/LoggerContext";
|
||||
import ForgotPassword from "./pages/ForgotPassword";
|
||||
|
||||
const App: React.FC = () => {
|
||||
|
||||
@@ -19,8 +20,9 @@ const App: React.FC = () => {
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<UserAuth />} />
|
||||
<Route path="/forgot" element={<ForgotPassword />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/:projectId" element={<Project />} />
|
||||
<Route path="/projects/:projectId" element={<Project />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</LoggerProvider>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.57009 1.77983C4.05009 1.59983 5.00009 1.70983 5.25009 2.24983C5.50009 2.78983 5.65009 3.48983 5.66009 3.31983C5.64096 2.80313 5.68461 2.28602 5.79009 1.77983C5.90124 1.45565 6.15591 1.20098 6.48009 1.08983C6.77741 0.995805 7.09308 0.975217 7.40009 1.02983C7.71051 1.09373 7.98544 1.27226 8.17009 1.52983C8.40404 2.11296 8.53596 2.73199 8.56009 3.35983C8.58497 2.82409 8.67565 2.29344 8.83009 1.77983C8.9972 1.54438 9.24123 1.37462 9.52009 1.29983C9.85069 1.23939 10.1895 1.23939 10.5201 1.29983C10.7915 1.38989 11.0288 1.56089 11.2001 1.78983C11.4125 2.31998 11.5407 2.88008 11.5801 3.44983C11.5801 3.58983 11.6501 3.05983 11.8701 2.70983C12.0468 2.18516 12.6154 1.9031 13.1401 2.07983C13.6648 2.25656 13.9468 2.82516 13.7701 3.34983C13.7701 3.99983 13.7701 3.96983 13.7701 4.40983C13.7701 4.84983 13.7701 5.23983 13.7701 5.60983C13.7341 6.19505 13.6538 6.77671 13.5301 7.34983C13.3565 7.85715 13.1143 8.33829 12.8101 8.77983C12.3247 9.31989 11.9235 9.93009 11.6201 10.5898C11.5461 10.9178 11.5125 11.2537 11.5201 11.5898C11.5191 11.9005 11.5594 12.2099 11.6401 12.5098C11.2313 12.5535 10.8189 12.5535 10.4101 12.5098C10.0201 12.4498 9.54009 11.6698 9.41009 11.4298C9.34577 11.301 9.21412 11.2195 9.07009 11.2195C8.92607 11.2195 8.79442 11.301 8.73009 11.4298C8.51009 11.8098 8.02009 12.4998 7.73009 12.5398C7.06009 12.6198 5.67009 12.5398 4.59009 12.5398C4.59009 12.5398 4.78009 11.5398 4.36009 11.1798C3.94009 10.8198 3.53009 10.3998 3.22009 10.1198L2.39009 9.19983C1.80478 8.65651 1.37647 7.96569 1.15009 7.19983C0.940094 6.25983 0.960094 5.80983 1.15009 5.42983C1.34388 5.11604 1.64649 4.88464 2.00009 4.77983C2.29386 4.72654 2.59628 4.74716 2.88009 4.83983C3.07636 4.922 3.24598 5.05701 3.37009 5.22983C3.60009 5.53983 3.68009 5.68983 3.58009 5.34983C3.48009 5.00983 3.26009 4.75983 3.15009 4.34983C2.93595 3.86563 2.80737 3.34796 2.77009 2.81983C2.81108 2.346 3.14192 1.9474 3.60009 1.81983" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.57009 1.77983C4.05009 1.59983 5.00009 1.70983 5.25009 2.24983C5.50009 2.78983 5.65009 3.48983 5.66009 3.31983C5.64096 2.80313 5.68461 2.28602 5.79009 1.77983C5.90124 1.45565 6.15591 1.20098 6.48009 1.08983C6.77741 0.995805 7.09308 0.975217 7.40009 1.02983C7.71051 1.09373 7.98544 1.27226 8.17009 1.52983C8.40404 2.11296 8.53596 2.73199 8.56009 3.35983C8.58497 2.82409 8.67565 2.29344 8.83009 1.77983C8.9972 1.54438 9.24123 1.37462 9.52009 1.29983C9.85069 1.23939 10.1895 1.23939 10.5201 1.29983C10.7915 1.38989 11.0288 1.56089 11.2001 1.78983C11.4125 2.31998 11.5407 2.88008 11.5801 3.44983C11.5801 3.58983 11.6501 3.05983 11.8701 2.70983C12.0468 2.18516 12.6154 1.9031 13.1401 2.07983C13.6648 2.25656 13.9468 2.82516 13.7701 3.34983C13.7701 3.99983 13.7701 3.96983 13.7701 4.40983C13.7701 4.84983 13.7701 5.23983 13.7701 5.60983C13.7341 6.19505 13.6538 6.77671 13.5301 7.34983C13.3565 7.85715 13.1143 8.33829 12.8101 8.77983C12.3247 9.31989 11.9235 9.93009 11.6201 10.5898C11.5461 10.9178 11.5125 11.2537 11.5201 11.5898C11.5191 11.9005 11.5594 12.2099 11.6401 12.5098C11.2313 12.5535 10.8189 12.5535 10.4101 12.5098C10.0201 12.4498 9.54009 11.6698 9.41009 11.4298C9.34577 11.301 9.21412 11.2195 9.07009 11.2195C8.92607 11.2195 8.79442 11.301 8.73009 11.4298C8.51009 11.8098 8.02009 12.4998 7.73009 12.5398C7.06009 12.6198 5.67009 12.5398 4.59009 12.5398C4.59009 12.5398 4.78009 11.5398 4.36009 11.1798C3.94009 10.8198 3.53009 10.3998 3.22009 10.1198L2.39009 9.19983C1.80478 8.65651 1.37647 7.96569 1.15009 7.19983C0.940094 6.25983 0.960094 5.80983 1.15009 5.42983C1.34388 5.11604 1.64649 4.88464 2.00009 4.77983C2.29386 4.72654 2.59628 4.74716 2.88009 4.83983C3.07636 4.922 3.24598 5.05701 3.37009 5.22983C3.60009 5.53983 3.68009 5.68983 3.58009 5.34983C3.48009 5.00983 3.26009 4.75983 3.15009 4.34983C2.93595 3.86563 2.80737 3.34796 2.77009 2.81983C2.79054 2.33907 3.11066 1.92291 3.57009 1.77983Z" stroke="black" stroke-width="0.75" stroke-linejoin="round"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.57009 1.77983C4.05009 1.59983 5.00009 1.70983 5.25009 2.24983C5.50009 2.78983 5.65009 3.48983 5.66009 3.31983C5.64096 2.80313 5.68461 2.28602 5.79009 1.77983C5.90124 1.45565 6.15591 1.20098 6.48009 1.08983C6.77741 0.995805 7.09308 0.975217 7.40009 1.02983C7.71051 1.09373 7.98544 1.27226 8.17009 1.52983C8.40404 2.11296 8.53596 2.73199 8.56009 3.35983C8.58497 2.82409 8.67565 2.29344 8.83009 1.77983C8.9972 1.54438 9.24123 1.37462 9.52009 1.29983C9.85069 1.23939 10.1895 1.23939 10.5201 1.29983C10.7915 1.38989 11.0288 1.56089 11.2001 1.78983C11.4125 2.31998 11.5407 2.88008 11.5801 3.44983C11.5801 3.58983 11.6501 3.05983 11.8701 2.70983C12.0468 2.18516 12.6154 1.9031 13.1401 2.07983C13.6648 2.25656 13.9468 2.82516 13.7701 3.34983C13.7701 3.99983 13.7701 3.96983 13.7701 4.40983C13.7701 4.84983 13.7701 5.23983 13.7701 5.60983C13.7341 6.19505 13.6538 6.77671 13.5301 7.34983C13.3565 7.85715 13.1143 8.33829 12.8101 8.77983C12.3247 9.31989 11.9235 9.93009 11.6201 10.5898C11.5461 10.9178 11.5125 11.2537 11.5201 11.5898C11.5191 11.9005 11.5594 12.2099 11.6401 12.5098C11.2313 12.5535 10.8189 12.5535 10.4101 12.5098C10.0201 12.4498 9.54009 11.6698 9.41009 11.4298C9.34577 11.301 9.21412 11.2195 9.07009 11.2195C8.92607 11.2195 8.79442 11.301 8.73009 11.4298C8.51009 11.8098 8.02009 12.4998 7.73009 12.5398C7.06009 12.6198 5.67009 12.5398 4.59009 12.5398C4.59009 12.5398 4.78009 11.5398 4.36009 11.1798C3.94009 10.8198 3.53009 10.3998 3.22009 10.1198L2.39009 9.19983C1.80478 8.65651 1.37647 7.96569 1.15009 7.19983C0.940094 6.25983 0.960094 5.80983 1.15009 5.42983C1.34388 5.11604 1.64649 4.88464 2.00009 4.77983C2.29386 4.72654 2.59628 4.74716 2.88009 4.83983C3.07636 4.922 3.24598 5.05701 3.37009 5.22983C3.60009 5.53983 3.68009 5.68983 3.58009 5.34983C3.48009 5.00983 3.26009 4.75983 3.15009 4.34983C2.93595 3.86563 2.80737 3.34796 2.77009 2.81983C2.79054 2.33907 3.11066 1.92291 3.57009 1.77983Z" stroke="black" stroke-width="0.75" stroke-linejoin="round"/>
|
||||
<path d="M11.3203 9.4548V6.00302C11.3203 5.7964 11.1524 5.62891 10.9453 5.62891C10.7382 5.62891 10.5703 5.7964 10.5703 6.00302V9.4548C10.5703 9.66141 10.7382 9.82891 10.9453 9.82891C11.1524 9.82891 11.3203 9.66141 11.3203 9.4548Z" fill="black"/>
|
||||
<path d="M9.34031 9.45353L9.32031 5.99998C9.31911 5.79386 9.15025 5.62772 8.94315 5.62891C8.73605 5.6301 8.56913 5.79816 8.57032 6.00428L8.59032 9.45783C8.59151 9.66396 8.76037 9.83009 8.96747 9.8289C9.17458 9.82771 9.3415 9.65965 9.34031 9.45353Z" fill="black"/>
|
||||
<path d="M6.57032 6.00881L6.59032 9.45342C6.59153 9.66201 6.7604 9.83012 6.96751 9.8289C7.17461 9.82768 7.34152 9.65759 7.34031 9.449L7.32031 6.0044C7.3191 5.7958 7.15022 5.62769 6.94312 5.62891C6.73602 5.63013 6.56911 5.80022 6.57032 6.00881Z" fill="black"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
@@ -1,6 +1,6 @@
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.90366 12.8932C3.62366 12.5332 3.27366 11.8032 2.66366 10.8932C2.31366 10.3932 1.45366 9.44321 1.19366 8.95321C1.00623 8.65544 0.951847 8.29286 1.04366 7.95321C1.20062 7.30742 1.81322 6.87903 2.47366 6.95321C2.98446 7.05582 3.45388 7.30618 3.82366 7.67321C4.08184 7.91638 4.31933 8.18063 4.53366 8.46321C4.69366 8.66321 4.73366 8.74321 4.91366 8.97321C5.09366 9.20321 5.21366 9.43321 5.12366 9.09321C5.05366 8.59321 4.93366 7.75321 4.76366 7.00321C4.63366 6.43321 4.60366 6.34321 4.48366 5.91321C4.36366 5.48321 4.29366 5.12321 4.16366 4.63321C4.04483 4.15178 3.95137 3.66444 3.88366 3.17321C3.75761 2.54491 3.84932 1.89242 4.14366 1.32321C4.49305 0.994578 5.00559 0.907841 5.44366 1.10321C5.88426 1.42855 6.21276 1.88286 6.38366 2.40321C6.64573 3.0436 6.82062 3.71627 6.90366 4.40321C7.06366 5.40321 7.37366 6.86321 7.38366 7.16321C7.38366 6.79321 7.31366 6.01321 7.38366 5.66321C7.45301 5.29833 7.70662 4.99552 8.05366 4.86321C8.35147 4.77183 8.66651 4.75129 8.97366 4.80321C9.2837 4.86802 9.55832 5.04635 9.74366 5.30321C9.97534 5.8866 10.1039 6.50581 10.1237 7.13321C10.1504 6.5838 10.2445 6.03974 10.4037 5.51321C10.5708 5.27776 10.8148 5.108 11.0937 5.03321C11.4243 4.97276 11.7631 4.97276 12.0937 5.03321C12.3648 5.12384 12.6019 5.29472 12.7737 5.52321C12.9854 6.05355 13.1136 6.61355 13.1537 7.18321C13.1537 7.32321 13.2237 6.79321 13.4437 6.44321C13.558 6.10381 13.8447 5.85118 14.1958 5.78048C14.5469 5.70979 14.909 5.83178 15.1458 6.10048C15.3826 6.36919 15.458 6.74381 15.3437 7.08321C15.3437 7.73321 15.3437 7.70321 15.3437 8.14321C15.3437 8.58321 15.3437 8.97321 15.3437 9.34321C15.3072 9.92839 15.227 10.51 15.1037 11.0832C14.9296 11.5903 14.6874 12.0714 14.3837 12.5132C13.8981 13.0532 13.4969 13.6634 13.1937 14.3232C13.1184 14.651 13.0848 14.987 13.0937 15.3232C13.0927 15.6338 13.133 15.9432 13.2137 16.2432C12.8048 16.2864 12.3925 16.2864 11.9837 16.2432C11.5937 16.1832 11.1137 15.4032 10.9837 15.1632C10.9193 15.0343 10.7877 14.9529 10.6437 14.9529C10.4996 14.9529 10.368 15.0343 10.3037 15.1632C10.0837 15.5432 9.59366 16.2332 9.25366 16.2732C8.58366 16.3532 7.20366 16.2732 6.11366 16.2732C6.11366 16.2732 6.29366 15.2732 5.88366 14.9132C5.47366 14.5532 5.05366 14.1332 4.74366 13.8532L3.90366 12.8932Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.90366 12.8932C3.62366 12.5332 3.27366 11.8032 2.66366 10.8932C2.31366 10.3932 1.45366 9.44321 1.19366 8.95321C1.00623 8.65544 0.951847 8.29286 1.04366 7.95321C1.20062 7.30742 1.81322 6.87903 2.47366 6.95321C2.98446 7.05582 3.45388 7.30618 3.82366 7.67321C4.08184 7.91638 4.31933 8.18063 4.53366 8.46321C4.69366 8.66321 4.73366 8.74321 4.91366 8.97321C5.09366 9.20321 5.21366 9.43321 5.12366 9.09321C5.05366 8.59321 4.93366 7.75321 4.76366 7.00321C4.63366 6.43321 4.60366 6.34321 4.48366 5.91321C4.36366 5.48321 4.29366 5.12321 4.16366 4.63321C4.04483 4.15178 3.95137 3.66444 3.88366 3.17321C3.75761 2.54491 3.84932 1.89242 4.14366 1.32321C4.49305 0.994578 5.00559 0.907841 5.44366 1.10321C5.88426 1.42855 6.21276 1.88286 6.38366 2.40321C6.64573 3.0436 6.82062 3.71627 6.90366 4.40321C7.06366 5.40321 7.37366 6.86321 7.38366 7.16321C7.38366 6.79321 7.31366 6.01321 7.38366 5.66321C7.45301 5.29833 7.70662 4.99552 8.05366 4.86321C8.35147 4.77183 8.66651 4.75129 8.97366 4.80321C9.2837 4.86802 9.55832 5.04635 9.74366 5.30321C9.97534 5.8866 10.1039 6.50581 10.1237 7.13321C10.1504 6.5838 10.2445 6.03974 10.4037 5.51321C10.5708 5.27776 10.8148 5.108 11.0937 5.03321C11.4243 4.97276 11.7631 4.97276 12.0937 5.03321C12.3648 5.12384 12.6019 5.29472 12.7737 5.52321C12.9854 6.05355 13.1136 6.61355 13.1537 7.18321C13.1537 7.32321 13.2237 6.79321 13.4437 6.44321C13.558 6.10381 13.8447 5.85118 14.1958 5.78048C14.5469 5.70979 14.909 5.83178 15.1458 6.10048C15.3826 6.36919 15.458 6.74381 15.3437 7.08321C15.3437 7.73321 15.3437 7.70321 15.3437 8.14321C15.3437 8.58321 15.3437 8.97321 15.3437 9.34321C15.3072 9.92839 15.227 10.51 15.1037 11.0832C14.9296 11.5903 14.6874 12.0714 14.3837 12.5132C13.8981 13.0532 13.4969 13.6634 13.1937 14.3232C13.1184 14.651 13.0848 14.987 13.0937 15.3232C13.0927 15.6338 13.133 15.9432 13.2137 16.2432C12.8048 16.2864 12.3925 16.2864 11.9837 16.2432C11.5937 16.1832 11.1137 15.4032 10.9837 15.1632C10.9193 15.0343 10.7877 14.9529 10.6437 14.9529C10.4996 14.9529 10.368 15.0343 10.3037 15.1632C10.0837 15.5432 9.59366 16.2332 9.25366 16.2732C8.58366 16.3532 7.20366 16.2732 6.11366 16.2732C6.11366 16.2732 6.29366 15.2732 5.88366 14.9132C5.47366 14.5532 5.05366 14.1332 4.74366 13.8532L3.90366 12.8932Z" stroke="black" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.90366 12.8932C3.62366 12.5332 3.27366 11.8032 2.66366 10.8932C2.31366 10.3932 1.45366 9.44321 1.19366 8.95321C1.00623 8.65544 0.951847 8.29286 1.04366 7.95321C1.20062 7.30742 1.81322 6.87903 2.47366 6.95321C2.98446 7.05582 3.45388 7.30618 3.82366 7.67321C4.08184 7.91638 4.31933 8.18063 4.53366 8.46321C4.69366 8.66321 4.73366 8.74321 4.91366 8.97321C5.09366 9.20321 5.21366 9.43321 5.12366 9.09321C5.05366 8.59321 4.93366 7.75321 4.76366 7.00321C4.63366 6.43321 4.60366 6.34321 4.48366 5.91321C4.36366 5.48321 4.29366 5.12321 4.16366 4.63321C4.04483 4.15178 3.95137 3.66444 3.88366 3.17321C3.75761 2.54491 3.84932 1.89242 4.14366 1.32321C4.49305 0.994578 5.00559 0.907841 5.44366 1.10321C5.88426 1.42855 6.21276 1.88286 6.38366 2.40321C6.64573 3.0436 6.82062 3.71627 6.90366 4.40321C7.06366 5.40321 7.37366 6.86321 7.38366 7.16321C7.38366 6.79321 7.31366 6.01321 7.38366 5.66321C7.45301 5.29833 7.70662 4.99552 8.05366 4.86321C8.35147 4.77183 8.66651 4.75129 8.97366 4.80321C9.2837 4.86802 9.55832 5.04635 9.74366 5.30321C9.97534 5.8866 10.1039 6.50581 10.1237 7.13321C10.1504 6.5838 10.2445 6.03974 10.4037 5.51321C10.5708 5.27776 10.8148 5.108 11.0937 5.03321C11.4243 4.97276 11.7631 4.97276 12.0937 5.03321C12.3648 5.12384 12.6019 5.29472 12.7737 5.52321C12.9854 6.05355 13.1136 6.61355 13.1537 7.18321C13.1537 7.32321 13.2237 6.79321 13.4437 6.44321C13.558 6.10381 13.8447 5.85118 14.1958 5.78048C14.5469 5.70979 14.909 5.83178 15.1458 6.10048C15.3826 6.36919 15.458 6.74381 15.3437 7.08321C15.3437 7.73321 15.3437 7.70321 15.3437 8.14321C15.3437 8.58321 15.3437 8.97321 15.3437 9.34321C15.3072 9.92839 15.227 10.51 15.1037 11.0832C14.9296 11.5903 14.6874 12.0714 14.3837 12.5132C13.8981 13.0532 13.4969 13.6634 13.1937 14.3232C13.1184 14.651 13.0848 14.987 13.0937 15.3232C13.0927 15.6338 13.133 15.9432 13.2137 16.2432C12.8048 16.2864 12.3925 16.2864 11.9837 16.2432C11.5937 16.1832 11.1137 15.4032 10.9837 15.1632C10.9193 15.0343 10.7877 14.9529 10.6437 14.9529C10.4996 14.9529 10.368 15.0343 10.3037 15.1632C10.0837 15.5432 9.59366 16.2332 9.25366 16.2732C8.58366 16.3532 7.20366 16.2732 6.11366 16.2732C6.11366 16.2732 6.29366 15.2732 5.88366 14.9132C5.47366 14.5532 5.05366 14.1332 4.74366 13.8532L3.90366 12.8932Z" stroke="black" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.3828 13.4392V9.98739C12.3828 9.78078 12.2149 9.61328 12.0078 9.61328C11.8007 9.61328 11.6328 9.78078 11.6328 9.98739V13.4392C11.6328 13.6458 11.8007 13.8133 12.0078 13.8133C12.2149 13.8133 12.3828 13.6458 12.3828 13.4392Z" fill="black"/>
|
||||
<path d="M10.4028 13.4379L10.3828 9.98435C10.3816 9.77823 10.2128 9.6121 10.0057 9.61329C9.79855 9.61448 9.63163 9.78253 9.63282 9.98865L9.65282 13.4422C9.65401 13.6483 9.82287 13.8145 10.03 13.8133C10.2371 13.8121 10.404 13.644 10.4028 13.4379Z" fill="black"/>
|
||||
<path d="M7.63282 9.99227L7.65282 13.4387C7.65403 13.6468 7.8229 13.8145 8.03 13.8133C8.2371 13.8121 8.40401 13.6424 8.40281 13.4343L8.38281 9.98788C8.3816 9.77978 8.21273 9.61207 8.00563 9.61329C7.79852 9.6145 7.63161 9.78418 7.63282 9.99227Z" fill="black"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
app/src/assets/image/categories/decal.png
Normal file
BIN
app/src/assets/image/categories/decal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
@@ -75,7 +75,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||
|
||||
setLoadingProgress(1);
|
||||
setProjectName(projectName);
|
||||
navigate(`/${projectId}`);
|
||||
navigate(`/projects/${projectId}`);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
@@ -108,7 +108,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||
setIsKebabOpen(false);
|
||||
}
|
||||
} catch (error) {}
|
||||
window.open(`/${projectId}`, "_blank");
|
||||
window.open(`/projects/${projectId}`, "_blank");
|
||||
break;
|
||||
case "rename":
|
||||
setIsRenaming(true);
|
||||
|
||||
15
app/src/components/forgotPassword/ConfirmationMessgae.tsx
Normal file
15
app/src/components/forgotPassword/ConfirmationMessgae.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import { SuccessIcon } from '../icons/ExportCommonIcons';
|
||||
|
||||
const ConfirmationMessage: React.FC = () => {
|
||||
return (
|
||||
<div className='request-container'>
|
||||
<div className="icon"><SuccessIcon /></div>
|
||||
<h1 className='header'>Successfully</h1>
|
||||
<p className='sub-header'>Your password has been reset successfully</p>
|
||||
<a href='/' className='login'>Login</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmationMessage;
|
||||
30
app/src/components/forgotPassword/EmailInput.tsx
Normal file
30
app/src/components/forgotPassword/EmailInput.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
email: string;
|
||||
setEmail: (value: string) => void;
|
||||
onSubmit: () => void;
|
||||
}
|
||||
|
||||
const EmailInput: React.FC<Props> = ({ email, setEmail, onSubmit }) => {
|
||||
return (
|
||||
<div className='request-container'>
|
||||
<h1 className='header'>Forgot password</h1>
|
||||
<p className='sub-header'>
|
||||
Enter your email for the verification process, we will send a 4-digit code to your email.
|
||||
</p>
|
||||
<form className='auth-form' onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
|
||||
<input
|
||||
type='email'
|
||||
placeholder='Email'
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button type='submit' className='continue-button'>Continue</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailInput;
|
||||
52
app/src/components/forgotPassword/OTPInput.tsx
Normal file
52
app/src/components/forgotPassword/OTPInput.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
|
||||
const OTPInput: React.FC<{ length?: number; onComplete: (otp: string) => void }> = ({ length = 4, onComplete }) => {
|
||||
const [otpValues, setOtpValues] = useState<string[]>(Array(length).fill(''));
|
||||
const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
|
||||
|
||||
// Auto focus first input on mount
|
||||
useEffect(() => {
|
||||
inputsRef.current[0]?.focus();
|
||||
}, []);
|
||||
|
||||
const handleChange = (value: string, index: number) => {
|
||||
if (/^[0-9]?$/.test(value)) {
|
||||
const newOtp = [...otpValues];
|
||||
newOtp[index] = value;
|
||||
setOtpValues(newOtp);
|
||||
|
||||
if (value && index < length - 1) {
|
||||
inputsRef.current[index + 1]?.focus();
|
||||
}
|
||||
|
||||
if (newOtp.every((digit) => digit !== '')) {
|
||||
onComplete(newOtp.join(''));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
|
||||
if (e.key === 'Backspace' && !otpValues[index] && index > 0) {
|
||||
inputsRef.current[index - 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="otp-container">
|
||||
{otpValues.map((value, index) => (
|
||||
<input
|
||||
key={index}
|
||||
type="text"
|
||||
className="otp-input"
|
||||
maxLength={1}
|
||||
value={value}
|
||||
onChange={(e) => handleChange(e.target.value, index)}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
ref={(el) => (inputsRef.current[index] = el)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OTPInput;
|
||||
57
app/src/components/forgotPassword/OTP_Verification.tsx
Normal file
57
app/src/components/forgotPassword/OTP_Verification.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React, { useState } from 'react';
|
||||
import OTPInput from './OTPInput';
|
||||
|
||||
interface Props {
|
||||
email: string;
|
||||
timer: number;
|
||||
setCode: (value: string) => void;
|
||||
onSubmit: () => void;
|
||||
resendCode: () => void;
|
||||
}
|
||||
|
||||
const OTPVerification: React.FC<Props> = ({ email, timer, setCode, onSubmit, resendCode }) => {
|
||||
const [otp, setOtp] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('otp.length: ', otp.length);
|
||||
if (otp.length === 4) {
|
||||
onSubmit();
|
||||
} else {
|
||||
alert('Please enter the 4-digit code');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='request-container'>
|
||||
<h1 className='header'>Verification</h1>
|
||||
<p className='sub-header'>
|
||||
Enter the 4-digit code sent to <strong>{email}</strong>.
|
||||
</p>
|
||||
<form className='auth-form' onSubmit={handleSubmit}>
|
||||
<OTPInput length={4} onComplete={(code) => { setOtp(code); setCode(code); }} />
|
||||
<div className="timing">
|
||||
{timer > 0
|
||||
? `${String(Math.floor(timer / 60)).padStart(2, '0')}:${String(timer % 60).padStart(2, '0')}`
|
||||
: ''}
|
||||
</div>
|
||||
<button
|
||||
type='submit'
|
||||
className='continue-button'
|
||||
disabled={otp.length < 4} // prevent clicking if not complete
|
||||
>
|
||||
Verify
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
className={`resend ${timer > 0 ? 'disabled' : ''}`}
|
||||
onClick={timer === 0 ? resendCode : undefined}
|
||||
style={{ cursor: timer === 0 ? 'pointer' : 'not-allowed', opacity: timer === 0 ? 1 : 0.5 }}
|
||||
>
|
||||
If you didn’t receive a code, <span>Resend</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OTPVerification;
|
||||
77
app/src/components/forgotPassword/PasswordSetup.tsx
Normal file
77
app/src/components/forgotPassword/PasswordSetup.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React, { useState } from 'react';
|
||||
import { EyeIcon } from '../icons/ExportCommonIcons';
|
||||
|
||||
interface Props {
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
setNewPassword: (value: string) => void;
|
||||
setConfirmPassword: (value: string) => void;
|
||||
onSubmit: () => void;
|
||||
}
|
||||
|
||||
const PasswordSetup: React.FC<Props> = ({
|
||||
newPassword,
|
||||
confirmPassword,
|
||||
setNewPassword,
|
||||
setConfirmPassword,
|
||||
onSubmit
|
||||
}) => {
|
||||
const [showNewPassword, setShowNewPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className='request-container'>
|
||||
<h1 className='header'>New Password</h1>
|
||||
<p className='sub-header'>Set the new password for your account so you can login and access all features.</p>
|
||||
<form
|
||||
className='auth-form'
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (newPassword !== confirmPassword) {
|
||||
alert('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
<div className="password-container">
|
||||
<input
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
placeholder='Enter new password'
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="toggle-password"
|
||||
onClick={() => setShowNewPassword(prev => !prev)}
|
||||
>
|
||||
<EyeIcon isClosed={!showNewPassword} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="password-container">
|
||||
<input
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
placeholder='Confirm password'
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="toggle-password"
|
||||
onClick={() => setShowConfirmPassword(prev => !prev)}
|
||||
>
|
||||
<EyeIcon isClosed={!showConfirmPassword} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type='submit' className='continue-button'>Update password</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordSetup;
|
||||
@@ -192,7 +192,7 @@ export function DublicateIcon() {
|
||||
<g clip-path="url(#clip0_1_190)">
|
||||
<path d="M9 1.5H2C1.72386 1.5 1.5 1.72386 1.5 2V9C1.5 9.27615 1.27614 9.5 1 9.5C0.72386 9.5 0.5 9.27615 0.5 9V2C0.5 1.17158 1.17158 0.5 2 0.5H9C9.27615 0.5 9.5 0.72386 9.5 1C9.5 1.27614 9.27615 1.5 9 1.5Z" fill="white" />
|
||||
<path d="M6.5 5.5C6.5 5.22385 6.72385 5 7 5C7.27615 5 7.5 5.22385 7.5 5.5V6.5H8.5C8.77615 6.5 9 6.72385 9 7C9 7.27615 8.77615 7.5 8.5 7.5H7.5V8.5C7.5 8.77615 7.27615 9 7 9C6.72385 9 6.5 8.77615 6.5 8.5V7.5H5.5C5.22385 7.5 5 7.27615 5 7C5 6.72385 5.22385 6.5 5.5 6.5H6.5V5.5Z" fill="white" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C10.8285 2.5 11.5 3.17158 11.5 4V10C11.5 10.8285 10.8285 11.5 10 11.5H4C3.17158 11.5 2.5 10.8285 2.5 10V4C2.5 3.17158 3.17158 2.5 4 2.5H10ZM10 3.5C10.2761 3.5 10.5 3.72386 10.5 4V10C10.5 10.2761 10.2761 10.5 10 10.5H4C3.72386 10.5 3.5 10.2761 3.5 10V4C3.5 3.72386 3.72386 3.5 4 3.5H10Z" fill="white" />
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10 2.5C10.8285 2.5 11.5 3.17158 11.5 4V10C11.5 10.8285 10.8285 11.5 10 11.5H4C3.17158 11.5 2.5 10.8285 2.5 10V4C2.5 3.17158 3.17158 2.5 4 2.5H10ZM10 3.5C10.2761 3.5 10.5 3.72386 10.5 4V10C10.5 10.2761 10.2761 10.5 10 10.5H4C3.72386 10.5 3.5 10.2761 3.5 10V4C3.5 3.72386 3.72386 3.5 4 3.5H10Z" fill="white" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_190">
|
||||
@@ -278,7 +278,7 @@ export function MoveIcon() {
|
||||
export function RotateIcon() {
|
||||
return (
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -286,7 +286,7 @@ export function RotateIcon() {
|
||||
export function GroupIcon() {
|
||||
return (
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1335,3 +1335,14 @@ export const GreenTickIcon = () => {
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const SuccessIcon = () => {
|
||||
return (
|
||||
<svg width="155" height="155" viewBox="0 0 155 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M115.596 48.1456C117.888 50.4283 117.896 54.1368 115.613 56.4288L66.2605 105.982C63.9779 108.274 60.2695 108.281 57.9775 105.999L39.9789 88.075C37.6868 85.7924 37.6791 82.0838 39.9617 79.7917C42.2443 77.4996 45.9528 77.4919 48.2449 79.7745L62.0935 93.5657L107.313 48.1624C109.596 45.8704 113.304 45.8629 115.596 48.1456Z" fill="#244A84" />
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M77.1586 11.7143C46.1114 11.7143 20.065 33.3937 13.379 62.4361L13.379 62.4362C12.2906 67.1635 11.7143 72.0909 11.7143 77.1586C11.7143 113.275 41.0421 142.603 77.1586 142.603C113.275 142.603 142.603 113.275 142.603 77.1586C142.603 41.0421 113.275 11.7143 77.1586 11.7143ZM1.96331 59.808C9.8455 25.5697 40.53 0 77.1586 0C119.745 0 154.317 34.5725 154.317 77.1586C154.317 119.745 119.745 154.317 77.1586 154.317C34.5725 154.317 0 119.745 0 77.1586C0 71.1999 0.677961 65.3909 1.96331 59.808Z" fill="#C2CDE0" />
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -13,6 +13,7 @@ import storage from "../../../assets/image/categories/storage.png";
|
||||
import office from "../../../assets/image/categories/office.png";
|
||||
import safety from "../../../assets/image/categories/safety.png";
|
||||
import feneration from "../../../assets/image/categories/feneration.png";
|
||||
import decal from "../../../assets/image/categories/decal.png";
|
||||
import SkeletonUI from "../../templates/SkeletonUI";
|
||||
// -------------------------------------
|
||||
|
||||
@@ -86,6 +87,7 @@ const Assets: React.FC = () => {
|
||||
useEffect(() => {
|
||||
setCategoryList([
|
||||
{ category: "Fenestration", categoryImage: feneration },
|
||||
{ category: "Decals", categoryImage: decal },
|
||||
{ category: "Vehicles", categoryImage: vehicle },
|
||||
{ category: "Workstation", categoryImage: workStation },
|
||||
{ category: "Machines", categoryImage: machines },
|
||||
|
||||
92
app/src/pages/ForgotPassword.tsx
Normal file
92
app/src/pages/ForgotPassword.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { LogoIconLarge } from '../components/icons/Logo';
|
||||
import EmailInput from '../components/forgotPassword/EmailInput';
|
||||
import OTPVerification from '../components/forgotPassword/OTP_Verification';
|
||||
import PasswordSetup from '../components/forgotPassword/PasswordSetup';
|
||||
import ConfirmationMessage from '../components/forgotPassword/ConfirmationMessgae';
|
||||
|
||||
const ForgotPassword: React.FC = () => {
|
||||
const [step, setStep] = useState(1);
|
||||
const [email, setEmail] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [timer, setTimer] = useState(30);
|
||||
|
||||
useEffect(() => {
|
||||
let countdown: NodeJS.Timeout;
|
||||
if (step === 2 && timer > 0) {
|
||||
countdown = setTimeout(() => setTimer(prev => prev - 1), 1000);
|
||||
}
|
||||
return () => clearTimeout(countdown);
|
||||
}, [step, timer]);
|
||||
|
||||
const handleSubmitEmail = () => {
|
||||
setStep(2);
|
||||
setTimer(30);
|
||||
}
|
||||
const resendCode = () => {
|
||||
// TODO: call API to resend code
|
||||
setTimer(30);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='forgot-password-page auth-container'>
|
||||
<div className='forgot-password-wrapper'>
|
||||
<div className='logo-icon'>
|
||||
<LogoIconLarge />
|
||||
</div>
|
||||
|
||||
|
||||
{step === 1 && (
|
||||
<>
|
||||
<EmailInput
|
||||
email={email}
|
||||
setEmail={setEmail}
|
||||
onSubmit={handleSubmitEmail}
|
||||
/>
|
||||
<a href='/' className='login continue-button'>Login</a>
|
||||
</>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<OTPVerification
|
||||
email={email}
|
||||
timer={timer}
|
||||
setCode={setCode}
|
||||
onSubmit={() => setStep(3)}
|
||||
resendCode={resendCode}
|
||||
/>
|
||||
<a href='/' className='login'>Login</a>
|
||||
</>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
{step === 3 && (
|
||||
<>
|
||||
<PasswordSetup
|
||||
newPassword={newPassword}
|
||||
confirmPassword={confirmPassword}
|
||||
setNewPassword={setNewPassword}
|
||||
setConfirmPassword={setConfirmPassword}
|
||||
onSubmit={() => setStep(4)}
|
||||
/>
|
||||
<a href='/' className='login'>Login</a>
|
||||
</>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
{step === 4 && <ConfirmationMessage />}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPassword;
|
||||
@@ -58,10 +58,10 @@ const UserAuth: React.FC = () => {
|
||||
const projects = await recentlyViewed(organization, res.message.userId);
|
||||
if (res.message.isShare) {
|
||||
if (Object.values(projects.RecentlyViewed).length > 0) {
|
||||
const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
|
||||
if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == firstId)) {
|
||||
const recent_opend_projectID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
|
||||
if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == recent_opend_projectID)) {
|
||||
setLoadingProgress(1)
|
||||
navigate(`/${firstId}`)
|
||||
navigate(`/projects/${recent_opend_projectID}`)
|
||||
} else {
|
||||
navigate("/Dashboard")
|
||||
}
|
||||
@@ -200,6 +200,9 @@ const UserAuth: React.FC = () => {
|
||||
<EyeIcon isClosed={showPassword} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isSignIn && <a href="forgot" className="forgot-password">Forgot password ?</a>}
|
||||
|
||||
{!isSignIn && (
|
||||
<div className="policy-checkbox">
|
||||
<input type="checkbox" id="tos" required />
|
||||
|
||||
@@ -6,9 +6,17 @@
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
|
||||
input[type="password"]::-ms-reveal, /* For Microsoft Edge */
|
||||
input[type="password"]::-ms-clear, /* For Edge clear button */
|
||||
input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button */
|
||||
input[type="password"]::-webkit-inner-spin-button { /* Just in case */
|
||||
input[type="password"]::-ms-reveal,
|
||||
/* For Microsoft Edge */
|
||||
input[type="password"]::-ms-clear,
|
||||
/* For Edge clear button */
|
||||
input[type="password"]::-webkit-clear-button,
|
||||
/* For Chrome/Safari clear button */
|
||||
input[type="password"]::-webkit-inner-spin-button {
|
||||
/* Just in case */
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1657,11 +1657,12 @@
|
||||
|
||||
.sidebar-right-wrapper {
|
||||
.wall-properties-container {
|
||||
.wall-properties-section{
|
||||
.wall-properties-section {
|
||||
padding: 14px;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: var(--text-color);
|
||||
}
|
||||
@@ -1910,63 +1911,59 @@
|
||||
&:nth-child(1),
|
||||
&:nth-child(8) {
|
||||
&::after {
|
||||
@include gradient-by-child(
|
||||
1
|
||||
); // First child uses the first color
|
||||
@include gradient-by-child(1); // First child uses the first color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(2) {
|
||||
&::after {
|
||||
|
||||
// @include gradient-by-child(4); // Second child uses the second color
|
||||
background: linear-gradient(144.19deg, rgba(197, 137, 26, 0.7) 16.62%, rgba(69, 48, 10, 0.7) 85.81%);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(9) {
|
||||
&::after {
|
||||
@include gradient-by-child(
|
||||
2
|
||||
); // Second child uses the second color
|
||||
@include gradient-by-child(3); // Second child uses the second color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(10) {
|
||||
&::after {
|
||||
@include gradient-by-child(
|
||||
3
|
||||
); // Third child uses the third color
|
||||
@include gradient-by-child(3); // Third child uses the third color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4),
|
||||
&:nth-child(11) {
|
||||
&::after {
|
||||
@include gradient-by-child(
|
||||
4
|
||||
); // Fourth child uses the fourth color
|
||||
@include gradient-by-child(4); // Fourth child uses the fourth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5),
|
||||
&:nth-child(12) {
|
||||
&::after {
|
||||
@include gradient-by-child(
|
||||
5
|
||||
); // Fifth child uses the fifth color
|
||||
@include gradient-by-child(5); // Fifth child uses the fifth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6),
|
||||
&:nth-child(13) {
|
||||
&::after {
|
||||
@include gradient-by-child(
|
||||
6
|
||||
); // Fifth child uses the fifth color
|
||||
@include gradient-by-child(6); // Fifth child uses the fifth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7),
|
||||
&:nth-child(14) {
|
||||
&::after {
|
||||
@include gradient-by-child(
|
||||
7
|
||||
); // Fifth child uses the fifth color
|
||||
@include gradient-by-child(7); // Fifth child uses the fifth color
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2025,11 +2022,9 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-regular);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(37, 24, 51, 0) 0%,
|
||||
rgba(52, 41, 61, 0.5) 100%
|
||||
);
|
||||
background: linear-gradient(0deg,
|
||||
rgba(37, 24, 51, 0) 0%,
|
||||
rgba(52, 41, 61, 0.5) 100%);
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
@@ -2285,4 +2280,4 @@
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,6 +43,7 @@
|
||||
@use "pages/home";
|
||||
@use "pages/realTimeViz";
|
||||
@use "pages/userAuth";
|
||||
@use "pages/forgotPassword";
|
||||
|
||||
//
|
||||
@use "./scene/scene";
|
||||
|
||||
100
app/src/styles/pages/forgotPassword.scss
Normal file
100
app/src/styles/pages/forgotPassword.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
@use "../abstracts/variables.scss" as *;
|
||||
@use "../abstracts/mixins.scss" as *;
|
||||
|
||||
.forgot-password-page {
|
||||
|
||||
.header,
|
||||
.sub-header {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid var(--highlight-text-color);
|
||||
border-radius: 20px;
|
||||
background: transparent;
|
||||
color: var(--highlight-text-color);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forgot-password-wrapper {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.request-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.sub-header {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
margin: 0;
|
||||
|
||||
.continue-button {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.timing {
|
||||
margin: 6px 0;
|
||||
color: #F2451C;
|
||||
|
||||
}
|
||||
|
||||
.otp-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
|
||||
.otp-input {
|
||||
width: 60px !important;
|
||||
height: 60px !important;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px !important;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 1px solid var(--border-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -119,6 +119,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 12px;
|
||||
color: var(--text-color);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
Reference in New Issue
Block a user