From abb4c165f02a1f95877251bd4b759b07d5e3f794 Mon Sep 17 00:00:00 2001 From: shubhamashish33 Date: Wed, 18 Feb 2026 16:24:58 +0530 Subject: [PATCH 1/4] expanded dark mode to all components --- .../add-member-modal.component.html | 118 +-- .../add-member-modal.component.ts | 2 +- .../splitz/dashboard/dashboard.component.html | 471 ++++++------ .../group-modal/group-modal.component.html | 89 ++- .../group-modal/group-modal.component.ts | 8 +- .../dashboard/groups/groups.component.html | 696 ++++++++++-------- .../dashboard/groups/groups.component.ts | 8 +- .../forgot-password.component.css | 9 +- .../forgot-password.component.html | 147 ++-- .../login-page/login-page.component.css | 113 +-- .../login-page/login-page.component.html | 212 +++--- .../register-page/register-page.component.css | 158 +--- .../register-page.component.html | 296 ++++---- UI/src/app/splitz/services/splitz.service.ts | 8 +- .../setup-password.component.css | 9 +- .../setup-password.component.html | 212 +++--- .../verify-email/verify-email.component.css | 32 +- .../verify-email/verify-email.component.html | 34 +- 18 files changed, 1251 insertions(+), 1371 deletions(-) diff --git a/UI/src/app/splitz/dashboard/add-member-modal/add-member-modal.component.html b/UI/src/app/splitz/dashboard/add-member-modal/add-member-modal.component.html index 7a59d4f..6b75832 100644 --- a/UI/src/app/splitz/dashboard/add-member-modal/add-member-modal.component.html +++ b/UI/src/app/splitz/dashboard/add-member-modal/add-member-modal.component.html @@ -1,16 +1,23 @@ -
-
- -
+
+
+ +
- +

Add Members

-
@if (errorMessage) { -
- - - - {{ errorMessage }} -
+
+ + + + {{ errorMessage }} +
}
@for (email of userEmails; track trackByIndex(i); let i = $index) { -
-
-
- - - -
-
- - @if (getEmailError(i)) { -

- - - - {{ getEmailError(i) }} -

- } -
+
+
+
+ + + +
- @if (userEmails.length > 1) { - - } + {{ getEmailError(i) }} +

+ } +
+ @if (userEmails.length > 1) { + + } +
}
-
- - +
+ +

Enter email addresses of people you want to add. You can add more members later. @@ -87,10 +113,14 @@

Add Members

- - -
-
- } +
+
+ @if (oweTo && oweTo.length) { +
+ @for (person of oweTo; track trackByPersonName($index, person)) { +
+
+
+ {{ getInitials(person.name) }} +
+
+ {{ person.name }} + Outstanding debt +
- } @else { -
-
🎉
- You owe nothing! - You're all caught up with payments +
+ + {{ person.amount | currency:'INR':'symbol': '1.2-2' }} + +
+
}
+ } @else { +
+
🎉
+ You owe nothing! + You're all caught up with payments +
+ }
+
-
-
-
-
- - - -
-

You Are Owed

+
+
+
+
+ + + +
+

You Are Owed

-
- @if (owedFrom && owedFrom.length) { -
- @for (person of owedFrom; track trackByPersonName($index, person)) { -
-
-
- {{ getInitials(person.name) }} -
-
- {{ person.name }} - Owes you money -
-
-
- - {{ person.amount | currency:'INR':'symbol': '1.2-2' }} - - -
-
- } +
+
+ @if (owedFrom && owedFrom.length) { +
+ @for (person of owedFrom; track trackByPersonName($index, person)) { +
+
+
+ {{ getInitials(person.name) }} +
+
+ {{ person.name }} + Owes you money +
- } @else { -
-
💸
- No one owes you! - Time to add some expenses +
+ + {{ person.amount | currency:'INR':'symbol': '1.2-2' }} + +
+
}
+ } @else { +
+
💸
+ No one owes you! + Time to add some expenses +
+ }
+
-
-
-
-
- - - -
-

Groups

-
- +
+

Groups

-
- @if (groups && groups.length) { -
- @for (group of groups; track trackByGroupId($index, group)) { -
- -
- - - -
-
- {{ group.groupName }} - {{ getGroupStatus(group.netBalance) }} -
- -
-
- + + + + +
+
+ @if (groups && groups.length) { +
+ @for (group of groups; track trackByGroupId($index, group)) { +
+ +
+ + + + +
+
+ {{ + group.groupName }} + {{ getGroupStatus(group.netBalance) }} +
+ +
+
+ - {{ group.netBalance | currency:'INR':'symbol': '1.2-2' }} - -
- -
-
- } -
- } @else { -
-
👥
- No groups yet! - Create a group to start splitting expenses -
+
+
}
+ } @else { +
+
👥
+ No groups yet! + Create a group to start splitting expenses + +
+ }
+
} @if (showExpenseModal) { - - + + } @if (showGroupModal) { - - + + } \ No newline at end of file diff --git a/UI/src/app/splitz/dashboard/group-modal/group-modal.component.html b/UI/src/app/splitz/dashboard/group-modal/group-modal.component.html index ab5067f..0f24762 100644 --- a/UI/src/app/splitz/dashboard/group-modal/group-modal.component.html +++ b/UI/src/app/splitz/dashboard/group-modal/group-modal.component.html @@ -1,16 +1,24 @@ -
-
+
+
-
+
- + +

Create a Group

- } @@ -83,9 +110,12 @@

Create a Group

}
-
- - +
+ +

Enter email addresses of people you want to add. You can add more members later. @@ -94,25 +124,32 @@

Create a Group

@if (userEmails.length > 0) { -
+
- - + + +
Total Members: {{ userEmails.length + 1 }} - (You + {{ userEmails.length }} {{ userEmails.length === 1 ? 'member' : 'members' }}) + (You + {{ userEmails.length }} {{ + userEmails.length === 1 ? 'member' : 'members' }})
}
- - - +
@if (groupData) { -

{{ groupData.name }}

+

{{ + groupData.name }}

} @if (!groupData) {

Group Details

@@ -27,10 +30,14 @@

- - + + + - {{ groupData.memberCount }} members + {{ + groupData.memberCount }} members

} @@ -42,32 +49,41 @@

- + - + - + @@ -79,16 +95,21 @@

- - + + + - +

@@ -101,8 +122,10 @@

- - + + Settle Up @@ -116,10 +139,12 @@

-
+
❌

Group not found

-

The group you're looking for doesn't exist or has been deleted.

+

The group you're looking for doesn't exist or has been + deleted.

} @@ -127,137 +152,157 @@

Group not foun @if (groupData) {
- +
- + -
-
+
+
+
-
+
₹
-

Total Expense

-

{{getTotalBalance('total') | currency:'INR':'symbol':'1.0-0'}}

+

Total Expense +

+

+ {{getTotalBalance('total') | currency:'INR':'symbol':'1.0-0'}}

-
-
+
+
+
-
+
- +

This Month

-

{{getTotalBalance('monthly') | currency:'INR':'symbol':'1.0-0'}}

+

+ {{getTotalBalance('monthly') | currency:'INR':'symbol':'1.0-0'}}

-
-
+
+
+
-
+
- + +

Members

-

{{ groupData.memberCount || 0 }}

+

{{ groupData.memberCount + || 0 }}

-
-
+
+
+
-
+
- +

Created

-

{{ groupData.createdDate | date:'MMM d' }}

+

{{ groupData.createdDate + | date:'MMM d' }}

-
+
+
- - -
- @for (activity of group.activities; track activity.type === 'expense' ? activity.expenseId : activity.settlementId) { - - - @if (activity.type === 'expense') { -
- -
-
-
- -
-
-

{{activity.name}}

-

- - - - Paid by {{formatName(activity.paidBy)}} -

-
-
- - -
-
-

₹{{activity.amount}}

- @if (activity.youOwe) { -

- - - - {{activity.youOwe}} -

- } - @else if (activity.youLent) { -

- - - - {{activity.youLent}} -

- } -
- - -
- - - @if (expandedExpenseMenu === activity.expenseId) { -
- - -
- } -
-
+ + + @if (expandedExpenseOverview === activity.expenseId) { +
+
+

Split + Details

+ @for (split of getExpenseSplits(activity.expenseId); track split.userId) { +
+
+
+ {{split.userName.charAt(0)}}
- - - @if (expandedExpenseOverview === activity.expenseId) { -
-
-

Split Details

- @for (split of getExpenseSplits(activity.expenseId); track split.userId) { -
-
-
- {{split.userName.charAt(0)}} -
- {{formatName(split.userName)}} -
- ₹{{split.amount | number:'1.2-2'}} -
- } - @if (getExpenseSplits(activity.expenseId).length === 0) { -
-

Loading split details...

-
- } -
-
- } + {{formatName(split.userName)}}
+ ₹{{split.amount + | number:'1.2-2'}} +
} - - - @if (activity.type === 'settlement') { -
-
-
-
- - - -
-
-

Settlement

-

- - - - {{formatName(activity.paidByName)}} → {{formatName(activity.paidToName)}} -

-

{{activity.createdAt | date:'h:mm a'}}

-
-
-
-

₹{{activity.amount | number:'1.2-2'}}

-
-
-
+ @if (getExpenseSplits(activity.expenseId).length === 0) { +
+

Loading split details...

+
} - - } +
+ }
- } - } @else { -
-
💸
-

No expenses yet

-

Get started by adding your first expense to the group.

- + } + + + @if (activity.type === 'settlement') { +
+
+
+
+ + + +
+
+

Settlement

+

+ + + + {{formatName(activity.paidByName)}} → + {{formatName(activity.paidToName)}} +

+

{{activity.createdAt | date:'h:mm a'}} +

+
+
+
+

+ ₹{{activity.amount | number:'1.2-2'}}

+
+
+
+ } + + }
+
+ } + } @else { +
+
💸
+

No expenses yet

+

Get started by + adding your first expense to the group.

+ +
}
@@ -445,50 +530,61 @@

No
@if (balanceSummary && balanceSummary.length) { - @for (balance of balanceSummary; track balance) { -
-
-
-
- {{balance.name.charAt(0)}} -
-
-

{{balance.name}}

-

Overall balance

-
-
- - -
- @if (balance.balance < 0) { -

{{balance.balance | currency:'INR':'symbol':'1.0-0'}}

- - - - - Owes - - } - @if (balance.balance >= 0) { -

{{balance.balance | currency:'INR':'symbol':'1.0-0'}}

- - - - - Gets Back - - } -
+ @for (balance of balanceSummary; track balance) { +
+
+
+
+ {{balance.name.charAt(0)}} +
+
+

{{balance.name}} +

+

Overall balance

- } - } @else { -
-
🎉
-

All settled up!

-

Everyone's balance is zero. Perfect harmony!

+ + +
+ @if (balance.balance < 0) {

+ {{balance.balance | currency:'INR':'symbol':'1.0-0'}}

+ + + + + Owes + + } + @if (balance.balance >= 0) { +

+ {{balance.balance | currency:'INR':'symbol':'1.0-0'}}

+ + + + + Gets Back + + } +
+
+ } + } @else { +
+
🎉
+

All settled up!

+

Everyone's balance is + zero. Perfect harmony!

+
}
@@ -499,38 +595,44 @@

Al
@for (member of members; track member) { -
-
-
-
- {{member.memberName.charAt(0)}} -
-
-

{{member.memberName}}

-

{{member.memberEmail}}

-
+
+
+
+
+ {{member.memberName.charAt(0)}}
-
- - - - - Active - +
+

+ {{member.memberName}}

+

{{member.memberEmail}}

+
+ + + + + Active + +
+
} - +
👋

Invite more members

-

Add friends to start splitting expenses together.

+

Add friends to start splitting + expenses together.

diff --git a/UI/src/app/splitz/dashboard/groups/groups.component.ts b/UI/src/app/splitz/dashboard/groups/groups.component.ts index 3037fa5..d765869 100644 --- a/UI/src/app/splitz/dashboard/groups/groups.component.ts +++ b/UI/src/app/splitz/dashboard/groups/groups.component.ts @@ -46,7 +46,7 @@ export class GroupsComponent implements OnInit { showConfirmModal: boolean = false; confirmModalConfig: any = {}; expenseId: number | null = null; - pendingDeleteAction: () => void = () => {}; + pendingDeleteAction: () => void = () => { }; expandedExpenseMenu: number | null = null; userName: string | null = null; addOrEdit: 'Add' | 'Edit' | null = 'Add'; @@ -60,7 +60,7 @@ export class GroupsComponent implements OnInit { private router: Router, private location: Location, public splitzService: SplitzService - ) {} + ) { } ngOnInit(): void { this.getDataFromRouteParams(); @@ -71,7 +71,7 @@ export class GroupsComponent implements OnInit { this.route.params.subscribe(params => { this.userId = params['userId']; this.groupId = +params['groupId']; - + if (!this.groupData) { this.fetchGroupData(this.groupId); } @@ -296,7 +296,7 @@ export class GroupsComponent implements OnInit { let totalAmount = 0.0; this.expenses.forEach((expense: any) => { if (totalOrMonthly === 'total') return totalAmount += expense.amount; - + const expenseDate = new Date(expense.createdAt); if (expenseDate.getMonth() === currentMonth && expenseDate.getFullYear() === currentYear) { diff --git a/UI/src/app/splitz/forgot-password/forgot-password.component.css b/UI/src/app/splitz/forgot-password/forgot-password.component.css index b0cd317..9434770 100644 --- a/UI/src/app/splitz/forgot-password/forgot-password.component.css +++ b/UI/src/app/splitz/forgot-password/forgot-password.component.css @@ -1,8 +1 @@ -.password-field { - position: relative; -} - -.password-toggle-btn { - cursor: pointer; - user-select: none; -} +/* CSS replaced by Tailwind classes in HTML */ \ No newline at end of file diff --git a/UI/src/app/splitz/forgot-password/forgot-password.component.html b/UI/src/app/splitz/forgot-password/forgot-password.component.html index df1bb34..43f6ec6 100644 --- a/UI/src/app/splitz/forgot-password/forgot-password.component.html +++ b/UI/src/app/splitz/forgot-password/forgot-password.component.html @@ -1,93 +1,92 @@ -
+
-

Reset Password

-

Enter your email to receive a password reset link

+

Reset Password

+

Enter your email to receive a password reset link

@if (showLoader) { - + } @if (!showLoader) { -
-
- - @if (errorMessage) { -
-
- -
-

Error

-

{{ errorMessage }}

-
-
-
- } - - @if (successMessage) { -
-
- -
-

Success

-

{{ successMessage }}

-
-
-
- } - -
- -
-
- -
- -
- @if (email?.invalid && email?.touched) { -
- {{ getErrorMessage('email') }} -
- } +
+ + + @if (errorMessage) { +
+
+ +
+

Error

+

{{ errorMessage }}

- +
+
+ } + + @if (successMessage) { +
+
+
- +

Success

+

{{ successMessage }}

- -
-

- Remember your password? - - Back to Home - -

+
+
+ } + +
+ +
+
+
- + +
+ @if (email?.invalid && email?.touched) { +
+ {{ getErrorMessage('email') }} +
+ } +
+ +
+
- } + +
+

+ Remember your password? + + Back to Home + +

+
+
+ }
+
\ No newline at end of file diff --git a/UI/src/app/splitz/login-page/login-page.component.css b/UI/src/app/splitz/login-page/login-page.component.css index 815bd67..9434770 100644 --- a/UI/src/app/splitz/login-page/login-page.component.css +++ b/UI/src/app/splitz/login-page/login-page.component.css @@ -1,112 +1 @@ -.login-container { - min-height: 100vh; - background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); - display: flex; - align-items: center; - justify-content: center; - padding: 3rem 1rem; -} - -.login-card { - max-width: 400px; - width: 100%; - background: white; - border-radius: 1rem; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - padding: 2rem; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-label { - display: block; - font-size: 0.875rem; - font-weight: 500; - color: #374151; - margin-bottom: 0.5rem; -} - -.form-input { - width: 100%; - padding: 0.75rem 1rem; - border: 1px solid #d1d5db; - border-radius: 0.5rem; - font-size: 0.875rem; - transition: all 0.2s ease; -} - -.form-input:focus { - outline: none; - border-color: #10b981; - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); -} - -.form-input.error { - border-color: #ef4444; - background-color: #fef2f2; -} - -.error-message { - color: #ef4444; - font-size: 0.75rem; - margin-top: 0.25rem; -} - -.btn-primary { - width: 100%; - background: #10b981; - color: white; - padding: 0.75rem 1rem; - border: none; - border-radius: 0.5rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.btn-primary:hover:not(:disabled) { - background: #059669; -} - -.btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.loading-spinner { - display: inline-block; - width: 1rem; - height: 1rem; - border: 2px solid transparent; - border-top: 2px solid currentColor; - border-radius: 50%; - animation: spin 1s linear infinite; - margin-right: 0.5rem; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.alert-error { - background: #fef2f2; - border: 1px solid #fecaca; - color: #991b1b; - padding: 0.75rem; - border-radius: 0.5rem; - margin-bottom: 1rem; -} - -@media (max-width: 480px) { - .login-container { - padding: 1rem; - } - - .login-card { - padding: 1.5rem; - } -} \ No newline at end of file +/* CSS replaced by Tailwind classes in HTML */ \ No newline at end of file diff --git a/UI/src/app/splitz/login-page/login-page.component.html b/UI/src/app/splitz/login-page/login-page.component.html index 74aa0bd..6a737cd 100644 --- a/UI/src/app/splitz/login-page/login-page.component.html +++ b/UI/src/app/splitz/login-page/login-page.component.html @@ -1,123 +1,123 @@ -
+
-

Welcome back

-

Please sign in to your account

+

Welcome back

+

Please sign in to your account

@if (showLoader) { - + } @if (!showLoader) { -
-
- - @if (errorMessage) { -
-
- -
-

Login Failed

-

{{ errorMessage }}

-
-
+
+ + + @if (errorMessage) { +
+
+ +
+

Login Failed

+

{{ errorMessage }}

- } - -
- -
-
- -
- -
- @if (email?.invalid && email?.touched) { -
- {{ getErrorMessage('email') }} -
- } +
+
+ } + +
+ +
+
+
- -
- -
-
- -
- - -
- @if (password?.invalid && password?.touched) { -
- {{ getErrorMessage('password') }} -
- } -
- -
-
- - -
-
- - Forgot password? - -
-
- -
- -
- -
- -
-

- Don't have an account? - - Sign up here - -

-
- + +
+ @if (email?.invalid && email?.touched) { +
+ {{ getErrorMessage('email') }} +
+ } +
+ +
+ +
+
+
+ + +
+ @if (password?.invalid && password?.touched) { +
+ {{ getErrorMessage('password') }} +
}
-
\ No newline at end of file + +
+
+ + +
+
+ + Forgot password? + +
+
+ +
+ +
+ +
+ +
+

+ Don't have an account? + + Sign up here + +

+
+ +
+ } +
+
\ No newline at end of file diff --git a/UI/src/app/splitz/register-page/register-page.component.css b/UI/src/app/splitz/register-page/register-page.component.css index 646db27..9434770 100644 --- a/UI/src/app/splitz/register-page/register-page.component.css +++ b/UI/src/app/splitz/register-page/register-page.component.css @@ -1,157 +1 @@ -.register-container { - min-height: 100vh; - background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); - display: flex; - align-items: center; - justify-content: center; - padding: 3rem 1rem; -} - -.register-card { - max-width: 450px; - width: 100%; - background: white; - border-radius: 1rem; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - padding: 2rem; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-label { - display: block; - font-size: 0.875rem; - font-weight: 500; - color: #374151; - margin-bottom: 0.5rem; -} - -.form-input { - width: 100%; - padding: 0.75rem 1rem; - border: 1px solid #d1d5db; - border-radius: 0.5rem; - font-size: 0.875rem; - transition: all 0.2s ease; -} - -.form-input:focus { - outline: none; - border-color: #10b981; - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); -} - -.form-input.error { - border-color: #ef4444; - background-color: #fef2f2; -} - -.password-strength { - margin-top: 0.5rem; - font-size: 0.75rem; -} - -.strength-indicator { - display: flex; - gap: 0.25rem; - margin-top: 0.25rem; -} - -.strength-bar { - height: 0.125rem; - flex: 1; - background-color: #e5e7eb; - border-radius: 0.125rem; -} - -.strength-bar.weak { - background-color: #ef4444; -} - -.strength-bar.medium { - background-color: #f59e0b; -} - -.strength-bar.strong { - background-color: #10b981; -} - -.error-message { - color: #ef4444; - font-size: 0.75rem; - margin-top: 0.25rem; -} - -.success-message { - color: #10b981; - font-size: 0.75rem; - margin-top: 0.25rem; -} - -.btn-primary { - width: 100%; - background: #10b981; - color: white; - padding: 0.75rem 1rem; - border: none; - border-radius: 0.5rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.btn-primary:hover:not(:disabled) { - background: #059669; -} - -.btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.loading-spinner { - display: inline-block; - width: 1rem; - height: 1rem; - border: 2px solid transparent; - border-top: 2px solid currentColor; - border-radius: 50%; - animation: spin 1s linear infinite; - margin-right: 0.5rem; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.alert-error { - background: #fef2f2; - border: 1px solid #fecaca; - color: #991b1b; - padding: 0.75rem; - border-radius: 0.5rem; - margin-bottom: 1rem; -} - -.alert-success { - background: #f0fdf4; - border: 1px solid #bbf7d0; - color: #166534; - padding: 0.75rem; - border-radius: 0.5rem; - margin-bottom: 1rem; -} - -@media (max-width: 480px) { - .register-container { - padding: 1rem; - } - - .register-card { - padding: 1.5rem; - } -} \ No newline at end of file +/* CSS replaced by Tailwind classes in HTML */ \ No newline at end of file diff --git a/UI/src/app/splitz/register-page/register-page.component.html b/UI/src/app/splitz/register-page/register-page.component.html index 0aaad33..8eadf4b 100644 --- a/UI/src/app/splitz/register-page/register-page.component.html +++ b/UI/src/app/splitz/register-page/register-page.component.html @@ -1,191 +1,191 @@
+ class="min-h-screen bg-gradient-to-br flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 dark:bg-zinc-900">
-

Create your account

-

Join us and start splitting expenses

+

Create your account

+

Join us and start splitting expenses

-
+
@if (successMessage) { -
-
- -
-

Success!

-

{{ successMessage }}

-
+
+
+ +
+

Success!

+

{{ successMessage }}

+
} @if (errorMessage) { -
-
- -
-

Registration Failed

-

{{ errorMessage }}

-
+
+
+ +
+

Registration Failed

+

{{ errorMessage }}

+
}
-
+ @if (name?.invalid && name?.touched) { +
+ {{ getErrorMessage('name') }}
+ } +
- -
- -
-
- -
- -
- @if (email?.invalid && email?.touched) { -
- {{ getErrorMessage('email') }} -
- } + +
+ +
+
+
+ +
+ @if (email?.invalid && email?.touched) { +
+ {{ getErrorMessage('email') }} +
+ } +
- -
- -
-
- -
- - -
- @if (password?.invalid && password?.touched) { -
- {{ getErrorMessage('password') }} -
- } -
- Must contain uppercase, lowercase, number and special character -
-
+ +
+ +
+
+ +
+ + +
+ @if (password?.invalid && password?.touched) { +
+ {{ getErrorMessage('password') }} +
+ } +
+ Must contain uppercase, lowercase, number and special character +
+
- -
- -
-
- -
- - -
- @if ((confirmPassword?.invalid && confirmPassword?.touched) || registerForm.hasError('passwordMismatch')) { -
- {{ getErrorMessage('confirmPassword') }} -
- } -
+ +
+ +
+
+ +
+ + +
+ @if ((confirmPassword?.invalid && confirmPassword?.touched) || registerForm.hasError('passwordMismatch')) { +
+ {{ getErrorMessage('confirmPassword') }} +
+ } +
- -
-
- -
-
- -
-
+ +
+
+ +
+
+ +
+
- -
- -
+ {{ isLoading ? 'Creating account...' : 'Create account' }} + +
- -
-

- Already have an account? - -

-
- -
-
-
\ No newline at end of file + +
+

+ Already have an account? + +

+
+ +
+
+
\ No newline at end of file diff --git a/UI/src/app/splitz/services/splitz.service.ts b/UI/src/app/splitz/services/splitz.service.ts index b06ce95..8ca26b1 100644 --- a/UI/src/app/splitz/services/splitz.service.ts +++ b/UI/src/app/splitz/services/splitz.service.ts @@ -51,7 +51,7 @@ export class SplitzService { const tokenStr = token.toString(); this.tokenStorageService.setToken(tokenStr); this.tokenSubject.next(tokenStr); - + // Start auto-refresh when token is set this.tokenRefreshService.startAutoRefresh(); } @@ -160,13 +160,13 @@ export class SplitzService { // Store received credentials from backend localStorage.setItem('userId', response.data.id); this.tokenStorageService.setToken(response.data.token); - + this.userIdSubject.next(response.data.id); this.tokenSubject.next(response.data.token); - + // Start auto-refresh with new token this.tokenRefreshService.startAutoRefresh(); - + this.router.navigateByUrl('/dashboard', { replaceUrl: true }); } else { diff --git a/UI/src/app/splitz/setup-password/setup-password.component.css b/UI/src/app/splitz/setup-password/setup-password.component.css index b0cd317..9434770 100644 --- a/UI/src/app/splitz/setup-password/setup-password.component.css +++ b/UI/src/app/splitz/setup-password/setup-password.component.css @@ -1,8 +1 @@ -.password-field { - position: relative; -} - -.password-toggle-btn { - cursor: pointer; - user-select: none; -} +/* CSS replaced by Tailwind classes in HTML */ \ No newline at end of file diff --git a/UI/src/app/splitz/setup-password/setup-password.component.html b/UI/src/app/splitz/setup-password/setup-password.component.html index e96e086..82a1ffa 100644 --- a/UI/src/app/splitz/setup-password/setup-password.component.html +++ b/UI/src/app/splitz/setup-password/setup-password.component.html @@ -1,123 +1,125 @@ -
+
-

Set New Password

-

Create a strong password for your account

+

Set New Password

+

Create a strong password for your account

@if (showLoader) { - + } @if (!showLoader) { -
-
- - @if (errorMessage) { -
-
- -
-

Error

-

{{ errorMessage }}

-
-
+
+ + + @if (errorMessage) { +
+
+ +
+

Error

+

{{ errorMessage }}

- } - - @if (successMessage) { -
-
- -
-

Success

-

{{ successMessage }}

-
-
+
+
+ } + + @if (successMessage) { +
+
+ +
+

Success

+

{{ successMessage }}

+
+
+
+ } + +
+ +
+
+
+ + +
+ @if (newPassword?.invalid && newPassword?.touched) { +
+ {{ getErrorMessage('newPassword') }} +
} - -
- -
-
- -
- - -
- @if (newPassword?.invalid && newPassword?.touched) { -
- {{ getErrorMessage('newPassword') }} -
- } +
+ +
+ +
+
+
- -
- -
-
- -
- - -
- @if ((confirmPassword?.invalid || setupPasswordForm.hasError('passwordMismatch')) && confirmPassword?.touched) { -
- {{ getErrorMessage('confirmPassword') }} -
- } -
- -
- -
- -
-

- - Back to login - -

-
- + +
- } -
+ @if ((confirmPassword?.invalid || setupPasswordForm.hasError('passwordMismatch')) && confirmPassword?.touched) + { +
+ {{ getErrorMessage('confirmPassword') }} +
+ } +
+ +
+ +
+ +
+

+ + Back to login + +

+
+
+ } +
+
\ No newline at end of file diff --git a/UI/src/app/splitz/verify-email/verify-email.component.css b/UI/src/app/splitz/verify-email/verify-email.component.css index bd3a40a..9434770 100644 --- a/UI/src/app/splitz/verify-email/verify-email.component.css +++ b/UI/src/app/splitz/verify-email/verify-email.component.css @@ -1,31 +1 @@ -/* Verify Email Component Styles */ - -/* Ensure responsive design */ -@media (max-width: 640px) { - .max-w-md { - width: 100%; - } -} - -/* Smooth transitions for buttons and form fields */ -button { - transition: all 0.3s ease-in-out; -} - -input:focus { - transition: all 0.3s ease-in-out; -} - -/* Animation for loader text */ -@keyframes fadeInOut { - 0%, 100% { - opacity: 0.7; - } - 50% { - opacity: 1; - } -} - -.loader-text { - animation: fadeInOut 2s ease-in-out infinite; -} +/* CSS replaced by Tailwind classes in HTML */ \ No newline at end of file diff --git a/UI/src/app/splitz/verify-email/verify-email.component.html b/UI/src/app/splitz/verify-email/verify-email.component.html index 7658abf..fe738d1 100644 --- a/UI/src/app/splitz/verify-email/verify-email.component.html +++ b/UI/src/app/splitz/verify-email/verify-email.component.html @@ -1,35 +1,35 @@ @if (showLoader) { -
+
-

{{ loaderText }}

+

{{ loaderText }}

} @if (!showLoader) { -
+
-

Verify Email

-

Enter your email to verify your account

+

Verify Email

+

Enter your email to verify your account

-
+
@if (successMessage) { -
+
-

Success!

-

{{ successMessage }}

+

Success!

+

{{ successMessage }}

@@ -37,12 +37,12 @@

Success!

@if (errorMessage) { -
+
-

Verification Failed

-

{{ errorMessage }}

+

Verification Failed

+

{{ errorMessage }}

@@ -50,16 +50,16 @@

Verification Failed

-