...
This commit is contained in:
@@ -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>
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user