Show full QR codes with copy button in GroupDetailPage

This commit is contained in:
steinhelge
2025-11-23 22:09:11 +01:00
parent 646ab0aef1
commit 587847e7ed
2 changed files with 31 additions and 4 deletions
+13
View File
@@ -19,6 +19,17 @@ builder.Services.AddScoped<IProductService, ProductService>();
builder.Services.AddScoped<IQrCodeService, QrCodeService>();
builder.Services.AddScoped<ITransactionService, TransactionService>();
// Add CORS
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowFrontend", policy =>
{
policy.WithOrigins("http://localhost:5173")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
var app = builder.Build();
@@ -39,6 +50,8 @@ if (app.Environment.IsDevelopment())
app.UseHttpsRedirection();
app.UseCors("AllowFrontend");
app.UseAuthorization();
app.MapControllers();
@@ -76,13 +76,27 @@ export default function GroupDetailPage() {
<Card className="shadow-sm h-100">
<Card.Body>
<div className="d-flex justify-content-between align-items-start mb-3">
<div>
<div className="flex-grow-1">
<h5 className="mb-1">{person.name}</h5>
{person.email && <small className="text-muted d-block">{person.email}</small>}
{person.phoneNumber && <small className="text-muted d-block">{person.phoneNumber}</small>}
<small className="font-monospace text-muted d-block mt-2">
QR: {person.qrCode.substring(0, 8)}...
</small>
<div className="mt-2 p-2 bg-light rounded">
<small className="text-muted d-block">QR Code:</small>
<code className="d-block text-break" style={{ fontSize: '0.75rem' }}>
{person.qrCode}
</code>
<Button
variant="outline-primary"
size="sm"
className="mt-2 w-100"
onClick={() => {
navigator.clipboard.writeText(person.qrCode);
alert('QR code copied to clipboard!');
}}
>
Copy QR Code
</Button>
</div>
</div>
<Button
variant={selectedPerson?.id === person.id ? 'secondary' : 'outline-primary'}