This commit is contained in:
mmrbnjd
2025-07-31 00:18:09 +03:30
parent 96d6f5c004
commit 39d2200ad9
2 changed files with 149 additions and 17 deletions

View File

@@ -1,9 +1,10 @@
@using HushianWebApp.Service
@inject AuthService AuthService
<div class="text-end mb-3">
<span class="badge bg-info p-2">نیاز برای ارتباط با کارشناسان وارد شود</span>
</div>
<div class=" group w-full">
<div class="login-form">
<div class="text-center mb-4">
<span class="badge bg-info p-2 rounded-pill">نیاز برای ارتباط با کارشناسان وارد شود</span>
</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>
@@ -117,4 +118,75 @@
await ver();
}
}
}
}
<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>

View File

@@ -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>