Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Forgot Password functionality and related components

Browse Source 
- 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:
Nalvazhuthi
2025-08-18 10:07:47 +05:30
parent 5d17c1125b
commit cd465edc56
20 changed files with 500 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/src/styles/base/reset.scss
View File

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

53
app/src/styles/layout/sidebar.scss
View File

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

1
app/src/styles/main.scss
View File

@@ -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
View 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);
}
}
}
}
}
}
}

11
app/src/styles/pages/userAuth.scss
View File

@@ -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;