beenull/Moonlight
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #358 from Moonlight-Panel/v2_UiFixes

Browse source 
Added some ui fixes
This commit is contained in:
Marcel Baumgartner 2024-01-16 16:32:14 +01:00 committed by GitHub
commit a9af1ec15e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 120 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Moonlight/Shared/Components/Forms/SmartForm.razor
View file

@ -15,7 +15,7 @@
{
if (ErrorMessages.Any())
{
<div class="alert alert-danger bg-danger text-white p-10 mb-3">
<div class="alert alert-danger bg-danger text-white p-10 mb-3 rounded-0">
@foreach (var msg in ErrorMessages)
{
@(msg)

2
Moonlight/Shared/Components/Navigations/CommunityNavigation.razor
View file

@ -10,7 +10,7 @@
<i class="bx bx-sm bx-envelope text-gray-500"></i>
</div>
<div class="d-flex align-items-center flex-row-fluid flex-wrap">
<a href="/community" class="text-gray-800 fs-5 fw-bold text-active-primary @(Index == 0 ? "active" : "")">Announcements</a>
<a href="/community" class="text-gray-800 fs-5 fw-bold text-active-primary @(Index == 0 ? "active" : "")">News</a>
</div>
</div>
<div class="separator separator-dashed my-4"></div>

6
Moonlight/Shared/Components/Partials/SoftErrorHandler.razor
View file

@ -33,7 +33,7 @@ else
{
foreach (var errorMessage in ErrorMessages)
{
<div class="alert alert-danger bg-danger text-white p-3 mb-5 fw-bold">
<div class="alert alert-danger bg-danger text-white p-3 mb-5 fw-semibold fs-5 text-center">
@errorMessage
</div>
}
@ -65,6 +65,10 @@ else
{
Exception = exception;
Crashed = true;
var username = IdentityService.IsSignedIn ? IdentityService.CurrentUser.Username : "Guest";
Logger.Warn($"A crash occured in the view of the user '{username}'");
Logger.Warn(exception);
}
Recover();

2
Moonlight/Shared/Components/TicketPopup/TicketPopupMain.razor
View file

@ -3,7 +3,7 @@
<CascadingValue Value="this">
@if (ViewIndex == 0)
{
<button @onclick="() => SetViewIndex(1)" class="btn btn-lg btn-icon btn-rounded-circle btn-white border border-warning" style="pointer-events: all">
<button @onclick="() => SetViewIndex(1)" class="btn btn-lg btn-icon btn-rounded-circle bg-secondary btn-white border border-2 border-warning" style="pointer-events: all">
<i class="bx bg-lg bx-chat"></i>
</button>
}

5
Moonlight/Shared/Components/TicketPopup/TicketPopupOverview.razor
View file

@ -51,6 +51,11 @@
<span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(ticket.CreatedAt))</span>
</div>
</a>
if (ticket.Id != Tickets.Last().Id)
{
<span class="separator"></span>
}
}
}
else

10
Moonlight/Shared/Views/Account/Index.razor
View file

@ -29,12 +29,12 @@
</div>
</div>
<div class="col ms-n2">
<h4 class="mb-1">
<div class="mb-1 fs-5 fw-semibold">
Your avatar
</h4>
<small class="text-body-secondary">
PNG or JPG no bigger than 1000px wide and tall.
</small>
</div>
<div class="fs-7">
PNG or JPG no bigger than 1000px wide and tall
</div>
</div>
</div>
</div>

6
Moonlight/Shared/Views/Account/Payments.razor
View file

@ -16,7 +16,7 @@
<div class="row mt-5">
<div class="col-md-6 col-12">
<div class="card">
<div class="card h-100">
<div class="card-header">
<h3 class="card-title">Redeem gift code</h3>
</div>
@ -29,7 +29,7 @@
</div>
</div>
<div class="col-md-6 col-12">
<div class="card card-body">
<div class="card card-body h-100">
<div class="row d-flex justify-content-center">
<input @bind="Amount" class="form-control form-control-lg form-control-solid-bg w-50 text-center fs-2" placeholder="Enter amount to add to your account"/>
</div>
@ -61,7 +61,7 @@
<LazyLoader @ref="LazyLoader" Load="Load">
<Table TableItem="Transaction"
Items="Transactions"
PageSize="50"
PageSize="10"
TableClass="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 fs-6"
TableHeadClass="fw-bold text-muted">
<Column TableItem="Transaction" Title="" Field="@(x => x.Id)" Sortable="false" Filterable="false" Width="10%">

79
Moonlight/Shared/Views/Account/Security.razor
View file

@ -1,6 +1,5 @@
@page "/account/security"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Services
@using Moonlight.App.Services.Users
@using OtpNet
@ -17,6 +16,9 @@
<div class="row mt-5">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<span class="card-title">Change password</span>
</div>
<SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit">
<div class="card-body">
<div class="row">
@ -45,44 +47,49 @@
<div class="col-md-6 col-12">
@if (IdentityService.Flags[UserFlag.TotpEnabled])
{
<div class="card card-body fs-6">
<span class="card-title text-success">Your account is secured with 2fa</span>
<div class="text-center">
<ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/>
<div class="card h-100">
<div class="card-header">
<span class="card-title text-success">Your account is secured with 2fa</span>
</div>
<div class="card-body"></div>
<div class="card-footer">
<div class="text-end">
<ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/>
</div>
</div>
</div>
}
else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null)
{
<div class="card">
<div class="card-body fs-6">
<p>
Scan the qr code and enter the code generated by the app you have scanned it in
</p>
<div class="card h-100">
<div class="card-header">
<span class="card-title">Scan the qr code and enter the code generated by the app you have scanned it in</span>
</div>
<div class="card-body fs-5">
@{
QRCodeGenerator qrGenerator = new QRCodeGenerator();
var qrCodeData = qrGenerator.CreateQrCode
(
$"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}",
QRCodeGenerator.ECCLevel.Q
);
(
$"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}",
QRCodeGenerator.ECCLevel.Q
);
PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(5);
var base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
}
<div class="text-center">
<img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid">
<img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid rounded" style="max-height: 25vh">
</div>
<div class="mt-3 text-center">
<span class="h3">@(IdentityService.CurrentUser.TotpKey)</span>
<div class="mt-5 text-center">
<span class="fs-4 fw-semibold">@(IdentityService.CurrentUser.TotpKey)</span>
</div>
</div>
<div class="card-footer">
<SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit">
<div class="input-group">
<input @bind="CodeForm.Code" type="number" class="form-control"/>
<input @bind="CodeForm.Code" type="number" placeholder="Enter generated code..." class="form-control"/>
<button type="submit" class="btn btn-primary">Enable 2fa</button>
</div>
</SmartForm>
@ -91,22 +98,28 @@
}
else
{
<div class="card card-body fs-6">
<span class="card-title">Secure your account using 2fa</span>
<p>
Make sure you have installed one of the following apps on your smartphone and continue
</p>
<div class="card h-100">
<div class="card-header">
<span class="card-title">Secure your account using 2fa</span>
</div>
<div class="card-body fs-5">
<p>
Make sure you have installed one of the following apps on your smartphone and continue
</p>
<a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a>
<br/>
<a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>
<br/>
<a href="https://authy.com/download/" target="_blank">Authy</a>
<br/>
<a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
<br/>
<div class="text-center">
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
<a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a>
<br/>
<a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>
<br/>
<a href="https://authy.com/download/" target="_blank">Authy</a>
<br/>
<a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
<br/>
</div>
<div class="card-footer">
<div class="text-end">
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
</div>
</div>
</div>
}

20
Moonlight/Shared/Views/Admin/Sys/Diagnose.razor
View file

@ -10,14 +10,18 @@
<AdminSysNavigation Index="3" />
<Tooltip Color="danger">
Dont share this file with random people.
We do our best to clear this file from sensitive information but it can still contain some.
Its safe to share with official moonlight panel developers
</Tooltip>
<div class="card card-body mt-5">
<WButton Text="Generate diagnose" OnClick="GenerateDiagnose" />
<div class="row">
<div class="col-md-6 col-12">
<Tooltip Color="danger">
Dont share this file with random people.
We do our best to clear this file from sensitive information but it can still contain some.
Its safe to share with official moonlight panel developers
</Tooltip>
<div class="card card-body mt-5">
<WButton Text="Generate diagnose" OnClick="GenerateDiagnose" />
</div>
</div>
</div>
@code

2
Moonlight/Shared/Views/Admin/Sys/Settings.razor
View file

@ -18,7 +18,7 @@
else
{
<div class="card mt-5">
<div class="card-header">
<div class="card-header border-bottom-0">
@{
string title;

52
Moonlight/Shared/Views/Index.razor
View file

@ -11,28 +11,44 @@
</div>
<div class="mt-5 row">
<div class="col-md-3 col-12">
<div href="#" class="card card-body text-center fs-6">
<div class="mb-5">
Do you want to order new services? Are you searching for our service specifications and prices?
<div class="col-md-3 col-12 mb-3">
<a href="/store" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/shopping.svg" alt="Shopping" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
Do you want to order new services? Are you searching for our service specifications and prices?
</div>
</div>
<a href="/store" class="btn btn-primary">Go to store</a>
</div>
</a>
</div>
<div class="col-md-3 col-12">
<div href="#" class="card card-body text-center fs-6">
<div class="mb-5">
Do you want to order new services? Are you searching for our service specifications and prices?
<div class="col-md-3 col-12 mb-3">
<a href="/services" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/manageServices.svg" alt="Manage services" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
You want to see your services? Do you want to renew them? Or just take a quick look?
</div>
</div>
<a href="/store" class="btn btn-primary">Go to store</a>
</div>
</a>
</div>
<div class="col-md-3 col-12">
<div href="#" class="card card-body text-center fs-6">
<div class="mb-5">
Do you want to order new services? Are you searching for our service specifications and prices?
<div class="col-md-3 col-12 mb-3">
<a href="/community" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/news.svg" alt="News" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
You want to see the latest news? Do you want to join our events? Having a project to share with the community?
</div>
</div>
<a href="/store" class="btn btn-primary">Go to store</a>
</div>
</a>
</div>
<div class="col-md-3 col-12 mb-3">
<a href="/account" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/userSettings.svg" alt="User settings" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
Searching for you settings? Want to add balance to your account? Do you want to change your profile picture?
</div>
</div>
</a>
</div>
</div>

7
Moonlight/Shared/Views/Store/Order.razor
View file

@ -4,7 +4,6 @@
@using Moonlight.App.Services
@using Moonlight.App.Database.Entities.Store
@using Moonlight.App.Repositories
@using Moonlight.App.Services.ServiceManage
@inject ConfigService ConfigService
@inject StoreService StoreService
@ -33,17 +32,17 @@
</div>
<div class="row mb-5">
<div class="col-md-4 col-12">
<a @onclick="() => SetDurationMultiplier(1)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 1 ? "border border-info" : "")">
<a @onclick="() => SetDurationMultiplier(1)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 1 ? "border border-2 border-info" : "")">
<h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 1) days</h4>
</a>
</div>
<div class="col-md-4 col-12">
<a @onclick="() => SetDurationMultiplier(2)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 2 ? "border border-info" : "")">
<a @onclick="() => SetDurationMultiplier(2)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 2 ? "border border-2 border-info" : "")">
<h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 2) days</h4>
</a>
</div>
<div class="col-md-4 col-12">
<a @onclick="() => SetDurationMultiplier(3)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @( DurationMultiplier == 3 ? "border border-info" : "")">
<a @onclick="() => SetDurationMultiplier(3)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @( DurationMultiplier == 3 ? "border border-2 border-info" : "")">
<h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 3) days</h4>
</a>
</div>

1
Moonlight/wwwroot/svg/manageServices.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

1
Moonlight/wwwroot/svg/news.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

1
Moonlight/wwwroot/svg/userSettings.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.1 KiB