Skip to content

Commit 6169a5d

Browse files
Deepika516Deepika516
committed
fix(arc-saas): review changes
review changes GH-63
1 parent bc25433 commit 6169a5d

File tree

8 files changed

+430
-127
lines changed

8 files changed

+430
-127
lines changed

‎projects/arc-lib/src/lib/core/validators.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,33 @@ export class CustomValidators {
1212
};
1313
}
1414
}
15+
16+
export function keyValidator(): ValidatorFn {
17+
return (control: AbstractControl): {[key: string]: any} | null => {
18+
const key = control.value;
19+
const maxLength = 10;
20+
const isValid = /^[A-Za-z][A-Za-z0-9]{0,9}$/.test(key);
21+
return isValid ? null : {keyInvalid: true};
22+
};
23+
}
24+
25+
export function domainMatchValidator(
26+
emailControl: AbstractControl,
27+
domainControl: AbstractControl,
28+
): ValidatorFn {
29+
return (control: AbstractControl): ValidationErrors | null => {
30+
const emailValue = emailControl.value;
31+
const domainValue = domainControl.value;
32+
33+
if (!emailValue || !domainValue) {
34+
return null;
35+
}
36+
37+
const emailDomain = emailValue.split('@')[1];
38+
if (emailDomain !== domainValue) {
39+
return {domainMismatch: true};
40+
}
41+
42+
return null;
43+
};
44+
}

‎projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ <h2 class="heading">Onboarded Tenant List</h2>
77
<div class="regbtn">
88
<button
99
nbButton
10-
shape="round"
1110
size="medium"
1211
status="danger"
1312
(click)="registerTenantPage()"

‎projects/saas-ui/src/app/main/components/tenant-registration/tenant-registration.component.html

Lines changed: 145 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -9,63 +9,91 @@ <h2>Tenant Registration</h2>
99
<div class="input-wrapper">
1010
<div class="input-box">
1111
<div class="input-title">
12-
<span>First Name</span>
12+
<span>First Name <span class="required">*</span></span>
1313
</div>
1414
<div class="inputTags">
15-
<input
16-
type="text"
17-
placeholder="Enter First Name"
18-
status="“info”"
19-
formControlName="firstName"
20-
nbInput
21-
/>
15+
<div class="input-container">
16+
<input
17+
type="text"
18+
placeholder="Enter First Name"
19+
status="“info”"
20+
formControlName="firstName"
21+
nbInput
22+
/>
23+
<nb-icon
24+
icon="info-outline"
25+
class="info-icon"
26+
nbTooltip="Please enter your first name. This field is required."
27+
></nb-icon>
28+
</div>
2229
</div>
2330
</div>
2431

2532
<div class="input-box">
2633
<div class="input-title">
27-
<span>Last Name</span>
34+
<span>Last Name <span class="required">*</span></span>
2835
</div>
2936
<div class="inputTags">
30-
<input
31-
type="text"
32-
placeholder="Enter Last Name"
33-
status="“info”"
34-
formControlName="lastName"
35-
nbInput
36-
/>
37+
<div class="input-container">
38+
<input
39+
type="text"
40+
placeholder="Enter Last Name"
41+
status="“info”"
42+
formControlName="lastName"
43+
nbInput
44+
/>
45+
<nb-icon
46+
icon="info-outline"
47+
class="info-icon"
48+
nbTooltip="Please enter your Last name. This field is required."
49+
></nb-icon>
50+
</div>
3751
</div>
3852
</div>
3953

4054
<div class="input-box">
4155
<div class="input-title">
42-
<span>Company Name</span>
56+
<span>Company Name <span class="required">*</span></span>
4357
</div>
4458
<div class="inputTags">
45-
<input
46-
type="text"
47-
placeholder="Company Name"
48-
status="“info”"
49-
formControlName="name"
50-
nbInput
51-
/>
59+
<div class="input-container">
60+
<input
61+
type="text"
62+
placeholder="Company Name"
63+
status="“info”"
64+
formControlName="name"
65+
nbInput
66+
/>
67+
<nb-icon
68+
icon="info-outline"
69+
class="info-icon"
70+
nbTooltip="Please enter your Company name. This field is required."
71+
></nb-icon>
72+
</div>
5273
</div>
5374
</div>
5475

5576
<!-- email -->
5677
<div class="input-box">
5778
<div class="input-title">
58-
<span>Email</span>
79+
<span>Email <span class="required">*</span></span>
5980
</div>
6081
<div class="input">
61-
<input
62-
type="Email"
63-
placeholder="Email"
64-
status="“info”"
65-
fieldSize="medium"
66-
formControlName="email"
67-
nbInput
68-
/>
82+
<div class="input-container">
83+
<input
84+
type="Email"
85+
placeholder="Email"
86+
status="“info”"
87+
fieldSize="medium"
88+
formControlName="email"
89+
nbInput
90+
/>
91+
<nb-icon
92+
icon="info-outline"
93+
class="info-icon"
94+
nbTooltip="Please enter your Mail id. This field is required."
95+
></nb-icon>
96+
</div>
6997
</div>
7098
<div
7199
*ngIf="
@@ -104,37 +132,22 @@ <h2>Tenant Registration</h2>
104132

105133
<div class="input-box">
106134
<div class="input-title">
107-
<span>City</span>
108-
</div>
109-
<div class="input">
110-
<input
111-
type="text"
112-
placeholder="Enter Your City"
113-
status="“info”"
114-
formControlName="city"
115-
nbInput
116-
/>
117-
</div>
118-
</div>
119-
120-
<div class="input-box">
121-
<div class="input-title">
122-
<span>State</span>
135+
<span>Zip Code</span>
123136
</div>
124137
<div class="input">
125138
<input
126139
type="text"
127-
placeholder="Enter Your State"
140+
placeholder="Enter your Zip Code"
128141
status="“info”"
129-
formControlName="state"
142+
formControlName="zip"
130143
nbInput
131144
/>
132145
</div>
133146
</div>
134147

135148
<div class="input-box">
136149
<div class="input-title">
137-
<span>Country</span>
150+
<span>Country <span class="required">*</span></span>
138151
</div>
139152
<div class="input">
140153
<input
@@ -146,104 +159,134 @@ <h2>Tenant Registration</h2>
146159
/>
147160
</div>
148161
</div>
149-
150-
<div class="input-box">
151-
<div class="input-title">
152-
<span>Zip Code</span>
153-
</div>
154-
<div class="input">
155-
<input
156-
type="text"
157-
placeholder="Enter your Zip Code"
158-
status="“info”"
159-
formControlName="zip"
160-
nbInput
161-
/>
162-
</div>
163-
</div>
164162
<!-- key -->
165163
<div class="input-box">
166164
<div class="input-title">
167-
<span>Key</span>
165+
<span>
166+
Application Sub-Domain <span class="required">*</span></span
167+
>
168168
</div>
169169
<div class="input">
170-
<input
171-
placeholder="Enter Unique Key."
172-
fieldSize="medium"
173-
status="“info”"
174-
formControlName="key"
175-
nbInput
176-
/>
170+
<div class="input-container">
171+
<input
172+
placeholder="Enter the subdomain of your application"
173+
fieldSize="medium"
174+
status="“info”"
175+
formControlName="key"
176+
nbInput
177+
[ngClass]="{
178+
'ng-invalid':
179+
tenantRegForm.get('key').invalid &&
180+
(tenantRegForm.get('key').dirty ||
181+
tenantRegForm.get('key').touched),
182+
}"
183+
/>
184+
<nb-icon
185+
icon="info-outline"
186+
class="info-icon"
187+
nbTooltip="Enter a unique key starting with an alphabet. This field is required and has a maximum length of 10 characters. Special characters are not allowed"
188+
></nb-icon>
189+
<!-- Inline error message -->
190+
<nb-tooltip
191+
*ngIf="
192+
tenantRegForm.get('key').invalid &&
193+
(tenantRegForm.get('key').dirty ||
194+
tenantRegForm.get('key').touched)
195+
"
196+
[attr.id]="'keyError'"
197+
[nbTooltip]="
198+
tenantRegForm.get('key').errors?.keyInvalid
199+
? 'Key must start with an alphabet, have a maximum length of 10 characters, and contain no special characters.'
200+
: null
201+
"
202+
>
203+
</nb-tooltip>
204+
</div>
177205
</div>
178206
</div>
179207
<!-- domain -->
180208
<div class="input-box">
181209
<div class="input-title">
182-
<span>Domain</span>
210+
<span>Email domain<span class="required">*</span></span>
183211
</div>
184212
<div class="input">
185-
<input
186-
placeholder="Enter your mail domain."
187-
fieldSize="medium"
188-
status="“info”"
189-
formControlName="domains"
190-
nbInput
191-
/>
213+
<div class="input-container">
214+
<input
215+
placeholder="Enter the Email domain "
216+
fieldSize="medium"
217+
status="“info”"
218+
formControlName="domains"
219+
nbInput
220+
/>
221+
<nb-icon
222+
icon="info-outline"
223+
class="info-icon"
224+
nbTooltip="Enter your domain name.
225+
This field is required and should match the format of a valid email address.."
226+
></nb-icon>
227+
</div>
228+
</div>
229+
<div *ngIf="tenantRegForm.errors?.domainMismatch">
230+
Email domain does not match the domain part of the email
231+
address.
192232
</div>
193233
</div>
194234

195-
<!-- Subscription Plans -->
196-
235+
<!--plan design -->
197236
<div class="plan-card-container">
198237
<div class="input-title">
199-
<span>Subscription Plan</span>
238+
<h3>Subscription Plan</h3>
200239
</div>
201240
<div class="plan-card-wrapper">
202241
<nb-card
203242
class="plan-card-box"
204243
accent="danger"
205244
*ngFor="let plan of subscriptionPlans"
206245
>
207-
<nb-card-header>{{ plan.name }}</nb-card-header>
208-
<nb-card-body>
209-
<p>{{ plan.description }}</p>
210-
<p>${{ plan.price }}</p>
246+
<nb-card-header class="plan-card-header">
247+
<h5>{{ plan.name }}</h5>
248+
</nb-card-header>
249+
<nb-card-body class="plan-card-body">
250+
<p class="plan-description">{{ plan.description }}</p>
251+
<p class="plan-price">${{ plan.price }}</p>
211252
</nb-card-body>
212-
<nb-card-footer>
213-
<!-- Use FormControl directly -->
214-
<input
215-
type="radio"
216-
[formControl]="tenantRegForm.get('planId')"
217-
[value]="plan.id"
218-
/>
219-
{{ plan.name }}
253+
<nb-card-footer class="plan-card-footer">
254+
<label class="plan-radio">
255+
<input
256+
type="radio"
257+
[formControl]="tenantRegForm.get('planId')"
258+
[value]="plan.id"
259+
/>
260+
<span class="radio-checkmark"></span>
261+
{{ plan.name }}
262+
</label>
220263
</nb-card-footer>
221264
</nb-card>
222265
</div>
223266
</div>
224267

268+
<!-- testing plan design cancel -->
269+
225270
<!-- signup button -->
226271
<div class="btn-wrapper">
227272
<div class="btn regbtn">
228273
<button
229274
nbButton
230-
shape="round"
231275
size="medium"
232276
status="danger"
233277
(click)="backToPriviousPage()"
234278
>
235-
Back
279+
Cancel
236280
</button>
237281

238282
<button
239283
nbButton
240-
shape="round"
241284
size="medium"
242285
status="danger"
243286
[disabled]="!tenantRegForm.valid"
244287
type="submit"
245288
>
246-
Registration
289+
Submit
247290
</button>
248291
</div>
249292
</div>

0 commit comments

Comments
 (0)