From c6cce2bd4495d84655eab52c396cd7ed7cbb7482 Mon Sep 17 00:00:00 2001
From: Derek Holloway <derek@mistox.com>
Date: Sun, 28 Jun 2026 20:28:56 -0700
Subject: [PATCH] update to modern angular

---
 src/MistoxWebsite.Client/src/app/app.html     | 25 +++++----
 .../store/admin/edititem/edit.component.html  | 10 ++--
 .../store/admin/newitem/new.component.html    | 17 +++---
 .../store/catalog/catalog.component.html      | 54 +++++++++++--------
 4 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/src/MistoxWebsite.Client/src/app/app.html b/src/MistoxWebsite.Client/src/app/app.html
index ad13f46..18a237f 100644
--- a/src/MistoxWebsite.Client/src/app/app.html
+++ b/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">
-              <a class="nav-login-button" href="https://auth.mistox.com/"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
-              <a class="nav-login-button" href="/api/account/logout"><span>LOGOUT</span></a>
-            </div>
-            <div *ngIf="!auth.isLoggedIn" class="top-bar-buttons flex-right">
-
-              <!-- Testing Login -->
-                <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>
+            <div class="top-bar-buttons flex-right">
+              @if (auth.isLoggedIn){
+                  <a class="nav-login-button" href="https://auth.mistox.com/"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
+                  <a class="nav-login-button" href="/api/account/logout"><span>LOGOUT</span></a>
+              } @else if (!auth.isLoggedIn){
+                  @if (devMode){
+                    <a class="nav-login-button" href="https://auth.mistox.com/account/login?returnURL=http://localhost:5000/"><span>Testing Login</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>
diff --git a/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html b/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html
index c7ae0fb..a144200 100644
--- a/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html
+++ b/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">
-        <input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
-        <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
-      </div>
+      @for (cur of imagePreviews; track cur){
+        <div class="image-holder">
+          <input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
+          <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+        </div>
+      }
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html b/src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html
index 85d0c23..9a089e1 100644
--- a/src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html
+++ b/src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html
@@ -35,16 +35,21 @@
         </div>
       </div>
 
-      <ul *ngIf="errorMsgs.length > 0" >
-        <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
-      </ul>
+      @for(msg of errorMsgs; track msg){
+        <ul>
+          <li>{{ msg }}</li>
+        </ul>
+      }
+      
     </form>
 
     <!-- Finish file preview for uploads -->
     <div class="img-frame">
-      <div *ngFor="let cur of imagePreviews" class="image-holder">
-        <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
-      </div>
+      @for (cur of imagePreviews; track cur){
+        <div class="image-holder">
+          <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+        </div>
+      }
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html b/src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html
index 2388fd8..b049639 100644
--- a/src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html
+++ b/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">
-                <button class="gameCard-Prev" (click)="nextImg(product)">❮</button>
-                <button class="gameCard-Next" (click)="prevImg(product)">❯</button>
-            </div>
-            <div *ngIf="product.images.length > 0" >
-                <img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">
-            </div>
+            @if(product.images.length > 1){
+                <div>
+                    <button class="gameCard-Prev" (click)="nextImg(product)">❮</button>
+                    <button class="gameCard-Next" (click)="prevImg(product)">❯</button>
+                </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')" >
-            <h2 class="gameCard-Desc">{{ line }}</h2>
-        </div>
+        @for(line of product.description.split('\n'); track line){
+            <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'">
-            <button style="width: calc(50% - 10px); margin: 5px;" [routerLink]="['/store/admin/edit']" [queryParams]="{ ProductID: product.id }" >
-                Edit
-            </button>
-            <button style="width: calc(50% - 10px); margin: 5px;" (click)="DeleteItem(product.id!)" >
-                Delete
+        @if(auth.loggedInUser.role == 'Admin'){
+            <div>
+                <button style="width: calc(50% - 10px); margin: 5px;" [routerLink]="['/store/admin/edit']" [queryParams]="{ ProductID: product.id }" >
+                    Edit
+                </button>
+                <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>
\ No newline at end of file