...

Presentation/HushianWebApp/Pages/FromUserSide/LoginComponent.razor

@@ -1,9 +1,10 @@
 @using HushianWebApp.Service
 @inject AuthService AuthService
-<div class="text-end mb-3">
+<div class="login-form">
-    <span class="badge bg-info p-2">نیاز برای ارتباط با کارشناسان وارد شود</span>
+    <div class="text-center mb-4">
-</div>
+        <span class="badge bg-info p-2 rounded-pill">نیاز برای ارتباط با کارشناسان وارد شود</span>
-<div class=" group w-full">
+    </div>
+    <div class="form-container">
     <Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@visible" />
 
     @if (ID==0)
@@ -29,34 +30,34 @@
             جهت احراز کد ارسال شده را وارد کنید
         </label>
 
-        <div class="d-flex">
+        <div class="d-flex justify-content-center">
 
-            <div  style="width:200px;margin-left:5px;direction: ltr;">
+            <div class="verification-inputs" style="display: flex; gap: 8px; direction: ltr;">
                 <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                        @bind="code1" @oninput="MoveNext"
-                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
+                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                        @ref="input1" autoFocus />
 
                 <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                        @bind="code2" @oninput="MoveNext"
-                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
+                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                        @ref="input2" />
 
                 <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                        @bind="code3" @oninput="MoveNext"
-                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
+                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                        @ref="input3" />
 
                 <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                        @bind="code4" @oninput="OnLastInput"
-                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
+                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                        @ref="input4" />
 
             </div>
    
         </div>
     }
-
+    </div>
 </div>
 
 
@@ -118,3 +119,74 @@
         }
     }
 }
+
+<style>
+    .login-form {
+        width: 100%;
+    }
+
+    .form-container {
+        width: 100%;
+    }
+
+    .form-container label {
+        display: block;
+        margin-bottom: 0.75rem;
+        font-weight: 600;
+        color: #495057;
+    }
+
+    .form-container .d-flex {
+        gap: 0.75rem;
+        align-items: center;
+    }
+
+    .container-input {
+        flex: 1;
+    }
+
+    .container-input input {
+        width: 100%;
+        border: 2px solid #e9ecef;
+        border-radius: 0.5rem;
+        transition: border-color 0.2s ease;
+    }
+
+    .container-input input:focus {
+        border-color: #0d6efd;
+        outline: none;
+        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+    }
+
+    .form-container input[type="text"] {
+        margin: 0 0.25rem;
+        transition: all 0.2s ease;
+    }
+
+    .form-container input[type="text"]:focus {
+        border-color: #0d6efd;
+        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+    }
+
+    .badge {
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    .verification-inputs {
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .verification-inputs input {
+        flex-shrink: 0;
+        transition: all 0.2s ease;
+    }
+
+    .verification-inputs input:focus {
+        border-color: #0d6efd;
+        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+        transform: scale(1.05);
+    }
+</style>

Presentation/HushianWebApp/Pages/FromUserSide/UserCP.razor

@@ -29,12 +29,14 @@
                                     <Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true">
                                         <Icon Name="IconName.Escape" /> اتمام گفتگو
                                     </Button>
-
-
                                 }
                             </span>
                         }
-
+                        <div class="ms-auto">
+                            <Button Color="ButtonColor.Secondary" Size=ButtonSize.Small Outline="true" @onclick="Logout">
+                                <Icon Name="IconName.BoxArrowRight" /> خروج
+                            </Button>
+                        </div>
                     </div>
                     <!-- B1: Chat area -->
                     <div class="flex-fill border p-2 overflow-auto" id="B1" style="height: 300px; overflow-y: auto;">
@@ -109,12 +111,24 @@
             }
             else
             {
-                <LoginComponent OnMultipleOfThree="EventCallback.Factory.Create(this, Afterlogin)" />
+                <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                    <div class="login-container p-4 bg-white rounded shadow-sm" style="max-width: 400px; width: 100%;">
+                        <div class="text-center mb-4">
+                            <h4 class="text-primary mb-2">ورود به سیستم</h4>
+                        </div>
+                        <LoginComponent OnMultipleOfThree="EventCallback.Factory.Create(this, Afterlogin)" />
+                    </div>
+                </div>
             }
         }
         else
         {
-            //صحت سنجی لاگین در حال انجام است
+            <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                <div class="text-center">
+                    <Spinner Type="SpinnerType.Dots" Color="SpinnerColor.Primary" />
+                    <p class="mt-3 text-muted">در حال بررسی وضعیت ...</p>
+                </div>
+            </div>
         }
     </div>
 </div>
@@ -208,6 +222,14 @@
             LastOpenChat = await ChatService.GetLastOpenChatInCompany(CompanyID);
         StateHasChanged();
     }
+    
+    async Task Logout()
+    {
+        await baseController.RemoveToken();
+        await localStorageService.RemoveItem("U/key");
+        IsLogin = false;
+        StateHasChanged();
+    }
 }
 <style>
     .chat-bubble {
@@ -249,4 +271,42 @@
         border-radius: var(--bs-border-radius);
     }
 
+    .login-container {
+        border: 1px solid #e9ecef;
+        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+    }
+
+    .login-container h4 {
+        font-weight: 600;
+        color: #495057;
+    }
+
+    .login-container p {
+        font-size: 0.875rem;
+        line-height: 1.4;
+    }
+
+    /* Improve spacing in the main container */
+    .container-fluid {
+        padding: 1rem;
+    }
+
+    /* Better spacing for chat area */
+    #B1 {
+        margin-bottom: 1rem;
+    }
+
+    /* Improved input group styling */
+    .input-group {
+        margin-bottom: 1rem;
+        border-radius: 0.5rem;
+        overflow: hidden;
+    }
+
+    /* Better message input styling */
+    #B2 {
+        border-radius: 0.5rem;
+        background-color: #f8f9fa;
+    }
+
 </style>