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

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
parent da53a0eef7 9179d6825c
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()) 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) @foreach (var msg in ErrorMessages)
{ {
@(msg) @(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> <i class="bx bx-sm bx-envelope text-gray-500"></i>
</div> </div>
<div class="d-flex align-items-center flex-row-fluid flex-wrap"> <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> </div>
<div class="separator separator-dashed my-4"></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) 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 @errorMessage
</div> </div>
} }
@ -65,6 +65,10 @@ else
{ {
Exception = exception; Exception = exception;
Crashed = true; 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(); Recover();

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

@ -3,7 +3,7 @@
<CascadingValue Value="this"> <CascadingValue Value="this">
@if (ViewIndex == 0) @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> <i class="bx bg-lg bx-chat"></i>
</button> </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> <span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(ticket.CreatedAt))</span>
</div> </div>
</a> </a>
if (ticket.Id != Tickets.Last().Id)
{
<span class="separator"></span>
}
} }
} }
else else

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

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

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

@ -16,7 +16,7 @@
<div class="row mt-5"> <div class="row mt-5">
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div class="card"> <div class="card h-100">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Redeem gift code</h3> <h3 class="card-title">Redeem gift code</h3>
</div> </div>
@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div class="col-md-6 col-12"> <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"> <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"/> <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> </div>
@ -61,7 +61,7 @@
<LazyLoader @ref="LazyLoader" Load="Load"> <LazyLoader @ref="LazyLoader" Load="Load">
<Table TableItem="Transaction" <Table TableItem="Transaction"
Items="Transactions" Items="Transactions"
PageSize="50" PageSize="10"
TableClass="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 fs-6" TableClass="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 fs-6"
TableHeadClass="fw-bold text-muted"> TableHeadClass="fw-bold text-muted">
<Column TableItem="Transaction" Title="" Field="@(x => x.Id)" Sortable="false" Filterable="false" Width="10%"> <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" @page "/account/security"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Services @using Moonlight.App.Services
@using Moonlight.App.Services.Users @using Moonlight.App.Services.Users
@using OtpNet @using OtpNet
@ -17,6 +16,9 @@
<div class="row mt-5"> <div class="row mt-5">
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div class="card"> <div class="card">
<div class="card-header">
<span class="card-title">Change password</span>
</div>
<SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit"> <SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@ -45,44 +47,49 @@
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
@if (IdentityService.Flags[UserFlag.TotpEnabled]) @if (IdentityService.Flags[UserFlag.TotpEnabled])
{ {
<div class="card card-body fs-6"> <div class="card h-100">
<span class="card-title text-success">Your account is secured with 2fa</span> <div class="card-header">
<div class="text-center"> <span class="card-title text-success">Your account is secured with 2fa</span>
<ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/> </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>
</div> </div>
} }
else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null) else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null)
{ {
<div class="card"> <div class="card h-100">
<div class="card-body fs-6"> <div class="card-header">
<p> <span class="card-title">Scan the qr code and enter the code generated by the app you have scanned it in</span>
Scan the qr code and enter the code generated by the app you have scanned it in </div>
</p> <div class="card-body fs-5">
@{ @{
QRCodeGenerator qrGenerator = new QRCodeGenerator(); QRCodeGenerator qrGenerator = new QRCodeGenerator();
var qrCodeData = qrGenerator.CreateQrCode var qrCodeData = qrGenerator.CreateQrCode
( (
$"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}", $"otpauth://totp/{Uri.EscapeDataString(IdentityService.CurrentUser.Email)}?secret={IdentityService.CurrentUser.TotpKey}&issuer={Uri.EscapeDataString("Moonlight")}",
QRCodeGenerator.ECCLevel.Q QRCodeGenerator.ECCLevel.Q
); );
PngByteQRCode qrCode = new PngByteQRCode(qrCodeData); PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(5); byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(5);
var base64 = Convert.ToBase64String(qrCodeAsPngByteArr); var base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
} }
<div class="text-center"> <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>
<div class="mt-3 text-center"> <div class="mt-5 text-center">
<span class="h3">@(IdentityService.CurrentUser.TotpKey)</span> <span class="fs-4 fw-semibold">@(IdentityService.CurrentUser.TotpKey)</span>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit"> <SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit">
<div class="input-group"> <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> <button type="submit" class="btn btn-primary">Enable 2fa</button>
</div> </div>
</SmartForm> </SmartForm>
@ -91,22 +98,28 @@
} }
else else
{ {
<div class="card card-body fs-6"> <div class="card h-100">
<span class="card-title">Secure your account using 2fa</span> <div class="card-header">
<p> <span class="card-title">Secure your account using 2fa</span>
Make sure you have installed one of the following apps on your smartphone and continue </div>
</p> <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> <a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a>
<br/> <br/>
<a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a> <a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>
<br/> <br/>
<a href="https://authy.com/download/" target="_blank">Authy</a> <a href="https://authy.com/download/" target="_blank">Authy</a>
<br/> <br/>
<a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a> <a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
<br/> <br/>
<div class="text-center"> </div>
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/> <div class="card-footer">
<div class="text-end">
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
</div>
</div> </div>
</div> </div>
} }

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

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

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

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

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

@ -11,28 +11,44 @@
</div> </div>
<div class="mt-5 row"> <div class="mt-5 row">
<div class="col-md-3 col-12"> <div class="col-md-3 col-12 mb-3">
<div href="#" class="card card-body text-center fs-6"> <a href="/store" class="card border-hover-primary border-2 h-100">
<div class="mb-5"> <img class="card-img-top p-5" src="/svg/shopping.svg" alt="Shopping" style="max-height: 20vh"/>
Do you want to order new services? Are you searching for our service specifications and prices? <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> </div>
<a href="/store" class="btn btn-primary">Go to store</a> </a>
</div>
</div> </div>
<div class="col-md-3 col-12"> <div class="col-md-3 col-12 mb-3">
<div href="#" class="card card-body text-center fs-6"> <a href="/services" class="card border-hover-primary border-2 h-100">
<div class="mb-5"> <img class="card-img-top p-5" src="/svg/manageServices.svg" alt="Manage services" style="max-height: 20vh"/>
Do you want to order new services? Are you searching for our service specifications and prices? <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> </div>
<a href="/store" class="btn btn-primary">Go to store</a> </a>
</div>
</div> </div>
<div class="col-md-3 col-12"> <div class="col-md-3 col-12 mb-3">
<div href="#" class="card card-body text-center fs-6"> <a href="/community" class="card border-hover-primary border-2 h-100">
<div class="mb-5"> <img class="card-img-top p-5" src="/svg/news.svg" alt="News" style="max-height: 20vh"/>
Do you want to order new services? Are you searching for our service specifications and prices? <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> </div>
<a href="/store" class="btn btn-primary">Go to store</a> </a>
</div> </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>
</div> </div>

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

@ -4,7 +4,6 @@
@using Moonlight.App.Services @using Moonlight.App.Services
@using Moonlight.App.Database.Entities.Store @using Moonlight.App.Database.Entities.Store
@using Moonlight.App.Repositories @using Moonlight.App.Repositories
@using Moonlight.App.Services.ServiceManage
@inject ConfigService ConfigService @inject ConfigService ConfigService
@inject StoreService StoreService @inject StoreService StoreService
@ -33,17 +32,17 @@
</div> </div>
<div class="row mb-5"> <div class="row mb-5">
<div class="col-md-4 col-12"> <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> <h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 1) days</h4>
</a> </a>
</div> </div>
<div class="col-md-4 col-12"> <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> <h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 2) days</h4>
</a> </a>
</div> </div>
<div class="col-md-4 col-12"> <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> <h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 3) days</h4>
</a> </a>
</div> </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