From d4468c138d65650c996fab3ce63b73a284cd7c19 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Tue, 4 Apr 2023 17:58:05 +0200
Subject: [PATCH 1/6] security settings design changed

---
 Moonlight/Shared/Views/Profile/Security.razor | 359 +++++++++---------
 1 file changed, 190 insertions(+), 169 deletions(-)

diff --git a/Moonlight/Shared/Views/Profile/Security.razor b/Moonlight/Shared/Views/Profile/Security.razor
index db0bf9f8..7cd7bff4 100644
--- a/Moonlight/Shared/Views/Profile/Security.razor
+++ b/Moonlight/Shared/Views/Profile/Security.razor
@@ -22,204 +22,225 @@
 <ProfileNavigation Index="1"/>
 
 <div class="card mb-5 mb-xl-10">
-    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
-        <div class="card-title m-0">
-            <h3 class="fw-bold m-0">
-                <TL>Security</TL>
-            </h3>
-        </div>
-    </div>
-
     <LazyLoader Load="Load">
-        <div class="card mb-5 mb-xl-10">
-            <div class="card-body border-top p-9">
-                @if (TotpEnabled)
-                {
-                    <div class="alert alert-success d-flex rounded p-6">
-                        <span class="svg-icon svg-icon-2tx svg-icon-primary me-4">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
-                                <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                        <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
-                            <div class="mb-3 mb-md-0 fw-semibold">
-                                <h4 class="text-gray-900 fw-bold">
-                                    <TL>Your account is secured with 2fa</TL>
-                                </h4>
-                                <div class="fs-6 text-gray-700 pe-7">
-                                    <TL>anyone write a fancy text here?</TL>
-                                </div>
-                            </div>
-
-                            <button @onclick="Disable" class="btn btn-danger px-6 align-self-center text-nowrap">
+        @if (TotpEnabled)
+        {
+            <div class="alert alert-primary d-flex rounded ms-6 me-6 mt-6 mb-8">
+                <table class="w-100">
+                    <tr>
+                        <td rowspan="2">
+                            <span class="svg-icon svg-icon-2tx svg-icon-primary">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
+                                    <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
+                                </svg>
+                            </span>
+                        </td>
+                        <td class="w-100">
+                            <h4 class="text-gray-900 fw-bold ms-4">
+                                <TL>Your account is secured with 2fa</TL>
+                            </h4>
+                        </td>
+                        <td rowspan="2">
+                            <a @onclick="Disable" class="btn btn-primary px-6 align-self-center text-nowrap" data-bs-toggle="modal" data-bs-target="#twofactorauth">
                                 <TL>Disable</TL>
-                            </button>
-                        </div>
-                    </div>
-                }
-                else
-                {
-                    <div class="alert alert-primary d-flex rounded p-6">
-                        <span class="svg-icon svg-icon-2tx svg-icon-primary me-4">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
-                                <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                        <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
-                            <div class="mb-3 mb-md-0 fw-semibold">
-                                <h4 class="text-gray-900 fw-bold">
-                                    <TL>Secure your account</TL>
-                                </h4>
-                                <div class="fs-6 text-gray-700 pe-7">
-                                    <TL>2fa adds another layer of security to your account. You have to enter a 6 digit code in order to login.</TL>
-                                </div>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="fs-6 text-gray-700 pe-7 ms-4">
+                                <TL>anyone write a fancy text here?</TL>
                             </div>
-
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        }
+        else
+        {
+            <div class="alert alert-primary d-flex rounded ms-6 me-6 mt-6 mb-8">
+                <table class="w-100">
+                    <tr>
+                        <td rowspan="2">
+                            <span class="svg-icon svg-icon-2tx svg-icon-primary">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
+                                    <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
+                                </svg>
+                            </span>
+                        </td>
+                        <td class="w-100">
+                            <h4 class="text-gray-900 fw-bold ms-4">
+                                <TL>Secure your account</TL>
+                            </h4>
+                        </td>
+                        <td rowspan="2">
                             <a @onclick="Enable" class="btn btn-primary px-6 align-self-center text-nowrap" data-bs-toggle="modal" data-bs-target="#twofactorauth">
                                 <TL>Enable</TL>
                             </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="fs-6 text-gray-700 pe-7 ms-4">
+                                <TL>2fa adds another layer of security to your account. You have to enter a 6 digit code in order to login.</TL>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        }
+
+        <div class="modal fade" id="twofactorauth" tabindex="-1" style="display: none;" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered mw-650px">
+                <div class="modal-content">
+                    <div class="modal-header flex-stack py-6">
+                        <h2 class="ms-3">
+                            <TL>Activate 2fa</TL>
+                        </h2>
+                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
+                            <span class="svg-icon svg-icon-1">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
+                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
+                                </svg>
+                            </span>
                         </div>
                     </div>
-                }
+                    <div class="modal-body scroll-y ps-10 pe-10 pb-10">
+                        <div>
+                            <h3 class="text-dark fw-bold mb-3 mt-2">
+                                <TL>2fa apps</TL>
+                            </h3>
+                            <div class="text-gray-500 fw-semibold fs-6 mb-10">
+                                <TL>Use an app like </TL>
+                                <a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a>,
+                                <a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>,
+                                <a href="https://authy.com/download/" target="_blank">Authy</a>, <TL>or</TL>
+                                <a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a> <TL>and scan the following QR Code</TL>
+                                @if (EnablingTotp)
+                                {
+                                    <div class="pt-5 text-center">
+                                        @{
+                                            QRCodeGenerator qrGenerator = new QRCodeGenerator();
 
-                <div class="modal fade" id="twofactorauth" tabindex="-1" style="display: none;" aria-hidden="true">
-                    <div class="modal-dialog modal-dialog-centered mw-650px">
-                        <div class="modal-content">
-                            <div class="modal-header flex-stack">
-                                <h2>
-                                    <TL>Activate 2fa</TL>
-                                </h2>
-                                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
-                                    <span class="svg-icon svg-icon-1">
-                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
-                                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
-                                        </svg>
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="modal-body scroll-y pt-10 pb-15 px-lg-17">
-                                <div>
-                                    <h3 class="text-dark fw-bold mb-7">
-                                        <TL>2fa apps</TL>
-                                    </h3>
-                                    <div class="text-gray-500 fw-semibold fs-6 mb-10">
-                                        <TL>Use an app like </TL>
-                                        <a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">Google Authenticator</a>,
-                                        <a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">Microsoft Authenticator</a>,
-                                        <a href="https://authy.com/download/" target="_blank">Authy</a>, <TL>or</TL>
-                                        <a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a> <TL>and scan the following QR Code</TL>
-                                        @if (EnablingTotp)
-                                        {
-                                            <div class="pt-5 text-center">
-                                                @{
-                                                    QRCodeGenerator qrGenerator = new QRCodeGenerator();
+                                            var qrCodeData = qrGenerator.CreateQrCode
+                                                (
+                                                    $"otpauth://totp/{Uri.EscapeDataString(User.Email)}?secret={TotpSecret}&issuer={Uri.EscapeDataString(Issuer)}",
+                                                    QRCodeGenerator.ECCLevel.Q
+                                                );
 
-                                                    var qrCodeData = qrGenerator.CreateQrCode
-                                                        (
-                                                            $"otpauth://totp/{Uri.EscapeDataString(User.Email)}?secret={TotpSecret}&issuer={Uri.EscapeDataString(Issuer)}",
-                                                            QRCodeGenerator.ECCLevel.Q
-                                                        );
-
-                                                    PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);
-                                                    byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(20);
-                                                    var base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
-                                                }
-                                                <img src="data:image/png;base64,@(base64)" alt="" class="mw-150px">
-                                            </div>
+                                            PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);
+                                            byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(20);
+                                            var base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
                                         }
+                                        <img src="data:image/png;base64,@(base64)" alt="" class="mw-200px mt-2">
                                     </div>
-                                    <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-10 p-6">
-                                        <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
-                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"></rect>
-                                                <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor"></rect>
-                                                <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor"></rect>
-                                            </svg>
-                                        </span>
-                                        <div class="d-flex flex-stack flex-grow-1">
-                                            <div class="fw-semibold">
-                                                <div class="fs-6 text-gray-700">
-                                                    <TL>If you have trouble using the QR Code, select manual input in the app and enter your email and the following code:</TL>
-                                                    <div class="fw-bold text-dark pt-2">@(TotpSecret)</div>
-                                                </div>
-                                            </div>
+                                }
+                            </div>
+                            <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-8 p-6">
+                                <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"></rect>
+                                        <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor"></rect>
+                                        <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor"></rect>
+                                    </svg>
+                                </span>
+                                <div class="d-flex flex-stack flex-grow-1">
+                                    <div class="fw-semibold">
+                                        <div class="fs-6 text-gray-700">
+                                            <TL>If you have trouble using the QR Code, select manual input in the app and enter your email and the following code:</TL>
+                                            <div class="fw-bold text-dark pt-2">@(TotpSecret)</div>
                                         </div>
                                     </div>
-
-                                    <a class="btn btn-primary px-6 align-self-center text-nowrap float-end" data-bs-toggle="modal" data-bs-target="#test">
-                                        <TL>Next</TL>
-                                    </a>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                </div>
 
-                <div class="modal fade" id="test" tabindex="-1" style="display: none;" aria-hidden="true">
-                    <div class="modal-dialog modal-dialog-centered mw-650px">
-                        <div class="modal-content">
-                            <div class="modal-header flex-stack">
-                                <h2>
-                                    <TL>Finish activation</TL>
-                                </h2>
-                                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
-                                    <span class="svg-icon svg-icon-1">
-                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
-                                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
-                                        </svg>
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="modal-body scroll-y pt-10 pb-15 px-lg-17">
-                                <div class="text-gray-500 fw-semibold fs-6 mb-10">
-                                    <div class="alert alert-primary d-flex align-items-center p-5 mb-10">
-                                        <i class="bx bx-info-circle fs-2hx text-primary me-4">
-                                            <span class="path1"></span><span class="path2"></span>
-                                        </i>
-                                        <div class="d-flex flex-column">
-                                            <h4 class="mb-1 text-primary">
-                                                <TL>2fa Code requiered</TL>
-                                            </h4>
-                                            <span>In order to finish the activation of 2fa, you need to enter the code your 2fa app shows you.</span>
-                                        </div>
-                                    </div>
-                                    <input type="text" class="form-control form-control-lg form-control-solid" placeholder="@SmartTranslateService.Translate("2fa Code")" @bind="currentTotp"/>
-
-                                    <br/>
-
-                                    <WButton CssClasses="btn btn-primary px-6 align-self-center text-nowrap float-end" WorkingText="@SmartTranslateService.Translate("Saving")" Text="@SmartTranslateService.Translate("Finish")" OnClick="CheckAndSaveTotp">
-                                    </WButton>
-                                </div>
-                            </div>
+                            <a class="btn btn-primary px-6 align-self-center text-nowrap float-end" data-bs-toggle="modal" data-bs-target="#test">
+                                <TL>Next</TL>
+                            </a>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <div class="card mb-5 mb-xl-10">
-            <div class="card-body border-top p-9">
-                <div class="row mb-6">
-                    <label class="col-lg-4 col-form-label fw-semibold fs-6">
-                        <TL>New password</TL>
-                    </label>
-                    <div class="col-lg-8">
-                        <div class="row">
-                            <div class="col-lg-6 fv-row fv-plugins-icon-container">
-                                <input @bind="Password" type="password" class="form-control form-control-lg form-control-solid">
-                            </div>
-                            <div class="col-lg-6 fv-row fv-plugins-icon-container">
-                                <WButton OnClick="ChangePassword" CssClasses="btn-danger" Text="@SmartTranslateService.Translate("Change")" WorkingText="@SmartTranslateService.Translate("Changing")"></WButton>
+        <div class="modal fade" id="test" tabindex="-1" style="display: none;" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered mw-650px">
+                <div class="modal-content">
+                    <div class="modal-header flex-stack py-6">
+                        <h2 class="ms-3">
+                            <TL>Finish activation</TL>
+                        </h2>
+                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
+                            <span class="svg-icon svg-icon-1">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
+                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
+                                </svg>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="modal-body scroll-y ps-10 pe-10 pb-10">
+                        <div class="text-gray-500 fw-semibold fs-6 mb-10">
+                            <div class="alert alert-primary d-flex align-items-center p-5 mb-6">
+                                <i class="bx bx-info-circle fs-2hx text-primary me-4">
+                                    <span class="path1"></span><span class="path2"></span>
+                                </i>
+                                <div class="d-flex flex-column">
+                                    <h4 class="mb-1 text-primary">
+                                        <TL>2fa Code requiered</TL>
+                                    </h4>
+                                    <span>In order to finish the activation of 2fa, you need to enter the code your 2fa app shows you.</span>
+                                </div>
                             </div>
+                            <input type="text" class="form-control form-control-lg form-control-solid mb-0" placeholder="@SmartTranslateService.Translate("2fa Code")" @bind="currentTotp"/>
+
+                            <br/>
+
+                            <WButton CssClasses="btn btn-primary mb-2 align-self-center text-nowrap float-end" WorkingText="@SmartTranslateService.Translate("Saving")" Text="@SmartTranslateService.Translate("Finish")" OnClick="CheckAndSaveTotp">
+                            </WButton>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+
+
+        <div class="separator mt-2"></div>
+
+        <div class="alert alert-danger d-flex rounded ms-6 me-6 mt-6 mb-8 bg-body">
+            <div class="w-100">
+                <table>
+                    <tr>
+                        <td>
+                            <span class="svg-icon svg-icon-2tx svg-icon-body">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
+                                    <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
+                                </svg>
+                            </span>
+                        </td>
+                        <td class="w-25">
+                            <span class="text-gray-700 fw-semibold fs-6 ms-4 me-2">
+                                <TL>New password</TL>
+                            </span>
+                        </td>
+                        <td class="w-75">
+                            <input @bind="Password" type="password" class="form-control">
+                        </td>
+                        <td class="">
+                            <WButton OnClick="ChangePassword"
+                                     CssClasses="btn-danger ms-4"
+                                     Text="@SmartTranslateService.Translate("Change")"
+                                     WorkingText="@SmartTranslateService.Translate("Changing")">
+                            </WButton>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
     </LazyLoader>
 </div>
 

From 19ddabdb0001b3f1a5c8b648d26fb871008dc899 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Tue, 4 Apr 2023 17:59:43 +0200
Subject: [PATCH 2/6] removed card header at /profile

---
 Moonlight/Shared/Views/Profile/Index.razor | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/Moonlight/Shared/Views/Profile/Index.razor b/Moonlight/Shared/Views/Profile/Index.razor
index b9394503..cb1451ce 100644
--- a/Moonlight/Shared/Views/Profile/Index.razor
+++ b/Moonlight/Shared/Views/Profile/Index.razor
@@ -13,14 +13,7 @@
 <LazyLoader Load="Load">
     <SmartForm OnValidSubmit="Save" Model="User">
         <div class="card mb-5 mb-xl-10">
-            <div class="card-header">
-                <div class="card-title">
-                    <h3 class="fw-bold m-0 text-gray-800">
-                        <TL>Personal information</TL>
-                    </h3>
-                </div>
-            </div>
-            <div class="card-body border-top p-9">
+            <div class="card-body p-9">
                 <div class="row">
                     <div class="col-lg-6 fv-row fv-plugins-icon-container">
                         <div class="mb-3">

From f81ccdd5c334c2982df421bef69b0e2d8f810e30 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Tue, 4 Apr 2023 20:47:59 +0200
Subject: [PATCH 3/6] Create Changelog.razor

---
 Moonlight/Shared/Views/Changelog.razor | 53 ++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 Moonlight/Shared/Views/Changelog.razor

diff --git a/Moonlight/Shared/Views/Changelog.razor b/Moonlight/Shared/Views/Changelog.razor
new file mode 100644
index 00000000..ad68c1e2
--- /dev/null
+++ b/Moonlight/Shared/Views/Changelog.razor
@@ -0,0 +1,53 @@
+@page "/changelog"
+
+@{
+    List<string[]> changelog = new List<string[]>()
+    {
+        new[] {"title", "body1", "body2"},
+        new[] {"title2", "body3", "body4", "body5"},
+    };
+    int i = 0;
+}
+
+<div class="card card-docs flex-row-fluid mb-2">
+    <div class="card-body fs-6 py-15 px-10 py-lg-15 px-lg-15 text-gray-700">
+        <div class="accordion accordion-flush accordion-icon-toggle" id="kt_accordion">
+            @foreach (var prt in changelog)
+            {
+                i++;
+                <div class="accordion-item mb-5">
+                    <div class="accordion-header py-3 d-flex" data-bs-toggle="collapse" data-bs-target="#i@(i)" aria-expanded="@(i == 0)">
+                        <span class="accordion-icon">
+                            <span class="svg-icon svg-icon-3">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor"></rect>
+                                    <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <h3 class="fs-2 text-gray-800 fw-bold mb-0 ms-4">@prt[0]</h3>
+                    </div>
+
+                    <div id="i@(i)" class="fs-6 mt-1 mb-1 py-0 ps-10 @(i == 0 ? "show" : "collapse")" data-bs-parent="#kt_accordion" style="">
+                        <div class="accordion-body ps-0 pt-0">
+                            <div class="mb-5">
+                                @{
+                                    var o = prt[1..];
+                                }
+                                <h3 class="fs-6 fw-bold mb-1">Changes</h3>
+                                <ul class="my-0 py-0">
+                                    @foreach (var v in o)
+                                    {
+                                        <li class="py-2">
+                                            @v
+                                        </li>
+                                    }
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+</div>
\ No newline at end of file

From 5085befb225a2f317c53080dc2a190283514b989 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Wed, 5 Apr 2023 22:23:14 +0200
Subject: [PATCH 4/6] ftp file maneger

---
 Moonlight/App/Helpers/Files/FtpFileAccess.cs | 184 +++++++++++++++++++
 Moonlight/Moonlight.csproj                   |   1 +
 Moonlight/Shared/Views/Test.razor            |   7 +-
 Moonlight/resources/lang/de_de.lang          |   2 +
 4 files changed, 188 insertions(+), 6 deletions(-)
 create mode 100644 Moonlight/App/Helpers/Files/FtpFileAccess.cs

diff --git a/Moonlight/App/Helpers/Files/FtpFileAccess.cs b/Moonlight/App/Helpers/Files/FtpFileAccess.cs
new file mode 100644
index 00000000..ec3e66c2
--- /dev/null
+++ b/Moonlight/App/Helpers/Files/FtpFileAccess.cs
@@ -0,0 +1,184 @@
+using System.Net;
+using System.Text;
+using FluentFTP;
+
+namespace Moonlight.App.Helpers.Files;
+
+public class FtpFileAccess : FileAccess
+{
+    private string FtpHost, FtpUser, FtpPassword;
+    private int FtpPort;
+
+    private AsyncFtpClient Client;
+    
+    public FtpFileAccess(string ftpHost, int ftpPort, string ftpUser, string ftpPassword)
+    {
+        FtpHost = ftpHost;
+        FtpPort = ftpPort;
+        FtpUser = ftpUser;
+        FtpPassword = ftpPassword;
+
+        Client = new AsyncFtpClient(FtpHost, FtpUser, FtpPassword, FtpPort);
+    }
+
+    private async Task EnsureConnect()
+    {
+        if (!Client.IsConnected)
+            await Client.AutoConnect();
+    }
+    
+    public override async Task<FileData[]> Ls()
+    {
+        await EnsureConnect();
+        
+        var x = new List<FileData>();
+        
+        foreach (FtpListItem item in await Client.GetListing(CurrentPath))
+        {
+            long size = 0;
+            
+            if (item.Type == FtpObjectType.File)
+            {
+                size = await Client.GetFileSize(item.FullName);
+            }
+
+            x.Add(new()
+            {
+                Name = item.Name,
+                Size = size,
+                IsFile = item.Type == FtpObjectType.File,
+            });
+        }
+
+        return x.ToArray();
+    }
+
+    public override Task Cd(string dir)
+    {
+        var x = Path.Combine(CurrentPath, dir).Replace("\\", "/") + "/";
+        x = x.Replace("//", "/");
+        CurrentPath = x;
+
+        return Task.CompletedTask;
+    }
+
+    public override Task Up()
+    {
+        CurrentPath = Path.GetFullPath(Path.Combine(CurrentPath, "..")).Replace("\\", "/").Replace("C:", "");
+        return Task.CompletedTask;
+    }
+
+    public override Task SetDir(string dir)
+    {
+        CurrentPath = dir;
+        return Task.CompletedTask;
+    }
+
+    public override async Task<string> Read(FileData fileData)
+    {
+        await EnsureConnect();
+
+        var s = new MemoryStream();
+        await Client.DownloadStream(s, CurrentPath.TrimEnd('/') + "/" + fileData.Name);
+        var data = s.ToArray();
+        s.Dispose();
+        var str = Encoding.UTF8.GetString(data);
+        return str;
+    }
+
+    public override async Task Write(FileData fileData, string content)
+    {
+        await EnsureConnect();
+
+        var s = new MemoryStream();
+        s.Write(Encoding.UTF8.GetBytes(content));
+        s.Position = 0;
+        await Client.UploadStream(s, CurrentPath.TrimEnd('/') + "/" + fileData.Name, FtpRemoteExists.Overwrite);
+        s.Dispose();
+    }
+
+    public override async Task Upload(string name, Stream dataStream, Action<int>? progressUpdated = null)
+    {
+        await EnsureConnect();
+
+        IProgress<FtpProgress> progress = new Progress<FtpProgress>(x =>
+        {
+            progressUpdated((int) x.Progress);
+        });
+        await Client.UploadStream(dataStream, CurrentPath.TrimEnd('/') + "/" + name, FtpRemoteExists.Overwrite, false, progress);
+        dataStream.Dispose();
+    }
+
+    public override async Task MkDir(string name)
+    {
+        await EnsureConnect();
+
+        await Client.CreateDirectory(CurrentPath.TrimEnd('/') + "/" + name + "/");
+    }
+
+    public override Task<string> Pwd()
+    {
+        return Task.FromResult(CurrentPath);
+    }
+
+    public override async Task<string> DownloadUrl(FileData fileData)
+    {
+        await EnsureConnect();
+
+        throw new NotImplementedException();
+    }
+
+    public override async Task<Stream> DownloadStream(FileData fileData)
+    {
+        await EnsureConnect();
+
+        var s = new MemoryStream();
+        await Client.DownloadStream(s, CurrentPath.TrimEnd('/') + "/" + fileData.Name);
+        return s;
+    }
+
+    public override async Task Delete(FileData fileData)
+    {
+        await EnsureConnect();
+
+        if (fileData.IsFile)
+            await Client.DeleteFile(CurrentPath.TrimEnd('/') + "/" + fileData.Name);
+        else
+            await Client.DeleteDirectory(CurrentPath.TrimEnd('/') + "/" + fileData.Name);
+    }
+
+    public override async Task Move(FileData fileData, string newPath)
+    {
+        await EnsureConnect();
+
+        if (fileData.IsFile)
+            await Client.MoveFile(CurrentPath.TrimEnd('/') + "/" + fileData.Name, newPath);
+        else
+            await Client.MoveDirectory(CurrentPath.TrimEnd('/') + "/" + fileData.Name, newPath);
+    }
+
+    public override async Task Compress(params FileData[] files)
+    {
+        await EnsureConnect();
+
+        throw new NotImplementedException();
+    }
+
+    public override async Task Decompress(FileData fileData)
+    {
+        await EnsureConnect();
+
+        throw new NotImplementedException();
+    }
+
+    public override Task<string> GetLaunchUrl()
+    {
+        return Task.FromResult(
+                    $"ftp://{FtpUser}:{FtpPassword}@{FtpHost}:{FtpPort}/");
+    }
+
+    public override object Clone()
+    {
+        return new FtpFileAccess(FtpHost, FtpPort, FtpUser, FtpPassword);
+    }
+}
\ No newline at end of file
diff --git a/Moonlight/Moonlight.csproj b/Moonlight/Moonlight.csproj
index 9609e642..2c6662f8 100644
--- a/Moonlight/Moonlight.csproj
+++ b/Moonlight/Moonlight.csproj
@@ -20,6 +20,7 @@
     <PackageReference Include="CloudFlare.Client" Version="6.1.4" />
     <PackageReference Include="CurrieTechnologies.Razor.SweetAlert2" Version="5.4.0" />
     <PackageReference Include="Discord.Net" Version="3.9.0" />
+    <PackageReference Include="FluentFTP" Version="46.0.2" />
     <PackageReference Include="GravatarSharp.Core" Version="1.0.1.2" />
     <PackageReference Include="JWT" Version="10.0.2" />
     <PackageReference Include="Logging.Net" Version="1.1.0" />
diff --git a/Moonlight/Shared/Views/Test.razor b/Moonlight/Shared/Views/Test.razor
index eafabd5f..db4a2862 100644
--- a/Moonlight/Shared/Views/Test.razor
+++ b/Moonlight/Shared/Views/Test.razor
@@ -27,12 +27,7 @@
 
     private Task Load(LazyLoader arg)
     {
-        var server = ServerRepository
-            .Get()
-            .Include(x => x.Node)
-            .First();
-
-        FileAccess = new WingsFileAccess(WingsApiHelper, WingsJwtHelper, server, ConfigService, User);
+        FileAccess = new FtpFileAccess("vps01.so.host.endelon.link", 21, "example.com", "61P8JZzfjSNyhtZl");
 
         return Task.CompletedTask;
     }
diff --git a/Moonlight/resources/lang/de_de.lang b/Moonlight/resources/lang/de_de.lang
index 429e88a1..3c60d0df 100644
--- a/Moonlight/resources/lang/de_de.lang
+++ b/Moonlight/resources/lang/de_de.lang
@@ -482,3 +482,5 @@ Node offline;Node offline
 The node the server is running on is currently offline;The node the server is running on is currently offline
 Server not found;Server not found
 A server with that id cannot be found or you have no access for this server;A server with that id cannot be found or you have no access for this server
+Compress;Compress
+Decompress;Decompress

From 35e1f99277054d1aec77f942bccdbacdc581b79d Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Wed, 5 Apr 2023 22:43:35 +0200
Subject: [PATCH 5/6] ordered file list

---
 Moonlight/App/Helpers/Files/FtpFileAccess.cs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Moonlight/App/Helpers/Files/FtpFileAccess.cs b/Moonlight/App/Helpers/Files/FtpFileAccess.cs
index ec3e66c2..0b6a9de4 100644
--- a/Moonlight/App/Helpers/Files/FtpFileAccess.cs
+++ b/Moonlight/App/Helpers/Files/FtpFileAccess.cs
@@ -33,7 +33,7 @@ public class FtpFileAccess : FileAccess
         
         var x = new List<FileData>();
         
-        foreach (FtpListItem item in await Client.GetListing(CurrentPath))
+        foreach (FtpListItem item in (await Client.GetListing(CurrentPath)).OrderBy(x => x.Type + " " + x.Name))
         {
             long size = 0;
             

From dbaaf6a32e13505e129d7083c9737a9813af5030 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Wed, 5 Apr 2023 22:55:56 +0200
Subject: [PATCH 6/6] fixed file manager design

---
 .../Shared/Components/FileManagerPartials/FileManager.razor | 6 +++---
 .../Shared/Components/FileManagerPartials/FileView.razor    | 2 +-
 Moonlight/resources/lang/de_de.lang                         | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Moonlight/Shared/Components/FileManagerPartials/FileManager.razor b/Moonlight/Shared/Components/FileManagerPartials/FileManager.razor
index f1f9eea1..2fe4c06b 100644
--- a/Moonlight/Shared/Components/FileManagerPartials/FileManager.razor
+++ b/Moonlight/Shared/Components/FileManagerPartials/FileManager.razor
@@ -24,7 +24,7 @@
 else
 {
     <div class="card mb-7">
-        <div class="card-header">
+        <div class="card-header border-0 my-2">
             <div class="card-title">
                 <div class="d-flex flex-stack">
                     <FilePath Access="Access" OnPathChanged="OnComponentStateChanged" />
@@ -59,7 +59,7 @@ else
                     else
                     {
                         <button type="button" @onclick="Launch" class="btn btn-light-primary me-3">
-                            <span class="svg-icon svg-icon-muted svg-icon-2hx">
+                            <span class="svg-icon svg-icon-muted svg-icon-2">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path opacity="0.3" d="M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z" fill="currentColor"/>
                                     <path d="M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z" fill="currentColor"/>
@@ -86,7 +86,7 @@ else
         </div>
     </div>
 
-    <div class="card card-body">
+    <div class="card card-body ps-9">
         <FileView @ref="View"
                   Access="Access"
                   ContextActions="Actions"
diff --git a/Moonlight/Shared/Components/FileManagerPartials/FileView.razor b/Moonlight/Shared/Components/FileManagerPartials/FileView.razor
index be3bafd4..dcf0a346 100644
--- a/Moonlight/Shared/Components/FileManagerPartials/FileView.razor
+++ b/Moonlight/Shared/Components/FileManagerPartials/FileView.razor
@@ -97,7 +97,7 @@
                             <td>@(Formatter.FormatSize(file.Size))</td>
                             <td class="text-end">
                                 <div class="d-flex justify-content-end">
-                                    <div class="ms-2 me-7">
+                                    <div class="ms-2 me-6">
                                         @if (ContextActions.Any())
                                         {
                                             <ContextMenuTrigger MenuId="triggerMenu" MouseButtonTrigger="MouseButtonTrigger.Both" Data="file">
diff --git a/Moonlight/resources/lang/de_de.lang b/Moonlight/resources/lang/de_de.lang
index 3c60d0df..d71bd8e3 100644
--- a/Moonlight/resources/lang/de_de.lang
+++ b/Moonlight/resources/lang/de_de.lang
@@ -484,3 +484,6 @@ Server not found;Server not found
 A server with that id cannot be found or you have no access for this server;A server with that id cannot be found or you have no access for this server
 Compress;Compress
 Decompress;Decompress
+Moving;Moving
+Compressing;Compressing
+selected;selected