feat: add self-hosted setup page for initial admin configuration #1555

Copilot · 2026-02-03T12:31:51Z

The test suite lacks coverage for error scenarios. Missing test cases include: (1) testing behavior when createInitialUser fails and (2) testing the error callback that sets submitting to false. Given that other component tests in the codebase (like login.component.spec.ts) include error scenario testing, this component should follow the same pattern for consistency and completeness.

Copilot · 2026-02-03T12:31:53Z

The form validation in the template allows submission when pristine is false, but the createAdminAccount method only checks if email and password are truthy. This creates a gap where a user could potentially submit an invalid email (if the email validator hasn't caught it yet) or a weak password. While the template validation prevents submission via the disabled button attribute, the method itself doesn't validate the data before sending it to the API. Consider adding explicit validation in the method or ensuring the method can only be called when the form is valid.

Copilot · 2026-02-03T12:31:50Z

The router.navigate() call lacks error handling. If navigation fails (e.g., if the configurationGuard prevents access), the user will remain on the setup page without feedback. Consider handling the navigation promise and providing appropriate feedback if navigation fails.

Suggested change

next: () => {

this.submitting.set(false);

this._router.navigate(['/login']);

next: async () => {

this.submitting.set(false);

try {

const navigated = await this._router.navigate(['/login']);

if (!navigated) {

console.error('Navigation to /login was unsuccessful.');

}

} catch (error) {

console.error('Navigation to /login failed.', error);

}

Copilot · 2026-02-03T12:31:52Z

After successfully creating the admin account, the user is redirected to /login. However, there's no automatic login mechanism, forcing the newly created admin to manually enter their credentials again. Consider automatically logging in the user after account creation (if the backend returns an auth token) to provide a smoother user experience, similar to how registration flows typically work.

Suggested change

next: () => {

this.submitting.set(false);

this._router.navigate(['/login']);

next: (response: any) => {

// If the backend returns an auth token, store it to automatically log the user in.

const token = response && (response.token || response.authToken);

if (token) {

localStorage.setItem('authToken', token);

}

this.submitting.set(false);

// Redirect to the main application route after successful account creation (and login, if token was provided).

this._router.navigate(['/']);

Copilot · 2026-02-03T12:31:51Z

The subscribe callback has redundant handling of the submitting state. The submitting flag is set to false in three places: next, error, and complete callbacks. Since complete is called after either next or error, setting submitting to false in the complete callback alone would be sufficient. This pattern differs from login.component.ts which sets the flag in both next and error callbacks. Consider simplifying by only setting it in the complete callback.

Suggested change

complete: () => {

this.submitting.set(false);

},

-Original file line number
+Diff line change
@@ -1,6 +1,8 @@
     import { NgModule } from '@angular/core';
     import { RouterModule, Routes } from '@angular/router';
     import { AuthGuard } from './auth.guard';
+    import { configurationGuard } from './guards/configuration.guard';
+    import { setupGuard } from './guards/setup.guard';
     const routes: Routes = [
     	{ path: '', redirectTo: '/connections-list', pathMatch: 'full' },
@@ Expand All / @@ -12,9 +14,16 @@ const routes: Routes = [ @@
     		path: 'registration',
     		loadChildren: () => import('./routes/registration.routes').then((m) => m.REGISTRATION_ROUTES),
     	},
+    	{
+    		path: 'setup',
+    		loadComponent: () => import('./components/setup/setup.component').then((m) => m.SetupComponent),
+    		canActivate: [setupGuard],
+    		title: 'Setup | Rocketadmin',
+    	},
     	{
     		path: 'login',
     		loadComponent: () => import('./components/login/login.component').then((m) => m.LoginComponent),
+    		canActivate: [configurationGuard],
     		title: 'Login | Rocketadmin',
     	},
     	{
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,117 @@
+    :host app-alert:not(:empty) {
+    	--alert-margin: 24px;
+    	position: absolute;
+    	top: var(--mat-toolbar-standard-height);
+    	width: calc(100% - 48px);
+    }
+    .wrapper {
+    	height: calc(100vh - 56px);
+    	padding: 16px;
+    }
+    @media (width <= 600px) {
+    	.wrapper {
+    		padding: 0;
+    		width: 100vw;
+    	}
+    }
+    .setup-page {
+    	display: flex;
+    	flex-direction: column;
+    	justify-content: center;
+    	align-items: center;
+    	height: 100%;
+    }
+    @media (width <= 600px) {
+    	.setup-page {
+    		justify-content: flex-start;
+    	}
+    }
+    .setup-form {
+    	display: flex;
+    	flex-direction: column;
+    	align-items: center;
+    	width: clamp(360px, 30%, 600px);
+    }
+    @media (width <= 600px) {
+    	.setup-form {
+    		gap: 8px;
+    		padding: 40px 9vw;
+    		width: 100%;
+    	}
+    }
+    .setup-header {
+    	display: flex;
+    	flex-direction: column;
+    	align-items: center;
+    	padding-bottom: 40px;
+    }
+    @media (width <= 600px) {
+    	.setup-header {
+    		padding-bottom: 0;
+    	}
+    }
+    .setup-header__logo {
+    	margin-bottom: 36px;
+    	width: 44px;
+    }
+    @media (width <= 600px) {
+    	.setup-header__logo {
+    		margin-bottom: 12px;
+    	}
+    }
+    @media (prefers-color-scheme: dark) {
+    	.setup-header__logo path {
+    		fill: white;
+    	}
+    }
+    .setup-title {
+    	font-weight: 600 !important;
+    	margin-bottom: 40px !important;
+    	text-align: center !important;
+    }
+    .setup-title__emphasis {
+    	color: var(--color-accentedPalette-500);
+    }
+    .setup-header__directions {
+    	text-align: center;
+    }
+    @media (width <= 600px) {
+    	.setup-header__directions {
+    		display: none;
+    	}
+    }
+    .setup-form__email {
+    	width: 100%;
+    }
+    .setup-form__password {
+    	width: 100%;
+    }
+    .setup-form__submit-button {
+    	width: 100%;
+    	margin-top: 40px;
+    }
+    @media (width <= 600px) {
+    	.setup-form__submit-button {
+    		margin-top: 0;
+    	}
+    }

-Original file line number
+Diff line change
@@ -0,0 +1,48 @@
+    <app-alert></app-alert>
+    <div class="wrapper background-decoration">
+        <div class="setup-page">
+            <form class="setup-form" #setupForm="ngForm" (ngSubmit)="createAdminAccount()">
+                <div class="setup-header">
+                    <svg class="setup-header__logo" width="56" height="54" viewBox="0 0 56 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M47.2367 17.9125H35.1499C33.3671 17.9125 32.4833 16.5678 33.1783 14.9286L37.5295 4.71527C38.5191 2.39612 37.2651 0.5 34.742 0.5H23.4711C22.3682 0.5 21.1142 1.33097 20.6836 2.34323L15.4485 14.634C14.5798 16.6661 15.6827 18.328 17.8885 18.328H29.4465C30.7231 18.328 31.8789 19.0909 32.3775 20.2618L37.5295 32.3486C38.232 33.9954 37.3406 35.3401 35.5578 35.3401H8.62703C7.52411 35.3401 6.27011 36.1711 5.83952 37.1833L0.823517 48.9453C-0.166086 51.2644 1.08792 53.1605 3.61103 53.1605H29.8242C30.9271 53.1605 32.1811 52.3296 32.6117 51.3173L38.4435 37.629C38.9346 36.4808 40.0526 35.7405 41.299 35.7405H52.6833C54.9722 35.7405 56.1053 34.0181 55.2064 31.918L50.0242 19.7633C49.5936 18.751 48.3396 17.92 47.2367 17.92V17.9125Z" fill="#08041B"/>
+                    </svg>
+                    <h1 class="mat-headline-4 setup-title">
+                        Welcome to <br>
+                        <span class="setup-title__emphasis">Rocketadmin</span>
+                    </h1>
+                    <div class="mat-body-1 setup-header__directions">
+                        Create your admin account to get started.
+                    </div>
+                </div>
+                <mat-form-field appearance="fill" floatLabel="always" class="setup-form__email">
+                    <mat-label>Email</mat-label>
+                    <input matInput type="email" name="email" emailValidator
+                        placeholder="Email"
+                        data-testid="setup-email-input"
+                        #emailInput="ngModel" required
+                        [ngModel]="email()"
+                        (ngModelChange)="onEmailChange($event)">
+                    @if (emailInput.errors?.isInvalidEmail) {
+                        <mat-error>Invalid email format.</mat-error>
+                    }
+                </mat-form-field>
+                <app-user-password
+                    [value]="password()"
+                    [label]="'Password'"
+                    (onFieldChange)="onPasswordChange($event)"
+                    class="setup-form__password">
+                </app-user-password>
+                <button
+                    type="submit" mat-flat-button color="accent"
+                    data-testid="setup-submit-button"
+                    class="setup-form__submit-button"
+                    [disabled]="submitting() || setupForm.form.invalid || setupForm.form.pristine">
+                    {{ submitting() ? 'Creating...' : 'Create Admin Account' }}
+                </button>
+            </form>
+        </div>
+    </div>

-Original file line number
+Diff line change
@@ -0,0 +1,97 @@
+    import { provideHttpClient } from '@angular/common/http';
+    import { ComponentFixture, TestBed } from '@angular/core/testing';
+    import { FormsModule } from '@angular/forms';
+    import { MatSnackBarModule } from '@angular/material/snack-bar';
+    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+    import { provideRouter, Router } from '@angular/router';
+    import { IPasswordStrengthMeterService } from 'angular-password-strength-meter';
+    import { Angulartics2Module } from 'angulartics2';
+    import { of } from 'rxjs';
+    import { SelfhostedService } from 'src/app/services/selfhosted.service';
+    import { SetupComponent } from './setup.component';
+    type SetupComponentTestable = SetupComponent & {
+    	email: ReturnType<typeof import('@angular/core').signal<string>>;
+    	password: ReturnType<typeof import('@angular/core').signal<string>>;
+    	submitting: ReturnType<typeof import('@angular/core').signal<boolean>>;
+    };
+    describe('SetupComponent', () => {
+    	let component: SetupComponent;
+    	let fixture: ComponentFixture<SetupComponent>;
+    	let selfhostedService: SelfhostedService;
+    	let router: Router;
+    	beforeEach(async () => {
+    		await TestBed.configureTestingModule({
+    			imports: [FormsModule, MatSnackBarModule, SetupComponent, BrowserAnimationsModule, Angulartics2Module.forRoot()],
+    			providers: [provideHttpClient(), provideRouter([]), { provide: IPasswordStrengthMeterService, useValue: {} }],
+    		}).compileComponents();
+    	});
+    	beforeEach(() => {
+    		fixture = TestBed.createComponent(SetupComponent);
+    		component = fixture.componentInstance;
+    		selfhostedService = TestBed.inject(SelfhostedService);
+    		router = TestBed.inject(Router);
+    		fixture.detectChanges();
+    	});
+    	it('should create', () => {
+    		expect(component).toBeTruthy();
+    	});
+    	it('should update email signal on change', () => {
+    		const testable = component as SetupComponentTestable;
+    		component.onEmailChange('test@example.com');
+    		expect(testable.email()).toBe('test@example.com');
+    	});
+    	it('should update password signal on change', () => {
+    		const testable = component as SetupComponentTestable;
+    		component.onPasswordChange('SecurePass123');
+    		expect(testable.password()).toBe('SecurePass123');
+    	});
+    	it('should not submit if email is empty', () => {
+    		const testable = component as SetupComponentTestable;
+    		const fakeCreateInitialUser = vi.spyOn(selfhostedService, 'createInitialUser');
+    		testable.email.set('');
+    		testable.password.set('SecurePass123');
+    		component.createAdminAccount();
+    		expect(fakeCreateInitialUser).not.toHaveBeenCalled();
+    	});
+    	it('should not submit if password is empty', () => {
+    		const testable = component as SetupComponentTestable;
+    		const fakeCreateInitialUser = vi.spyOn(selfhostedService, 'createInitialUser');
+    		testable.email.set('test@example.com');
+    		testable.password.set('');
+    		component.createAdminAccount();
+    		expect(fakeCreateInitialUser).not.toHaveBeenCalled();
+    	});
+    	it('should create admin account and navigate to login on success', () => {
+    		const testable = component as SetupComponentTestable;
+    		const fakeCreateInitialUser = vi
+    			.spyOn(selfhostedService, 'createInitialUser')
+    			.mockReturnValue(of({ success: true }));
+    		const fakeNavigate = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+    		testable.email.set('admin@example.com');
+    		testable.password.set('SecurePass123');
+    		component.createAdminAccount();
+    		expect(fakeCreateInitialUser).toHaveBeenCalledWith({
+    			email: 'admin@example.com',
+    			password: 'SecurePass123',
+    		});
+    		expect(testable.submitting()).toBe(false);
+    		expect(fakeNavigate).toHaveBeenCalledWith(['/login']);
+    	});
+    });

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add self-hosted setup page for initial admin configuration #1555

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: add self-hosted setup page for initial admin configuration #1555

Uh oh!

feat: add self-hosted setup page for initial admin configuration #1555

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!