mmr/Hushian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

96
Presentation/HushianWebApp/Pages/FromUserSide/LoginComponent.razor
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>