[#2480] simplify template

Author: pzadroga

webui/src/app/login-screen/login-screen.component.html

@@ -1,3 +1,13 @@
+<ng-template #methodItem let-item>
+    <div class="flex align-items-center gap-2">
+        @if (item.id === 'oidc') {
+            <i class="fa-brands fa-openid text-5xl" aria-hidden="true"></i>
+        } @else {
+            <img src="/assets/authentication-methods/{{ item.id }}.png" (error)="onMissingIcon($event)" />
+        }
+        <div>{{ item.name }}</div>
+    </div>
+</ng-template>
 <div class="login-screen__wrapper">
     <div class="login-screen">
         <div class="login-screen__content">
@@ -35,35 +45,14 @@
                                 (onChange)="authMethodChange($event)"
                             >
                                 <ng-template let-item #item>
-                                    <div class="flex align-items-center gap-2">
-                                        @if (item.id === 'oidc') {
-                                            <i class="fa-brands fa-openid text-5xl" aria-hidden="true"></i>
-                                        } @else {
-                                            <img
-                                                src="/assets/authentication-methods/{{ item.id }}.png"
-                                                (error)="onMissingIcon($event)"
-                                            />
-                                        }
-                                        <div>{{ item.name }}</div>
-                                    </div>
+                                    <ng-container
+                                        *ngTemplateOutlet="methodItem; context: { $implicit: item }"
+                                    ></ng-container>
                                 </ng-template>
-                                <ng-template #selectedItem>
-                                    <div
-                                        class="flex align-items-center gap-2"
-                                        *ngIf="loginForm.get('authenticationMethod').value"
-                                    >
-                                        @if (loginForm.get('authenticationMethod').value.id === 'oidc') {
-                                            <i class="fa-brands fa-openid text-5xl" aria-hidden="true"></i>
-                                        } @else {
-                                            <img
-                                                src="/assets/authentication-methods/{{
-                                                    loginForm.get('authenticationMethod').value.id
-                                                }}.png"
-                                                (error)="onMissingIcon($event)"
-                                            />
-                                        }
-                                        <div>{{ loginForm.get('authenticationMethod').value.name }}</div>
-                                    </div>
+                                <ng-template let-item #selectedItem>
+                                    <ng-container
+                                        *ngTemplateOutlet="methodItem; context: { $implicit: item }"
+                                    ></ng-container>
                                 </ng-template>
                             </p-select>
                             <label for="authenticationMethod" class="text-white">Choose a Method</label>

webui/src/app/login-screen/login-screen.component.ts

@@ -7,7 +7,7 @@ import { AuthenticationMethod } from '../backend'
 import { AuthService } from '../auth.service'
 import { HttpClient } from '@angular/common/http'
 import { lastValueFrom } from 'rxjs'
-import { NgIf } from '@angular/common'
+import { NgIf, NgTemplateOutlet } from '@angular/common'
 import { ProgressSpinner } from 'primeng/progressspinner'
 import { FloatLabel } from 'primeng/floatlabel'
 import { Select, SelectChangeEvent } from 'primeng/select'
@@ -47,6 +47,7 @@ import { MessageService } from 'primeng/api'
         Password,
         ButtonModule,
         Message,
+        NgTemplateOutlet,
     ],
 })
 export class LoginScreenComponent implements OnInit {