Asymmetrik/ngx-starter

<section>
    <!-- Alert Notifications -->
    <system-alert />

    @if (user) {
        <form
            class="pt-3 mx-auto"
            role="form"
            autocomplete="off"
            novalidate
            style="max-width: 1000px"
            #form="ngForm"
            (ngSubmit)="submit()"
        >
            <div class="d-flex">
                <h1>New Account Request</h1>
            </div>
            <!-- Name -->
            <div class="mb-3 pt-3">
                <label class="form-label form-required" for="name">Name</label>
                <input
                    class="form-control"
                    id="name"
                    name="name"
                    type="text"
                    required
                    [(ngModel)]="user.name"
                />
            </div>
            <!-- Username -->
            <div class="mb-3">
                <label class="form-label form-required" for="username">Username</label>
                <input
                    class="form-control"
                    id="username"
                    name="username"
                    type="text"
                    required
                    [(ngModel)]="user.username"
                />
            </div>
            <!-- Organization -->
            <div class="mb-3">
                <label class="form-label form-required" for="organization">Organization</label>
                <input
                    class="form-control"
                    id="organization"
                    name="organization"
                    type="text"
                    required
                    [(ngModel)]="user.organization"
                />
            </div>
            <!-- Email -->
            <div class="mb-3">
                <label class="form-label form-required" for="email">Email</label>
                <input
                    class="form-control"
                    id="email"
                    name="email"
                    type="email"
                    required
                    [(ngModel)]="user.email"
                />
            </div>
            <!-- Local Login Information -->
            <div class="mb-3">
                <label class="form-label form-required" for="password"
                    >Password <small>At least 6 characters.</small></label
                >
                <input
                    class="form-control"
                    id="password"
                    name="password"
                    type="password"
                    autocomplete="off"
                    minlength="6"
                    [(ngModel)]="user.password"
                />
            </div>
            <div class="mb-3">
                <label class="form-label form-required" for="password2">Re-enter Password</label>
                <input
                    class="form-control"
                    id="password2"
                    name="password2"
                    type="password"
                    autocomplete="off"
                    minlength="6"
                    [(ngModel)]="user.verifyPassword"
                />
            </div>
            <div class="mb-3">
                <div class="text-end">
                    <button class="btn btn-primary" type="submit" [disabled]="!form.form.valid">
                        Submit
                    </button>
                    <button class="btn btn-link ms-2" type="button" routerLink="/signin">
                        or Sign In
                    </button>
                </div>
            </div>
        </form>
    }
</section>