Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/app/components/login/login.css
Original file line number Diff line number Diff line change
Expand Up @@ -218,12 +218,26 @@ h1 {
animation: fadeIn 0.25s ease;
}

.profile-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

.input-label {
font-size: 13px;
color: var(--muted);
font-weight: 600;
}

.optional-label {
display: inline-block;
margin-left: 4px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.01em;
}

.input-field {
width: 100%;
border: 1px solid var(--border);
Expand All @@ -243,6 +257,13 @@ h1 {
border-color: var(--error);
}

.subtle-copy {
margin: -2px 0 4px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}

.form-row {
margin: 2px 0 6px;
width: 100%;
Expand All @@ -252,6 +273,7 @@ h1 {
gap: 10px;
}


.checkbox-wrapper {
display: flex;
align-items: center;
Expand Down
23 changes: 23 additions & 0 deletions src/app/components/login/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,11 @@ <h2>Welcome back</h2>
</form>

<form *ngIf="isRegisterVisible" (ngSubmit)="handleRegister()" class="form-section" novalidate>
<label class="input-label" for="regFullName">Full Name</label>
<input id="regFullName" name="regFullName" class="input-field" type="text"
[class.error]="!!registerError" autocomplete="name" [(ngModel)]="regFullName" (input)="onRegisterFullNameInput()"
placeholder="Avery Johnson">

<label class="input-label" for="regEmail">Email</label>
<input id="regEmail" name="regEmail" class="input-field" type="email"
[class.error]="!!registerError" autocomplete="email" [(ngModel)]="regEmail" (input)="onRegisterEmailInput()"
Expand All @@ -80,6 +85,24 @@ <h2>Welcome back</h2>
<input id="regPassword" name="regPassword" class="input-field" type="password" [(ngModel)]="regPassword"
(input)="onRegisterPasswordInput()" placeholder="••••••••••••">

<div class="profile-grid">
<div>
<label class="input-label" for="regJobTitle">Job Title <span class="optional-label">(Optional)</span></label>
<input id="regJobTitle" name="regJobTitle" class="input-field" type="text"
autocomplete="organization-title" [(ngModel)]="regJobTitle" (input)="onRegisterJobTitleInput()"
placeholder="Product Manager">
</div>

<div>
<label class="input-label" for="regOrganization">Organization or Team <span class="optional-label">(Optional)</span></label>
<input id="regOrganization" name="regOrganization" class="input-field" type="text"
autocomplete="organization" [(ngModel)]="regOrganization" (input)="onRegisterOrganizationInput()"
placeholder="Sentinent Ops">
</div>
</div>

<p class="subtle-copy">These details help identify people across workspaces, signals, and integrations.</p>

<button type="submit" class="btn-primary" [disabled]="isRegisterDisabled || isRegisterSubmitting">
Create Account
</button>
Expand Down
4 changes: 4 additions & 0 deletions src/app/components/login/login.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ describe('Login', () => {

it('rejects registration when the email format is invalid', () => {
component.activeTab = 'register';
component.regFullName = 'Alex Rivera';
component.regEmail = 'invalid-email';
component.regPassword = 'secret';

Expand All @@ -140,6 +141,7 @@ describe('Login', () => {
});

it('disables registration when the email format is invalid', () => {
component.regFullName = 'Alex Rivera';
component.regEmail = 'invalid-email';
component.regPassword = 'secret';

Expand All @@ -151,6 +153,7 @@ describe('Login', () => {
throwError(() => new HttpErrorResponse({ status: 409, error: 'already exists' }))
);
component.activeTab = 'register';
component.regFullName = 'Alex Rivera';
component.regEmail = 'user@example.com';
component.regPassword = 'secret';

Expand All @@ -164,6 +167,7 @@ describe('Login', () => {
spyOn(router, 'navigate');
mockAuthService.signup.and.returnValue(of(void 0));
component.activeTab = 'register';
component.regFullName = 'Alex Rivera';
component.regEmail = 'new@example.com';
component.regPassword = 'secret';

Expand Down
29 changes: 26 additions & 3 deletions src/app/components/login/login.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,11 @@ export class Login implements OnInit {
registerError = '';
forgotError = '';

regFullName = '';
regEmail = '';
regPassword = '';
regJobTitle = '';
regOrganization = '';

forgotEmail = '';

Expand Down Expand Up @@ -116,7 +119,7 @@ export class Login implements OnInit {
}

handleRegister(): void {
if (!this.regEmail.trim() || !this.regPassword.trim()) {
if (!this.regFullName.trim() || !this.regEmail.trim() || !this.regPassword.trim()) {
this.registerError = 'Invalid credentials';
return;
}
Expand All @@ -127,16 +130,24 @@ export class Login implements OnInit {
this.isRegisterSubmitting = true;
this.registerError = '';

this.authService.signup(this.regEmail.trim(), this.regPassword).pipe(
this.authService.signup(this.regEmail.trim(), this.regPassword, {
fullName: this.regFullName.trim(),
jobTitle: this.regJobTitle.trim(),
organization: this.regOrganization.trim(),
}).pipe(
timeout(8000),
finalize(() => {
this.isRegisterSubmitting = false;
this.syncView();
})
).subscribe({
next: () => {
this.regFullName = '';
this.regPassword = '';
this.regJobTitle = '';
this.regOrganization = '';
this.loginEmail = this.regEmail.trim();
this.regEmail = '';
this.showForgot = false;
this.loginError = '';
this.registerError = '';
Expand Down Expand Up @@ -199,7 +210,7 @@ export class Login implements OnInit {
}

get isRegisterDisabled(): boolean {
return !this.regEmail.trim() || !this.regPassword || !this.isValidEmail(this.regEmail);
return !this.regFullName.trim() || !this.regEmail.trim() || !this.regPassword || !this.isValidEmail(this.regEmail);
}

get isAuthFormVisible(): boolean {
Expand Down Expand Up @@ -234,10 +245,22 @@ export class Login implements OnInit {
this.registerError = '';
}

onRegisterFullNameInput(): void {
this.registerError = '';
}

onRegisterPasswordInput(): void {
this.registerError = '';
}

onRegisterJobTitleInput(): void {
this.registerError = '';
}

onRegisterOrganizationInput(): void {
this.registerError = '';
}

onForgotEmailInput(): void {
this.forgotError = '';
}
Expand Down
16 changes: 14 additions & 2 deletions src/app/services/auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ interface AuthResponse {
token: string;
}

export interface SignupProfile {
fullName: string;
jobTitle?: string;
organization?: string;
}

@Injectable({
providedIn: 'root',
})
Expand All @@ -14,8 +20,14 @@ export class AuthService {
private apiUrl = '/api';
private tokenKey = 'sentinent_token';

signup(email: string, password: string): Observable<void> {
return this.http.post(`${this.apiUrl}/signup`, { email, password }, {
signup(email: string, password: string, profile?: SignupProfile): Observable<void> {
return this.http.post(`${this.apiUrl}/signup`, {
email,
password,
full_name: profile?.fullName ?? '',
job_title: profile?.jobTitle ?? '',
organization: profile?.organization ?? '',
}, {
observe: 'response',
responseType: 'text'
}).pipe(
Expand Down
Loading