From 772c9f913b18cf4bc4f30cace47dab3d094efdb6 Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Fri, 10 Feb 2023 18:43:51 +0100
Subject: [PATCH] Render cards with TagHelper

---
 AfRApay.Web/Pages/EditUser.cshtml    | 93 +++++++++++++---------------
 AfRApay.Web/Pages/EditUser.cshtml.cs |  6 ++
 2 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/AfRApay.Web/Pages/EditUser.cshtml b/AfRApay.Web/Pages/EditUser.cshtml
index de5ca28..198225c 100644
--- a/AfRApay.Web/Pages/EditUser.cshtml
+++ b/AfRApay.Web/Pages/EditUser.cshtml
@@ -1,5 +1,6 @@
 @page "{id:int}"
 @using AfRApay.Web.Backend
+@using Microsoft.AspNetCore.Mvc.TagHelpers
 @model EditUserModel
 @{
 	ViewData["Title"] = "Edit User";
@@ -16,10 +17,9 @@
 }
 
 @if (linkActive) {
-	@section Header {
-		<meta http-equiv="refresh" content="5"/>
-	}
-}
+@section Header {
+	<meta http-equiv="refresh" content="5"/>
+}}
 
 <div class="text-center">
 	<h1 class="display-5">
@@ -59,54 +59,34 @@
 <br/>
 <h3 class="text-center">Cards</h3>
 @{
-	<!-- We add all the cards here! -->
-	<div class="row justify-content-center">
-		@foreach (var card in cards) {
-			<div class="fake-card-wrapper blur-true m-2">
-				<a class="btn btn-danger btn-lg hover-button">Delete</a>
+	async Task RenderCard(string cardHolder, string cardNumber = "Awooo!", string expDate = "01/2038", EditUserModel.CardType type = EditUserModel.CardType.Normal) {
+		var cardTypeClasses = type switch {
+		                      EditUserModel.CardType.Normal => "fake-card",
+		                      EditUserModel.CardType.LinkPlaceholder => "fake-card ghost-card",
+		                      EditUserModel.CardType.DeletionConfirmation => "fake-card",
+		                      _ => throw new ArgumentOutOfRangeException(nameof(type), type, null)};
+
+		var blurClasses = type == EditUserModel.CardType.Normal ? " blur-true m-2" : "m-2";
+
+		<div class="fake-card-wrapper @blurClasses">
+			@if (type == EditUserModel.CardType.Normal) {
 				<form method="POST">
-					<input type="hidden" name="cardId" value="@card.CardId">
+					<input type="hidden" name="cardId" value="@cardNumber">
 					<button type="submit" class="btn btn-danger btn-lg hover-button" name="action" value="deleteCard">Delete</button>
 				</form>
-				<div class="fake-card">
-					<div class="face-card front">
-						<div class="chip">
-							<div>
-								<div>
-									<div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<h2 class="card-number">@card.CardId</h2>
-						<h3 class="card-holder">@user.Nickname</h3>
-						<span class="validity">
-							<span class="small">VALID<br>THRU</span>
-							<span>01/2038</span>
-						</span>
-
-						<div class="fake-card-logo-top">
-							<img src="/img/afra.png" class="fake-card-logo-inner" alt="">
-						</div>
-						<div class="fake-card-logo-bottom">
-							<img src="/img/matecard.png" class="fake-card-logo-inner" alt="">
-						</div>
-					</div>
-				</div>
-			</div>
-		}
-		<!-- Here we display a faded placholder card, with the add button at its center -->
-		<div class="fake-card-wrapper m-2">
-			@if (linkActive) {
+			}
+			else if (type == EditUserModel.CardType.LinkPlaceholder) {
+				if (linkActive) {
 					<button class="btn btn-secondary btn-lg link-card-button-in-progress">Link in progress</button>
+				}
+				else {
+					<form method="POST">
+						<input type="hidden" name="userId" value="@user.Id">
+						<button type="submit" class="btn btn-success btn-lg link-card-button" name="action" value="linkCard">Link Card</button>
+					</form>
+				}
 			}
-			else {
-				<form method="POST">
-					<input type="hidden" name="userId" value="@user.Id">
-					<button type="submit" class="btn btn-success btn-lg link-card-button" name="action" value="linkCard">Link Card</button>
-				</form>
-			}
-			<div class="fake-card ghost-card">
+			<div class="@cardTypeClasses">
 				<div class="face-card front">
 					<div class="chip">
 						<div>
@@ -116,11 +96,11 @@
 							</div>
 						</div>
 					</div>
-					<h2 class="card-number">Awooo!</h2>
-					<h3 class="card-holder">@user.Nickname</h3>
+					<h2 class="card-number">@cardNumber</h2>
+					<h3 class="card-holder">@cardHolder</h3>
 					<span class="validity">
 						<span class="small">VALID<br>THRU</span>
-						<span>01/2038</span>
+						<span>@expDate</span>
 					</span>
 
 					<div class="fake-card-logo-top">
@@ -132,5 +112,16 @@
 				</div>
 			</div>
 		</div>
-	</div>
+	}
 }
+
+<!-- We add all the cards here! -->
+<div class="row justify-content-center">
+	@foreach (var card in cards) {
+		await RenderCard(user.Nickname, card.CardId);
+	}
+	<!-- Here we display a faded placholder card, with the add button at its center -->
+	@{
+		await RenderCard(user.Nickname, type: EditUserModel.CardType.LinkPlaceholder);
+	}
+</div>
diff --git a/AfRApay.Web/Pages/EditUser.cshtml.cs b/AfRApay.Web/Pages/EditUser.cshtml.cs
index 22c33f8..e3b0423 100644
--- a/AfRApay.Web/Pages/EditUser.cshtml.cs
+++ b/AfRApay.Web/Pages/EditUser.cshtml.cs
@@ -69,4 +69,10 @@ public class EditUserModel : PageModel {
 
 		Response.Redirect($"/#{user.Nickname}");
 	}
+
+	public enum CardType {
+		Normal = 1,
+		LinkPlaceholder = 2,
+		DeletionConfirmation = 3
+	}
 }