fix(#2650): Better highlight mandatory settings for self-registration

apache · Mar 27, 2024 · 24f519b · 24f519b
1 parent 4d9a4fc
commit 24f519b
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 52 deletions.
diff --git a/ui/src/app/configuration/configuration.module.ts b/ui/src/app/configuration/configuration.module.ts
@@ -70,13 +70,15 @@ import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @NgModule({
     imports: [
         CommonModule,
         FlexLayoutModule,
         MatGridListModule,
         MatButtonModule,
+        MatButtonToggleModule,
         MatProgressSpinnerModule,
         MatIconModule,
         MatInputModule,

diff --git a/ui/src/app/configuration/general-configuration/general-configuration.component.html b/ui/src/app/configuration/general-configuration/general-configuration.component.html
@@ -24,11 +24,14 @@
             *ngIf="formReady"
         >
             <form [formGroup]="parentForm" fxFlex="100" fxLayout="column">
-                <div class="warning mb-10" *ngIf="!generalConfig.configured">
-                    These are default values - to use features such as email you
-                    need to store these values once.
-                </div>
                 <sp-split-section title="Basic" subtitle="Basic settings">
+                    <div
+                        class="warning mb-10"
+                        *ngIf="!generalConfig.configured"
+                    >
+                        These are default values - to use features such as email
+                        you need to store these values once.
+                    </div>
                     <div class="subsection-title">App Name</div>
                     <mat-form-field color="accent">
                         <input
@@ -106,58 +109,54 @@
                             !mailConfig.emailConfigured
                         "
                     >
-                        Requires valid mail server settings and basic host
-                        settings.
+                        Self-registration requires valid mail server and basic
+                        host settings.
                     </div>
-                    <mat-checkbox
-                        [disabled]="
-                            !generalConfig.configured ||
-                            !mailConfig.emailConfigured
-                        "
-                        formControlName="allowSelfRegistration"
-                        >Allow self-registration
-                    </mat-checkbox>
                     <div
-                        *ngIf="generalConfig.allowSelfRegistration"
-                        class="mt-10 mb-10"
+                        fxLayout="column"
+                        *ngIf="
+                            generalConfig.configured &&
+                            mailConfig.emailConfigured
+                        "
                     >
-                        <h5>Default roles for new users</h5>
-                        <mat-select
-                            formControlName="defaultUserRoles"
-                            [multiple]="true"
+                        <mat-checkbox formControlName="allowSelfRegistration"
+                            >Allow self-registration
+                        </mat-checkbox>
+                        <div
+                            *ngIf="generalConfig.allowSelfRegistration"
+                            class="mt-10 mb-10"
                         >
-                            <mat-option
-                                *ngFor="let role of availableRoles"
-                                [value]="role.role"
-                                >{{ role.roleTitle }}
-                            </mat-option>
-                        </mat-select>
-                    </div>
-                    <mat-checkbox
-                        [disabled]="
-                            !generalConfig.configured ||
-                            !mailConfig.emailConfigured
-                        "
-                        formControlName="allowPasswordRecovery"
-                        >Allow self-service password recovery
-                    </mat-checkbox>
+                            <h5>Default roles for new users</h5>
+                            <mat-form-field color="accent" appearance="outline">
+                                <mat-select
+                                    formControlName="defaultUserRoles"
+                                    [multiple]="true"
+                                >
+                                    <mat-option
+                                        *ngFor="let role of availableRoles"
+                                        [value]="role.role"
+                                        >{{ role.roleTitle }}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </div>
+                        <mat-checkbox formControlName="allowPasswordRecovery"
+                            >Allow self-service password recovery
+                        </mat-checkbox>
 
-                    <div class="mt-10">
-                        <button
-                            mat-button
-                            mat-raised-button
-                            color="accent"
-                            (click)="updateConfig()"
-                            style="margin-right: 10px"
-                            [disabled]="
-                                !generalConfig.configured ||
-                                !mailConfig.emailConfigured
-                            "
-                            data-cy="sp-element-general-registration-config-save"
-                        >
-                            <i class="material-icons">save</i
-                            ><span>&nbsp;Save</span>
-                        </button>
+                        <div class="mt-10">
+                            <button
+                                mat-button
+                                mat-raised-button
+                                color="accent"
+                                (click)="updateConfig()"
+                                style="margin-right: 10px"
+                                data-cy="sp-element-general-registration-config-save"
+                            >
+                                <i class="material-icons">save</i
+                                ><span>&nbsp;Save</span>
+                            </button>
+                        </div>
                     </div>
                 </sp-split-section>
             </form>

diff --git a/ui/src/app/configuration/general-configuration/general-configuration.component.scss b/ui/src/app/configuration/general-configuration/general-configuration.component.scss
@@ -19,3 +19,9 @@
 .ml-10 {
     margin-left: 10px;
 }
+
+.warning {
+    border: 1px solid #dea843;
+    background: #ececc9;
+    padding: 5px;
+}
diff --git a/ui/src/app/configuration/general-configuration/general-configuration.component.ts b/ui/src/app/configuration/general-configuration/general-configuration.component.ts
@@ -153,7 +153,6 @@ export class GeneralConfigurationComponent implements OnInit {
                 this.generalConfig.defaultUserRoles = v.defaultUserRoles.map(
                     r => UserRole[r],
                 );
-                console.log(this.generalConfig);
             });
 
             this.formReady = true;