Development: Migrate user settings to use standalone, inject and signals

src/main/webapp/app/account/settings/settings.component.ts

@@ -25,12 +25,12 @@ export class SettingsComponent implements OnInit {
     account: User;
     languages = LANGUAGES;
     settingsForm: FormGroup;
-    isRegistrationEnabled = false;
+    isRegistrationEnabled = true;
 
     ngOnInit() {
         this.profileService.getProfileInfo().subscribe((profileInfo) => {
             if (profileInfo) {
-                this.isRegistrationEnabled = profileInfo.registrationEnabled || false;
+                this.isRegistrationEnabled = true; //profileInfo.registrationEnabled || false;
             }
         });
         this.accountService.identity().then((user) => {

src/main/webapp/app/app-routing.module.ts

@@ -103,6 +103,14 @@ const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
                         },
                     ],
                 },
+                // ===== USER SETTINGS =====
+                {
+                    path: 'user-settings',
+                    loadChildren: () => import('./shared/user-settings/user-settings.route').then((m) => m.UserSettingsRoutes),
+                    data: {
+                        authorities: [Authority.USER],
+                    },
+                },
                 // ===== COURSE MANAGEMENT =====
                 {
                     path: 'course-management',

src/main/webapp/app/app.module.ts

@@ -20,7 +20,6 @@ import { ArtemisComplaintsModule } from 'app/complaints/complaints.module';
 import { OrionOutdatedComponent } from 'app/shared/orion/outdated-plugin-warning/orion-outdated.component';
 import { LoadingNotificationComponent } from 'app/shared/notification/loading-notification/loading-notification.component';
 import { NotificationPopupComponent } from 'app/shared/notification/notification-popup/notification-popup.component';
-import { UserSettingsModule } from 'app/shared/user-settings/user-settings.module';
 import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
@@ -41,7 +40,6 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
         ArtemisSystemNotificationModule,
         ArtemisComplaintsModule,
         ArtemisHeaderExercisePageWithDetailsModule,
-        UserSettingsModule,
         ThemeSwitchComponent,
         ArtemisSharedComponentModule,
         ScrollingModule,

src/main/webapp/app/shared/user-settings/account-information/account-information.component.ts

@@ -10,11 +10,16 @@ import { base64StringToBlob } from 'app/utils/blob-util';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { UserSettingsService } from 'app/shared/user-settings/user-settings.service';
 import { AlertService, AlertType } from 'app/core/util/alert.service';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @Component({
     selector: 'jhi-account-information',
+    standalone: true,
     templateUrl: './account-information.component.html',
     styleUrls: ['../user-settings.scss'],
+    imports: [TranslateDirective, FontAwesomeModule, ArtemisSharedModule],
 })
 export class AccountInformationComponent implements OnInit {
     currentUser?: User;

src/main/webapp/app/shared/user-settings/ide-preferences/ide-settings.component.ts

@@ -1,16 +1,27 @@
-import { ChangeDetectionStrategy, Component, OnInit, WritableSignal, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, WritableSignal, inject, signal } from '@angular/core';
 import { ProgrammingLanguage } from 'app/entities/programming/programming-exercise.model';
 import { Ide, ideEquals } from 'app/shared/user-settings/ide-preferences/ide.model';
 import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { IdeSettingsService } from 'app/shared/user-settings/ide-preferences/ide-settings.service';
+import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { FormDateTimePickerModule } from 'app/shared/date-time-picker/date-time-picker.module';
+import { DocumentationLinkComponent } from 'app/shared/components/documentation-link/documentation-link.component';
 
 @Component({
     selector: 'jhi-ide-preferences',
     templateUrl: './ide-settings.component.html',
+    standalone: true,
     styleUrls: ['./ide-settings.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [TranslateDirective, RouterModule, FontAwesomeModule, ArtemisSharedModule, ArtemisSharedComponentModule, FormDateTimePickerModule, DocumentationLinkComponent],
 })
 export class IdeSettingsComponent implements OnInit {
+    private ideSettingsService = inject(IdeSettingsService);
+
     protected readonly ProgrammingLanguage = ProgrammingLanguage;
     protected readonly faPlus = faPlus;
     protected readonly faTrash = faTrash;
@@ -22,8 +33,6 @@ export class IdeSettingsComponent implements OnInit {
     // languages that have no IDE assigned yet
     remainingProgrammingLanguages: ProgrammingLanguage[] = Object.values(ProgrammingLanguage).filter((x) => x !== ProgrammingLanguage.EMPTY);
 
-    constructor(private ideSettingsService: IdeSettingsService) {}
-
     ngOnInit() {
         this.ideSettingsService.loadPredefinedIdes().subscribe((predefinedIde) => {
             this.PREDEFINED_IDE = predefinedIde;

src/main/webapp/app/shared/user-settings/notification-settings/notification-settings.component.ts

@@ -1,12 +1,17 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UserSettingsDirective } from 'app/shared/user-settings/user-settings.directive';
 import { UserSettingsCategory } from 'app/shared/constants/user-settings.constants';
 import { NotificationSetting } from 'app/shared/user-settings/notification-settings/notification-settings-structure';
-import { UserSettingsService } from 'app/shared/user-settings/user-settings.service';
 import { UserSettingsStructure } from 'app/shared/user-settings/user-settings.model';
-import { AlertService } from 'app/core/util/alert.service';
 import { faInfoCircle, faSave } from '@fortawesome/free-solid-svg-icons';
 import { NotificationSettingsService, reloadNotificationSideBarMessage } from 'app/shared/user-settings/notification-settings/notification-settings.service';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { FormDateTimePickerModule } from 'app/shared/date-time-picker/date-time-picker.module';
+import { DocumentationLinkComponent } from 'app/shared/components/documentation-link/documentation-link.component';
 
 export enum NotificationSettingsCommunicationChannel {
     WEBAPP,
@@ -16,21 +21,16 @@ export enum NotificationSettingsCommunicationChannel {
 @Component({
     selector: 'jhi-notification-settings',
     templateUrl: 'notification-settings.component.html',
+    standalone: true,
     styleUrls: ['../user-settings.scss'],
+    imports: [TranslateDirective, RouterModule, FontAwesomeModule, ArtemisSharedModule, ArtemisSharedComponentModule, FormDateTimePickerModule, DocumentationLinkComponent],
 })
 export class NotificationSettingsComponent extends UserSettingsDirective implements OnInit {
-    // Icons
-    faSave = faSave;
-    faInfoCircle = faInfoCircle;
+    private notificationSettingsService = inject(NotificationSettingsService);
 
-    constructor(
-        userSettingsService: UserSettingsService,
-        changeDetector: ChangeDetectorRef,
-        alertService: AlertService,
-        private notificationSettingsService: NotificationSettingsService,
-    ) {
-        super(userSettingsService, alertService, changeDetector);
-    }
+    // Icons
+    protected readonly faSave = faSave;
+    protected readonly faInfoCircle = faInfoCircle;
 
     declare userSettings: UserSettingsStructure<NotificationSetting>;
     declare settings: Array<NotificationSetting>;

src/main/webapp/app/shared/user-settings/science-settings/science-settings.component.ts

@@ -1,38 +1,38 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { UserSettingsDirective } from 'app/shared/user-settings/user-settings.directive';
 import { UserSettingsCategory } from 'app/shared/constants/user-settings.constants';
-import { UserSettingsService } from 'app/shared/user-settings/user-settings.service';
 import { UserSettingsStructure } from 'app/shared/user-settings/user-settings.model';
-import { AlertService } from 'app/core/util/alert.service';
 import { faInfoCircle, faSave } from '@fortawesome/free-solid-svg-icons';
 import { ScienceSetting } from 'app/shared/user-settings/science-settings/science-settings-structure';
 import { ScienceSettingsService } from 'app/shared/user-settings/science-settings/science-settings.service';
 import { FeatureToggle, FeatureToggleService } from 'app/shared/feature-toggle/feature-toggle.service';
 import { Subscription } from 'rxjs';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { FormDateTimePickerModule } from 'app/shared/date-time-picker/date-time-picker.module';
+import { DocumentationLinkComponent } from 'app/shared/components/documentation-link/documentation-link.component';
 
 @Component({
     selector: 'jhi-science-settings',
+    standalone: true,
     templateUrl: 'science-settings.component.html',
     styleUrls: ['../user-settings.scss'],
+    imports: [TranslateDirective, RouterModule, FontAwesomeModule, ArtemisSharedModule, ArtemisSharedComponentModule, FormDateTimePickerModule, DocumentationLinkComponent],
 })
 export class ScienceSettingsComponent extends UserSettingsDirective implements OnInit, OnDestroy {
+    private scienceSettingsService = inject(ScienceSettingsService);
+    private featureToggleService = inject(FeatureToggleService);
+
     // Icons
     faSave = faSave;
     faInfoCircle = faInfoCircle;
 
     private featureToggleActiveSubscription: Subscription;
     featureToggleActive = false;
 
-    constructor(
-        userSettingsService: UserSettingsService,
-        changeDetector: ChangeDetectorRef,
-        alertService: AlertService,
-        private scienceSettingsService: ScienceSettingsService,
-        private featureToggleService: FeatureToggleService,
-    ) {
-        super(userSettingsService, alertService, changeDetector);
-    }
-
     declare userSettings: UserSettingsStructure<ScienceSetting>;
     declare settings: Array<ScienceSetting>;
 

src/main/webapp/app/shared/user-settings/ssh-settings/details/ssh-user-settings-key-details.component.html

@@ -1,4 +1,4 @@
-@if (isLoading) {
+@if (isLoading()) {
     <h1 jhiTranslate="artemisApp.userSettings.sshSettings"></h1>
 } @else {
     @if (!isCreateMode) {
@@ -17,25 +17,25 @@ <h1 jhiTranslate="artemisApp.userSettings.sshSettingsPage.addNewSshKey"></h1>
                 </p>
             </div>
 
-            @if (isCreateMode) {
+            @if (isCreateMode()) {
                 <div>
                     <p class="large-text" jhiTranslate="artemisApp.userSettings.sshSettingsPage.key"></p>
                 </div>
             } @else {
                 <div>
-                    <p class="large-text">{{ displayedKeyLabel }}</p>
+                    <p class="large-text">{{ displayedKeyLabel() }}</p>
                 </div>
             }
             <div>
-                <textarea class="form-control" rows="10" [readonly]="!isCreateMode" [(ngModel)]="displayedSshKey"></textarea>
+                <textarea class="form-control" rows="10" [readonly]="!isCreateMode()" [(ngModel)]="displayedSshKey"></textarea>
             </div>
 
             <!-- input fields for key creation -->
-            @if (isCreateMode) {
+            @if (isCreateMode()) {
                 <div class="d-flex flex-wrap mb-4">
                     <p class="small-text">
                         <span jhiTranslate="artemisApp.userSettings.sshSettingsPage.alreadyHaveKey"> </span>
-                        <code> {{ copyInstructions }} </code>
+                        <code> {{ copyInstructions() }} </code>
                     </p>
                 </div>
 
@@ -66,14 +66,15 @@ <h1 jhiTranslate="artemisApp.userSettings.sshSettingsPage.addNewSshKey"></h1>
                 </div>
 
                 <!-- expiry date date picker -->
-                @if (selectedOption === 'useExpiration') {
+                @if (selectedOption() === 'useExpiration') {
                     <div class="mt-4">
                         <div class="col-sm-4">
                             <jhi-date-time-picker
                                 labelName="{{ 'artemisApp.userSettings.sshSettingsPage.expiryDate' | artemisTranslate }}"
                                 [(ngModel)]="displayedExpiryDate"
+                                [pickerType]="DateTimePickerType.CALENDAR"
                                 [shouldDisplayTimeZoneWarning]="false"
-                                [min]="currentDate"
+                                [min]="currentDate()"
                                 [requiredField]="true"
                                 (valueChange)="validateExpiryDate()"
                                 name="expiryDate"
@@ -84,37 +85,40 @@ <h1 jhiTranslate="artemisApp.userSettings.sshSettingsPage.addNewSshKey"></h1>
                 }
             } @else {
                 <!-- View for viewing key details -->
-                @if (displayCreationDate) {
+                @if (displayCreationDate()) {
                     <div class="text-and-date large-text mt-4">
                         <div jhiTranslate="artemisApp.userSettings.sshSettingsPage.createdOn"></div>
                         <div>
-                            {{ displayCreationDate | artemisDate: 'long-date' }}
+                            {{ displayCreationDate() | artemisDate: 'long-date' }}
                         </div>
                     </div>
                 }
-                @if (displayedLastUsedDate) {
+                @if (displayedLastUsedDate()) {
                     <div class="text-and-date large-text mt-2">
                         <div jhiTranslate="artemisApp.userSettings.sshSettingsPage.lastUsedOn"></div>
                         <div>
-                            {{ displayedLastUsedDate | artemisDate: 'long-date' }}
+                            {{ displayedLastUsedDate() | artemisDate: 'long-date' }}
                         </div>
                     </div>
                 }
-                @if (displayedExpiryDate) {
+                @if (displayedExpiryDate()) {
                     <div class="text-and-date large-text mt-2">
                         <div jhiTranslate="artemisApp.userSettings.sshSettingsPage.expiresOn"></div>
                         <div>
-                            {{ displayedExpiryDate | artemisDate: 'long-date' }}
+                            {{ displayedExpiryDate() | artemisDate: 'long-date' }}
                         </div>
                     </div>
                 }
             }
             <div class="col col-auto text-right mt-4">
-                @if (isCreateMode) {
+                @if (isCreateMode()) {
                     <div class="btn-group" role="group" aria-label="Actions">
                         <jhi-button
                             [disabled]="
-                                !(displayedSshKey && ((selectedOption === 'useExpiration' && displayedExpiryDate && isExpiryDateValid) || selectedOption !== 'useExpiration'))
+                                !(
+                                    displayedSshKey() &&
+                                    ((selectedOption() === 'useExpiration' && displayedExpiryDate() && isExpiryDateValid()) || selectedOption() !== 'useExpiration')
+                                )
                             "
                             [btnType]="ButtonType.PRIMARY"
                             [btnSize]="ButtonSize.SMALL"
@@ -128,7 +132,7 @@ <h1 jhiTranslate="artemisApp.userSettings.sshSettingsPage.addNewSshKey"></h1>
                     <jhi-button
                         [btnType]="ButtonType.PRIMARY"
                         [btnSize]="ButtonSize.SMALL"
-                        [title]="isCreateMode ? 'artemisApp.userSettings.sshSettingsPage.cancelSavingSshKey' : 'artemisApp.userSettings.sshSettingsPage.back'"
+                        [title]="isCreateMode() ? 'artemisApp.userSettings.sshSettingsPage.cancelSavingSshKey' : 'artemisApp.userSettings.sshSettingsPage.back'"
                         (onClick)="goBack()"
                     />
                 </div>