Michal/QRPayWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign: single-page QRPay app with modern UI

Browse Source 
Removed sidebar, Counter, and Weather pages. Rebuilt Home.razor as a focused QR payment generator with validation, responsive card layout, and QR code display. Added new CSS for modern look, updated global styles, and introduced SVG logo/favicon. Cleaned up solution and project files for a streamlined, single-page experience.
This commit is contained in:
Michal Vrba
2025-12-19 15:44:09 +01:00
parent 07bf9da4e1
commit beb5830279
15 changed files with 662 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
QRPay/Pages/Home.razor
+156 -54
View File
@@ -1,80 +1,182 @@
@page "/"
@using QRCoder
@using SixLabors.ImageSharp.Formats
<PageTitle>Home</PageTitle>
@using System.ComponentModel.DataAnnotations
<PageTitle>QRPay - QR Payment Generator</PageTitle>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create QR payment barcode</h5>
<div class="qrpay-container">
@if (!_showQRCode)
{
<!-- Form View -->
<div class="qrpay-card">
<!-- Logo and Header -->
<div class="qrpay-header">
<div class="qrpay-logo">
<img src="logo.svg" alt="QRPay Logo" />
</div>
<h1 class="qrpay-title">QRPay</h1>
<p class="qrpay-subtitle">Generate QR payment codes instantly</p>
</div>
<!-- Form -->
<EditForm Model="@paymentModel" OnValidSubmit="@GenerateQRCode">
<DataAnnotationsValidator />
<div class="qrpay-form">
<div class="form-group">
<label for="name" class="form-label">Beneficiary Name</label>
<InputText @bind-Value="paymentModel.Name" class="form-control" id="name" placeholder="Enter beneficiary name" />
<ValidationMessage For="@(() => paymentModel.Name)" class="validation-message" />
</div>
<div class="form-group">
<label for="iban" class="form-label">IBAN</label>
<InputText @bind-Value="paymentModel.IBAN" class="form-control" id="iban" placeholder="Enter IBAN (e.g., SK89 7500 0000 0000 1234 5671)" />
<ValidationMessage For="@(() => paymentModel.IBAN)" class="validation-message" />
</div>
<div class="form-group">
<label for="amount" class="form-label">Amount (EUR)</label>
<InputNumber @bind-Value="paymentModel.Amount" class="form-control" id="amount" placeholder="0.00" step="0.01" />
<ValidationMessage For="@(() => paymentModel.Amount)" class="validation-message" />
</div>
<div class="form-group">
<label for="remark" class="form-label">Payment Reference (Optional)</label>
<InputText @bind-Value="paymentModel.Remark" class="form-control" id="remark" placeholder="Enter payment reference or note" />
<ValidationMessage For="@(() => paymentModel.Remark)" class="validation-message" />
</div>
<button type="submit" class="btn-generate" disabled="@_isGenerating">
@if (_isGenerating)
{
<span class="spinner"></span>
<span>Generating...</span>
}
else
{
<span>Generate QR Code</span>
}
</button>
</div>
</EditForm>
</div>
<div class="modal-body">
<div class="form-group">
<label for="input0">Name</label>
<input type="text" class="form-control" id="input0" @bind="Name" placeholder="Enter beneficiary name">
}
else
{
<!-- QR Code View -->
<div class="qrcode-container">
<div class="qrcode-header">
<h2>Payment QR Code</h2>
<p>Scan this code with your banking app</p>
</div>
<div class="form-group">
<label for="input1">IBAN</label>
<input type="text" class="form-control" id="input1" @bind="IBAN" placeholder="Enter IBAN">
<div class="qrcode-display">
<img src="@QRCodeStr" alt="Payment QR Code" />
</div>
<div class="form-group">
<label for="input2">Amount</label>
<input type="text" class="form-control" id="input2" placeholder="Enter amount in EUR" @bind="Amount">
</div>
<div class="form-group">
<label for="input3">Remark</label>
<input type="text" class="form-control" id="input3" placeholder="Enter optional remark" @bind="Remark">
<div class="payment-details">
<div class="detail-row">
<span class="detail-label">To:</span>
<span class="detail-value">@paymentModel.Name</span>
</div>
<div class="detail-row">
<span class="detail-label">Amount:</span>
<span class="detail-value">€@paymentModel.Amount.ToString("F2")</span>
</div>
@if (!string.IsNullOrWhiteSpace(paymentModel.Remark))
{
<div class="detail-row">
<span class="detail-label">Reference:</span>
<span class="detail-value">@paymentModel.Remark</span>
</div>
}
</div>
<button class="btn-back" @onclick="@GoBack">
<span>← Create New Payment</span>
</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary" @onclick="@GenerateQRCode">Generate</button>
</div>
@if (_show)
{
<div class="text-center">
<img src="@QRCodeStr" style="width:200px;height:200px" />
</div>
}
</div>
}
</div>
@code {
string IBAN { get; set; } = string.Empty;
decimal Amount { get; set; } = 0;
string Remark { get; set; } = string.Empty;
string QRCodeStr { get; set; } = string.Empty;
string Name { get; set; } = string.Empty;
private PaymentModel paymentModel = new();
private string QRCodeStr = string.Empty;
private bool _showQRCode = false;
private bool _isGenerating = false;
bool _show = false;
public void GenerateQRCode()
public class PaymentModel
{
QRCodeStr = string.Empty;
[Required(ErrorMessage = "Beneficiary name is required")]
[StringLength(70, ErrorMessage = "Name cannot exceed 70 characters")]
public string Name { get; set; } = string.Empty;
if (!string.IsNullOrWhiteSpace(IBAN))
[Required(ErrorMessage = "IBAN is required")]
[RegularExpression(@"^[A-Z]{2}[0-9]{2}[A-Z0-9]{4}[0-9]{7}([A-Z0-9]?){0,16}$", ErrorMessage = "Please enter a valid IBAN")]
public string IBAN { get; set; } = string.Empty;
[Required(ErrorMessage = "Amount is required")]
[Range(0.01, 999999.99, ErrorMessage = "Amount must be between €0.01 and €999,999.99")]
public decimal Amount { get; set; } = 0;
[StringLength(140, ErrorMessage = "Remark cannot exceed 140 characters")]
public string? Remark { get; set; } = string.Empty;
}
public async Task GenerateQRCode()
{
_isGenerating = true;
StateHasChanged();
// Small delay to show loading state
await Task.Delay(500);
try
{
QRCodeStr = string.Empty;
using (var ms = new MemoryStream())
if (!string.IsNullOrWhiteSpace(paymentModel.IBAN))
{
QRCodeGenerator qRCodeGenerator = new QRCodeGenerator();
using (var ms = new MemoryStream())
{
QRCodeGenerator qRCodeGenerator = new QRCodeGenerator();
var payment = new PayBySquareTextGenerator.Payment(IBAN.Replace(" ", ""), Amount, "EUR", "1", Remark);
payment.ConstantSymbol = "0308";
payment.BeneficiaryName = Name;
var payment = new PayBySquareTextGenerator.Payment(
paymentModel.IBAN.Replace(" ", ""),
paymentModel.Amount,
"EUR",
"1",
paymentModel.Remark ?? string.Empty);
payment.ConstantSymbol = "0308";
payment.BeneficiaryName = paymentModel.Name;
var a = new PayBySquareTextGenerator.PayBySquareOverkill(payment);
var stringData = a.GeneratePayBySquareOverkillString();
var payBySquare = new PayBySquareTextGenerator.PayBySquareOverkill(payment);
var stringData = payBySquare.GeneratePayBySquareOverkillString();
// Generate QR code data
using var qrCodeData = QRCodeGenerator.GenerateQrCode(stringData, QRCodeGenerator.ECCLevel.Q);
using var qrCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeImage = qrCode.GetGraphic(20);
// Generate QR code data
using var qrCodeData = QRCodeGenerator.GenerateQrCode(stringData, QRCodeGenerator.ECCLevel.Q);
using var qrCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeImage = qrCode.GetGraphic(20);
QRCodeStr = $"data:image/png;base64,{Convert.ToBase64String(qrCodeImage)}";
QRCodeStr = $"data:image/png;base64,{Convert.ToBase64String(qrCodeImage)}";
}
_showQRCode = true;
}
_show = true;
}
finally
{
_isGenerating = false;
StateHasChanged();
}
}
public void GoBack()
{
_showQRCode = false;
QRCodeStr = string.Empty;
paymentModel = new PaymentModel(); // Reset the form
StateHasChanged();
}
}