<div id="mediq-login-page" dir="rtl">
<style>
/* ============================================================
MEDIQ LOGIN PAGE
Confluence Server / Data Center
Page ID: 174855060
BACKGROUND:
Modern Hospital Room with Medical Bed.png
LOGO:
MediQ Heart Medical Logo.png
============================================================ */
#mediq-login-page,
#mediq-login-page * {
box-sizing: border-box;
}
#mediq-login-page {
--mq-navy: #082b4b;
--mq-text: #173b59;
--mq-muted: #7089a0;
--mq-primary: #08b8b0;
--mq-primary-dark: #05a49e;
--mq-border: rgba(175, 202, 218, .60);
position: relative;
width: 100%;
min-height: 760px;
overflow: hidden;
direction: rtl;
font-family:
Tahoma,
Arial,
sans-serif;
color: var(--mq-text);
background:
url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png")
center center / cover
no-repeat;
}
/* ============================================================
LEFT LIGHT OVERLAY
============================================================ */
#mediq-login-page::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.94) 17%,
rgba(255,255,255,.70) 31%,
rgba(255,255,255,.22) 44%,
rgba(255,255,255,0) 58%
);
}
/* ============================================================
MAIN LAYOUT
============================================================ */
.mq-layout {
position: relative;
z-index: 5;
width: 100%;
min-height: 760px;
padding:
54px
clamp(50px, 7vw, 120px);
display: grid;
grid-template-columns:
minmax(520px, 620px)
minmax(80px, 1fr)
minmax(410px, 465px);
align-items: center;
gap: 20px;
direction: ltr;
}
/* ============================================================
LEFT CONTENT
============================================================ */
.mq-intro {
grid-column: 1;
width: 100%;
max-width: 620px;
direction: rtl;
text-align: right;
align-self: center;
}
/* ============================================================
MAIN LOGO
وسط چین
============================================================ */
.mq-main-logo-wrap {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.mq-main-logo {
display: block;
width: 330px;
max-width: 76%;
height: auto;
object-fit: contain;
object-position: center center;
}
/* ============================================================
SHORT LINE
============================================================ */
.mq-accent-line {
width: 62px;
height: 4px;
margin:
0
0
31px
auto;
border-radius: 10px;
background:
linear-gradient(
90deg,
#0ccbc0,
#049f9c
);
}
/* ============================================================
TITLE
یک خط + راست چین + Bold
============================================================ */
.mq-title {
margin: 0;
width: 100%;
color: var(--mq-navy);
direction: rtl;
text-align: right;
font-size: 38px;
line-height: 1.55;
font-weight: 900;
letter-spacing: -1px;
white-space: nowrap;
}
/* ============================================================
DESCRIPTION
یک خط + راست چین + Bold
============================================================ */
.mq-description {
width: 100%;
margin-top: 15px;
color: #58758f;
direction: rtl;
text-align: right;
font-size: 16px;
font-weight: 700;
line-height: 2;
white-space: nowrap;
}
/* ============================================================
FEATURE CARDS
============================================================ */
.mq-features {
width: 100%;
margin-top: 36px;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 12px;
direction: rtl;
}
.mq-feature {
min-height: 128px;
padding:
15px
8px
13px;
border:
1px solid
rgba(202, 224, 235, .78);
border-radius: 15px;
background:
rgba(255,255,255,.72);
box-shadow:
0 9px 30px
rgba(26, 82, 105, .045);
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.mq-feature-icon {
width: 45px;
height: 45px;
margin-bottom: 10px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.mq-feature-icon svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* CARD 1 */
.mq-feature:nth-child(1)
.mq-feature-icon {
color: #0ab3aa;
background:
linear-gradient(
145deg,
#e0fbf8,
#c8f4f0
);
}
/* CARD 2 */
.mq-feature:nth-child(2)
.mq-feature-icon {
color: #3d92e5;
background:
linear-gradient(
145deg,
#eaf5ff,
#dcecff
);
}
/* CARD 3 */
.mq-feature:nth-child(3)
.mq-feature-icon {
color: #05ad94;
background:
linear-gradient(
145deg,
#e2faf5,
#d1f6ee
);
}
/* CARD 4 */
.mq-feature:nth-child(4)
.mq-feature-icon {
color: #6689b6;
background:
linear-gradient(
145deg,
#edf3fa,
#e2ebf7
);
}
.mq-feature-title {
color: #133956;
direction: rtl;
font-size: 13px;
font-weight: 800;
line-height: 1.8;
text-align: center;
}
/* ============================================================
LOGIN CARD
============================================================ */
.mq-login-card {
grid-column: 3;
width: 100%;
min-height: 610px;
padding:
42px
38px
30px;
direction: rtl;
border:
1px solid
rgba(255,255,255,.88);
border-radius: 28px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.88),
rgba(238,249,252,.79)
);
box-shadow:
0 30px 85px
rgba(17, 68, 90, .18);
backdrop-filter:
blur(25px);
-webkit-backdrop-filter:
blur(25px);
}
/* ============================================================
LOGIN LOGO
============================================================ */
.mq-login-logo-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mq-login-logo {
display: block;
width: 245px;
max-width: 78%;
height: auto;
object-fit: contain;
}
/* ============================================================
WELCOME
وسط چین + Bold
============================================================ */
.mq-welcome {
width: 100%;
margin-top: 32px;
color: var(--mq-navy);
direction: rtl;
text-align: center;
font-size: 23px;
font-weight: 900;
line-height: 1.8;
}
.mq-welcome-description {
width: 100%;
margin-top: 5px;
color: #718aa0;
direction: rtl;
text-align: center;
font-size: 13px;
font-weight: 600;
line-height: 1.9;
}
/* ============================================================
FORM
============================================================ */
.mq-form {
width: 100%;
margin-top: 27px;
direction: rtl;
}
/* ============================================================
FIELD
============================================================ */
.mq-field {
position: relative;
width: 100%;
margin-bottom: 14px;
}
.mq-input {
display: block;
width: 100%;
height: 58px;
padding:
0
49px
0
52px;
border:
1px solid
rgba(171, 198, 215, .67);
border-radius: 13px;
outline: none;
background:
rgba(255,255,255,.76);
color: #173b59;
direction: rtl;
text-align: right;
font-family:
Tahoma,
Arial,
sans-serif;
font-size: 14px;
font-weight: 600;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.mq-input::placeholder {
color: #70889f;
opacity: 1;
direction: rtl;
text-align: right;
font-size: 14px;
font-weight: 600;
}
.mq-input:focus {
background:
rgba(255,255,255,.96);
border-color:
var(--mq-primary);
box-shadow:
0 0 0 3px
rgba(8,184,176,.10);
}
/* ============================================================
RIGHT FIELD ICON
============================================================ */
.mq-field-icon {
position: absolute;
right: 17px;
top: 50%;
transform:
translateY(-50%);
width: 21px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
color: #66829c;
pointer-events: none;
}
.mq-field-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
PASSWORD EYE
============================================================ */
.mq-password-toggle {
position: absolute;
left: 12px;
top: 50%;
transform:
translateY(-50%);
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 9px;
outline: none;
background: transparent;
color: #66829c;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
background .15s ease,
color .15s ease;
}
.mq-password-toggle:hover {
background:
rgba(8,184,176,.08);
color:
var(--mq-primary-dark);
}
.mq-password-toggle svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
REMEMBER
============================================================ */
.mq-options {
width: 100%;
margin:
13px
0
19px;
display: flex;
align-items: center;
justify-content: flex-start;
direction: rtl;
}
.mq-remember {
display: inline-flex;
align-items: center;
gap: 8px;
color: #59748b;
direction: rtl;
font-size: 13px;
font-weight: 700;
cursor: pointer;
user-select: none;
}
.mq-remember input {
width: 17px;
height: 17px;
margin: 0;
accent-color:
var(--mq-primary);
}
/* ============================================================
SUBMIT
============================================================ */
.mq-submit {
width: 100%;
height: 60px;
border: 0;
border-radius: 13px;
outline: none;
background:
linear-gradient(
90deg,
#05aaa5,
#0bc2b8
);
color: #fff;
font-family:
Tahoma,
Arial,
sans-serif;
font-size: 17px;
font-weight: 800;
cursor: pointer;
box-shadow:
0 13px 28px
rgba(3, 166, 160, .20);
transition:
transform .17s ease,
box-shadow .17s ease,
filter .17s ease;
}
.mq-submit:hover {
transform:
translateY(-2px);
box-shadow:
0 18px 35px
rgba(3,166,160,.27);
filter:
brightness(1.015);
}
.mq-submit:active {
transform:
translateY(0);
}
/* ============================================================
ERROR
============================================================ */
.mq-error {
display: none;
width: 100%;
margin-top: 12px;
padding:
10px
12px;
border:
1px solid
#fecdd3;
border-radius: 9px;
background:
#fff1f2;
color:
#be123c;
direction: rtl;
text-align: right;
font-size: 11px;
font-weight: 600;
line-height: 1.8;
}
/* ============================================================
DIVIDER
============================================================ */
.mq-divider {
width: 100%;
height: 1px;
margin:
29px
0
22px;
background:
linear-gradient(
90deg,
transparent,
rgba(131,160,179,.35),
transparent
);
}
/* ============================================================
SUPPORT
============================================================ */
.mq-support {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
direction: rtl;
color: #6f879c;
text-align: center;
font-size: 12px;
font-weight: 600;
line-height: 1.9;
}
.mq-support-icon {
flex: 0 0 auto;
width: 19px;
height: 19px;
color: #163d5d;
}
.mq-support-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
LOADING
============================================================ */
.mq-loader {
display: none;
width: 21px;
height: 21px;
margin: auto;
border:
3px solid
rgba(255,255,255,.38);
border-top-color:
#fff;
border-radius: 50%;
animation:
mq-spin
.7s
linear
infinite;
}
.mq-submit.loading {
pointer-events: none;
opacity: .88;
}
.mq-submit.loading
.mq-submit-text {
display: none;
}
.mq-submit.loading
.mq-loader {
display: block;
}
@keyframes mq-spin {
to {
transform:
rotate(360deg);
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
.mq-layout {
grid-template-columns:
minmax(430px, 1fr)
30px
400px;
padding:
45px
35px;
}
.mq-title {
font-size: 32px;
}
.mq-description {
font-size: 14px;
}
.mq-main-logo {
width: 290px;
}
.mq-features {
grid-template-columns:
repeat(2, 1fr);
}
}
@media (max-width: 900px) {
#mediq-login-page {
overflow: visible;
background-position:
65%
center;
}
.mq-layout {
display: flex;
flex-direction: column;
min-height: auto;
padding:
35px
20px;
gap: 35px;
}
.mq-login-card {
order: 1;
width:
min(100%, 470px);
min-height: auto;
}
.mq-intro {
order: 2;
width:
min(100%, 620px);
}
.mq-title {
white-space: normal;
}
.mq-description {
white-space: normal;
}
}
@media (max-width: 520px) {
.mq-layout {
padding:
22px
12px
40px;
}
.mq-login-card {
padding:
32px
22px
27px;
border-radius:
22px;
}
.mq-login-logo {
width:
210px;
}
.mq-main-logo {
width:
265px;
}
.mq-title {
font-size:
29px;
white-space: normal;
}
.mq-description {
font-size:
13px;
white-space: normal;
}
.mq-features {
grid-template-columns:
repeat(2, 1fr);
}
}
/* ============================================================
MEDIQ - FINAL FULL SCREEN FIX
Confluence Server / Data Center
============================================================ */
/* ------------------------------------------------------------
1. حذف کامل Footer کانفلوئنس
------------------------------------------------------------ */
#footer,
footer#footer,
footer.aui-footer,
.aui-footer,
#footer-logo,
#poweredby,
#footer-build-information,
.footer-body,
.footer-logo,
#footer .footer-body,
#footer .footer-logo {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ------------------------------------------------------------
2. حذف فضای خالی خود Confluence
------------------------------------------------------------ */
html,
body {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
#page,
#full-height-container,
#main,
#content,
#main-content,
.aui-page-panel,
.aui-page-panel-inner,
.aui-page-panel-content,
.content-body {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* ------------------------------------------------------------
3. خود صفحه MediQ تمام Viewport
------------------------------------------------------------ */
#mediq-login-page {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
min-width: 100vw !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
z-index: 9999 !important;
background-size: cover !important;
background-position: center center !important;
}
/* ------------------------------------------------------------
4. Layout داخلی دقیقاً هماندازه صفحه
------------------------------------------------------------ */
#mediq-login-page .mq-layout {
width: 100% !important;
height: 100vh !important;
min-height: 0 !important;
margin: 0 !important;
padding:
clamp(25px, 4vh, 55px)
clamp(45px, 7vw, 120px) !important;
align-items: center !important;
}
/* ------------------------------------------------------------
5. پنل Login متناسب با ارتفاع صفحه
------------------------------------------------------------ */
#mediq-login-page .mq-login-card {
align-self: center !important;
min-height: 0 !important;
max-height: calc(100vh - 70px) !important;
}
/* ------------------------------------------------------------
6. بخش سمت چپ دقیقاً وسط ارتفاع صفحه
------------------------------------------------------------ */
#mediq-login-page .mq-intro {
align-self: center !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ------------------------------------------------------------
7. جلوگیری از Scroll اضافی Confluence
------------------------------------------------------------ */
body {
position: relative !important;
overflow: hidden !important;
}
/* ------------------------------------------------------------
8. جلوگیری از فضای خالی پایین صفحه
------------------------------------------------------------ */
#content,
#main-content,
.aui-page-panel-content {
min-height: 0 !important;
}
/* ------------------------------------------------------------
9. تنظیم برای مانیتورهای با ارتفاع کمتر
مثل Laptop در Zoom 100%
------------------------------------------------------------ */
@media (max-height: 850px) {
#mediq-login-page .mq-layout {
padding:
20px
clamp(45px, 7vw, 110px) !important;
}
#mediq-login-page .mq-main-logo {
width: 285px !important;
}
#mediq-login-page .mq-main-logo-wrap {
margin-bottom: 20px !important;
}
#mediq-login-page .mq-accent-line {
margin-bottom: 20px !important;
}
#mediq-login-page .mq-title {
font-size: 32px !important;
}
#mediq-login-page .mq-description {
margin-top: 9px !important;
font-size: 14px !important;
}
#mediq-login-page .mq-features {
margin-top: 24px !important;
}
#mediq-login-page .mq-feature {
min-height: 105px !important;
padding: 10px 7px !important;
}
#mediq-login-page .mq-feature-icon {
width: 40px !important;
height: 40px !important;
margin-bottom: 6px !important;
}
#mediq-login-page .mq-login-card {
min-height: 0 !important;
padding:
28px
34px
24px !important;
}
#mediq-login-page .mq-login-logo {
width: 210px !important;
}
#mediq-login-page .mq-welcome {
margin-top: 20px !important;
font-size: 20px !important;
}
#mediq-login-page .mq-form {
margin-top: 18px !important;
}
#mediq-login-page .mq-input {
height: 52px !important;
}
#mediq-login-page .mq-submit {
height: 54px !important;
}
#mediq-login-page .mq-divider {
margin:
20px
0
16px !important;
}
}
/* ------------------------------------------------------------
10. مانیتورهای خیلی کوتاه
------------------------------------------------------------ */
@media (max-height: 700px) {
#mediq-login-page .mq-layout {
transform: scale(.92);
transform-origin: center center;
width: 108.695% !important;
height: 108.695vh !important;
margin-left: -4.347% !important;
}
}
</style>
<div class="mq-layout">
<!-- ======================================================
LEFT CONTENT
====================================================== -->
<section class="mq-intro">
<!-- REAL MEDIQ LOGO -->
<div class="mq-main-logo-wrap">
<img
class="mq-main-logo"
src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"
alt="MediQ"
>
</div>
<div class="mq-accent-line"></div>
<!-- TITLE -->
<h1 class="mq-title">
مدیریت هوشمند تجهیزات پزشکی
</h1>
<!-- DESCRIPTION -->
<div class="mq-description">
ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی در یک پلتفرم یکپارچه
</div>
<!-- ==================================================
FEATURES
================================================== -->
<div class="mq-features">
<!-- ACCURATE INFORMATION -->
<div class="mq-feature">
<div class="mq-feature-icon">
<svg viewBox="0 0 24 24">
<path
d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3z"
></path>
<path
d="M9 12l2 2 4-5"
></path>
</svg>
</div>
<div class="mq-feature-title">
اطلاعات دقیق
<br>
و بهروز
</div>
</div>
<!-- MAINTENANCE -->
<div class="mq-feature">
<div class="mq-feature-icon">
<svg viewBox="0 0 24 24">
<circle
cx="12"
cy="12"
r="3"
></circle>
<path
d="
M19.4 15
a1.7 1.7 0 0 0 .3 1.9
l.1.1
-2.1 2.1
-.1-.1
a1.7 1.7 0 0 0-1.9-.3
1.7 1.7 0 0 0-1 1.5
V20
h-3
v-.2
a1.7 1.7 0 0 0-1-1.5
1.7 1.7 0 0 0-1.9.3
l-.1.1
-2.1-2.1
.1-.1
A1.7 1.7 0 0 0 7 14.6
a1.7 1.7 0 0 0-1.5-1
H5
v-3
h.5
A1.7 1.7 0 0 0 7 9.6
a1.7 1.7 0 0 0-.3-1.9
l-.1-.1
2.1-2.1
.1.1
a1.7 1.7 0 0 0 1.9.3
1.7 1.7 0 0 0 1-1.5
V4
h3
v.4
a1.7 1.7 0 0 0 1 1.5
1.7 1.7 0 0 0 1.9-.3
l.1-.1
2.1 2.1
-.1.1
a1.7 1.7 0 0 0-.3 1.9
1.7 1.7 0 0 0 1.5 1
h.5
v3
h-.5
a1.7 1.7 0 0 0-1.5 1z
"
></path>
</svg>
</div>
<div class="mq-feature-title">
نگهداری و تعمیرات
<br>
کارآمد
</div>
</div>
<!-- REPORT -->
<div class="mq-feature">
<div class="mq-feature-icon">
<svg viewBox="0 0 24 24">
<path
d="M5 20V11"
></path>
<path
d="M10 20V6"
></path>
<path
d="M15 20V9"
></path>
<path
d="M20 20V3"
></path>
</svg>
</div>
<div class="mq-feature-title">
گزارشهای
<br>
تحلیلی
</div>
</div>
<!-- ASSETS -->
<div class="mq-feature">
<div class="mq-feature-icon">
<svg viewBox="0 0 24 24">
<path
d="M12 3l7 4-7 4-7-4 7-4z"
></path>
<path
d="M5 7v9l7 4 7-4V7"
></path>
<path
d="M12 11v9"
></path>
</svg>
</div>
<div class="mq-feature-title">
مدیریت کامل
<br>
داراییها
</div>
</div>
</div>
</section>
<!-- ======================================================
LOGIN CARD
====================================================== -->
<section class="mq-login-card">
<!-- REAL LOGO -->
<div class="mq-login-logo-wrap">
<img
class="mq-login-logo"
src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"
alt="MediQ"
>
</div>
<!-- WELCOME -->
<div class="mq-welcome">
به پلتفرم مدیکیو خوش آمدید
</div>
<div class="mq-welcome-description">
برای ادامه، وارد حساب کاربری خود شوید.
</div>
<!-- ==================================================
LOGIN FORM
================================================== -->
<form
id="mqLoginForm"
class="mq-form"
method="post"
action="/dologin.action"
>
<!-- USERNAME -->
<div class="mq-field">
<input
id="mqUsername"
class="mq-input"
type="text"
name="os_username"
placeholder="نام کاربری"
autocomplete="username"
required
>
<span class="mq-field-icon">
<svg viewBox="0 0 24 24">
<circle
cx="12"
cy="8"
r="4"
></circle>
<path
d="M5 20c0-4 3-7 7-7s7 3 7 7"
></path>
</svg>
</span>
</div>
<!-- PASSWORD -->
<div class="mq-field">
<input
id="mqPassword"
class="mq-input"
type="password"
name="os_password"
placeholder="رمز عبور"
autocomplete="current-password"
required
>
<!-- LOCK -->
<span class="mq-field-icon">
<svg viewBox="0 0 24 24">
<rect
x="5"
y="10"
width="14"
height="10"
rx="2"
></rect>
<path
d="M8 10V7a4 4 0 0 1 8 0v3"
></path>
<path
d="M12 14v2"
></path>
</svg>
</span>
<!-- EYE -->
<button
id="mqPasswordToggle"
class="mq-password-toggle"
type="button"
title="نمایش رمز عبور"
aria-label="نمایش رمز عبور"
>
<svg
id="mqEyeIcon"
viewBox="0 0 24 24"
>
<path
d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"
></path>
<circle
cx="12"
cy="12"
r="3"
></circle>
</svg>
</button>
</div>
<!-- REMEMBER -->
<div class="mq-options">
<label class="mq-remember">
<input
type="checkbox"
name="os_cookie"
value="true"
>
<span>
مرا به خاطر بسپار
</span>
</label>
</div>
<!-- DESTINATION -->
<input
id="mqDestination"
type="hidden"
name="os_destination"
value="/"
>
<!-- LOGIN -->
<button
id="mqSubmit"
class="mq-submit"
type="submit"
>
<span class="mq-submit-text">
ورود
</span>
<span class="mq-loader"></span>
</button>
<!-- ERROR -->
<div
id="mqError"
class="mq-error"
></div>
</form>
<!-- DIVIDER -->
<div class="mq-divider"></div>
<!-- SUPPORT -->
<div class="mq-support">
<span>
در صورت مشکل در ورود، با واحد فناوری اطلاعات تماس بگیرید.
</span>
<span class="mq-support-icon">
<svg viewBox="0 0 24 24">
<path
d="M4 13v-2a8 8 0 0 1 16 0v2"
></path>
<path
d="M4 13H3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v-6z"
></path>
<path
d="M20 13h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v-6z"
></path>
<path
d="M19 19c0 2-2 2-4 2"
></path>
</svg>
</span>
</div>
</section>
</div>
<script>
(function () {
"use strict";
/* ========================================================
MEDIQ CONFIG
======================================================== */
var CFG = {
/*
* مقصد بعد از Login موفق
*
* فعلاً چون Dashboard ساخته نشده،
* کاربر به همین صفحه MediQ برمیگردد.
*
* بعداً فقط Page ID داشبورد را اینجا عوض میکنیم.
*/
destination:
"/pages/viewpage.action?pageId=174855144",
/*
* Login واقعی Confluence
*/
loginAction:
"/dologin.action"
};
/* ========================================================
ELEMENTS
======================================================== */
var form =
document.getElementById(
"mqLoginForm"
);
var username =
document.getElementById(
"mqUsername"
);
var password =
document.getElementById(
"mqPassword"
);
var passwordToggle =
document.getElementById(
"mqPasswordToggle"
);
var eyeIcon =
document.getElementById(
"mqEyeIcon"
);
var submit =
document.getElementById(
"mqSubmit"
);
var destination =
document.getElementById(
"mqDestination"
);
var error =
document.getElementById(
"mqError"
);
/* ========================================================
APPLY CONFIG
======================================================== */
if (form) {
form.action =
CFG.loginAction;
form.method =
"post";
form.setAttribute(
"autocomplete",
"on"
);
}
if (destination) {
destination.value =
CFG.destination;
}
/* ========================================================
ERROR MESSAGE
======================================================== */
function showError(message) {
if (!error) {
return;
}
error.innerHTML =
message;
error.style.display =
"block";
}
function hideError() {
if (!error) {
return;
}
error.innerHTML =
"";
error.style.display =
"none";
}
/* ========================================================
SHOW / HIDE PASSWORD
======================================================== */
if (
password &&
passwordToggle
) {
passwordToggle.addEventListener(
"click",
function () {
var showPassword =
password.type ===
"password";
password.type =
showPassword
? "text"
: "password";
if (showPassword) {
passwordToggle.title =
"مخفی کردن رمز عبور";
passwordToggle.setAttribute(
"aria-label",
"مخفی کردن رمز عبور"
);
if (eyeIcon) {
eyeIcon.innerHTML =
'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"></path>' +
'<circle cx="12" cy="12" r="3"></circle>' +
'<path d="M4 4l16 16"></path>';
}
}
else {
passwordToggle.title =
"نمایش رمز عبور";
passwordToggle.setAttribute(
"aria-label",
"نمایش رمز عبور"
);
if (eyeIcon) {
eyeIcon.innerHTML =
'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"></path>' +
'<circle cx="12" cy="12" r="3"></circle>';
}
}
}
);
}
/* ========================================================
REMOVE ERROR WHEN USER TYPES
======================================================== */
if (username) {
username.addEventListener(
"input",
function () {
hideError();
}
);
}
if (password) {
password.addEventListener(
"input",
function () {
hideError();
}
);
}
/* ========================================================
LOGIN VALIDATION
======================================================== */
if (form) {
form.addEventListener(
"submit",
function (event) {
var userValue =
username
? username.value.trim()
: "";
var passwordValue =
password
? password.value
: "";
/* --------------------------------------------
USERNAME EMPTY
-------------------------------------------- */
if (!userValue) {
event.preventDefault();
showError(
"لطفاً نام کاربری را وارد کنید."
);
if (username) {
username.focus();
}
return false;
}
/* --------------------------------------------
PASSWORD EMPTY
-------------------------------------------- */
if (!passwordValue) {
event.preventDefault();
showError(
"لطفاً رمز عبور را وارد کنید."
);
if (password) {
password.focus();
}
return false;
}
/* --------------------------------------------
VALID
-------------------------------------------- */
hideError();
/*
* Username / Password را خود Confluence
* از طریق POST دریافت میکند.
*
* Password در LocalStorage،
* SessionStorage یا Cookie سفارشی
* ذخیره نمیشود.
*/
if (submit) {
submit.classList.add(
"loading"
);
submit.disabled =
true;
submit.setAttribute(
"aria-busy",
"true"
);
}
/*
* اینجا preventDefault نداریم.
*
* بنابراین فرم به:
*
* /dologin.action
*
* ارسال میشود.
*/
return true;
}
);
}
/* ========================================================
RESTORE BUTTON
اگر Browser با Back به صفحه برگشت
======================================================== */
window.addEventListener(
"pageshow",
function () {
if (submit) {
submit.classList.remove(
"loading"
);
submit.disabled =
false;
submit.removeAttribute(
"aria-busy"
);
}
}
);
/* ========================================================
INITIAL FOCUS
======================================================== */
window.setTimeout(
function () {
if (
username &&
!username.value
) {
username.focus();
}
},
300
);
})();
</script>
</div>
|