update to modern angular

src/MistoxWebsite.Client/src/app/app.html

@@ -35,24 +35,23 @@
           </div>
           <!-- About -->
           <div class="nav-item">
-            <a #aboutLink class="nav-link" href="/about">
+            <a #aboutLink class="nav-link" href="https://auth.mistox.com/about">
               <span>About</span>
             </a>
           </div>
           <!-- Login Stuff -->
           <div class="nav-login">
-            <div *ngIf="auth.isLoggedIn" class="top-bar-buttons flex-right">
+            <div class="top-bar-buttons flex-right">
-              <a class="nav-login-button" href="https://auth.mistox.com/"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
+              @if (auth.isLoggedIn){
-              <a class="nav-login-button" href="/api/account/logout"><span>LOGOUT</span></a>
+                  <a class="nav-login-button" href="https://auth.mistox.com/"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
-            </div>
+                  <a class="nav-login-button" href="/api/account/logout"><span>LOGOUT</span></a>
-            <div *ngIf="!auth.isLoggedIn" class="top-bar-buttons flex-right">
+              } @else if (!auth.isLoggedIn){
-
+                  @if (devMode){
-              <!-- Testing Login -->
+                    <a class="nav-login-button" href="https://auth.mistox.com/account/login?returnURL=http://localhost:5000/"><span>Testing Login</span></a>
-                <a *ngIf="devMode" class="nav-login-button" href="https://auth.mistox.com/account/login?returnURL=http://localhost:5000/"><span>Testing Login</span></a>
+                  }
-              <!-- Testing Login -->
+                  <a class="nav-login-button" href="https://auth.mistox.com/account/login?returnURL=https://mistox.com/"><span>LOGIN</span></a>
-
+                  <a class="nav-login-button" href="https://auth.mistox.com/account/register?returnURL=https://mistox.com/"><span>REGISTER</span></a>
-              <a class="nav-login-button" href="https://auth.mistox.com/account/login?returnURL=https://mistox.com/"><span>LOGIN</span></a>
+              }
-              <a class="nav-login-button" href="https://auth.mistox.com/account/register?returnURL=https://mistox.com/"><span>REGISTER</span></a>
             </div>
           </div>
         </nav>

src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html

@@ -41,10 +41,12 @@
 
     <!-- Finish file preview for uploads -->
     <div class="img-frame">
-      <div *ngFor="let cur of imagePreviews" class="image-holder">
+      @for (cur of imagePreviews; track cur){
-        <input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
+        <div class="image-holder">
-        <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+          <input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
-      </div>
+          <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+        </div>
+      }
     </div>
   </div>
 </div>

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html

@@ -35,16 +35,21 @@
         </div>
       </div>
 
-      <ul *ngIf="errorMsgs.length > 0" >
+      @for(msg of errorMsgs; track msg){
-        <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
+        <ul>
-      </ul>
+          <li>{{ msg }}</li>
+        </ul>
+      }
+      
     </form>
 
     <!-- Finish file preview for uploads -->
     <div class="img-frame">
-      <div *ngFor="let cur of imagePreviews" class="image-holder">
+      @for (cur of imagePreviews; track cur){
-        <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+        <div class="image-holder">
-      </div>
+          <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+        </div>
+      }
     </div>
   </div>
 </div>

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html

@@ -1,32 +1,42 @@
 <div class="gameCard-Grid">
     <div class="gameCard" *ngFor="let product of Products">
         <div style="position: relative;">
-            <div *ngIf="product.images.length > 1">
+            @if(product.images.length > 1){
-                <button class="gameCard-Prev" (click)="nextImg(product)">❮</button>
+                <div>
-                <button class="gameCard-Next" (click)="prevImg(product)">❯</button>
+                    <button class="gameCard-Prev" (click)="nextImg(product)">❮</button>
-            </div>
+                    <button class="gameCard-Next" (click)="prevImg(product)">❯</button>
-            <div *ngIf="product.images.length > 0" >
+                </div>
-                <img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">
+            }
-            </div>
+            @if(product.images.length > 0){
+                <div>
+                    <img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">
+                </div>
+            }
         </div>
         <h1 class ="gameCard-Name">{{ product.name }}</h1>
-        <div *ngFor="let line of product.description.split('\n')" >
+        @for(line of product.description.split('\n'); track line){
-            <h2 class="gameCard-Desc">{{ line }}</h2>
+            <div>
-        </div>
+                <h2 class="gameCard-Desc">{{ line }}</h2>
+            </div>
+        }
         <h2 class="gameCard-Price">${{ (product.cost/100).toFixed(2) }}</h2>
         <button class="gameCard-Button" >Add To Cart</button>
-        <div *ngIf="auth.loggedInUser.role == 'Admin'">
+        @if(auth.loggedInUser.role == 'Admin'){
-            <button style="width: calc(50% - 10px); margin: 5px;" [routerLink]="['/store/admin/edit']" [queryParams]="{ ProductID: product.id }" >
+            <div>
-                Edit
+                <button style="width: calc(50% - 10px); margin: 5px;" [routerLink]="['/store/admin/edit']" [queryParams]="{ ProductID: product.id }" >
-            </button>
+                    Edit
-            <button style="width: calc(50% - 10px); margin: 5px;" (click)="DeleteItem(product.id!)" >
+                </button>
-                Delete
+                <button style="width: calc(50% - 10px); margin: 5px;" (click)="DeleteItem(product.id!)" >
+                    Delete
+                </button>
+            </div>
+        }
+    </div>
+    @if (auth.loggedInUser.role == 'Admin'){
+        <div>
+            <button style="width: calc(100% - 10px); margin: 5px;" [routerLink]="['/store/admin/new']" >
+                New
             </button>
         </div>
-    </div>
+    }
-    <div *ngIf="auth.loggedInUser.role == 'Admin'">
-        <button style="width: calc(100% - 10px); margin: 5px;" [routerLink]="['/store/admin/new']" >
-            New
-        </button>
-    </div>
 </div>