Edit login and registration details
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
@@ -55,6 +55,8 @@ defineProps<{
|
||||
| 'grid'
|
||||
| 'list'
|
||||
| 'eye'
|
||||
| 'eye-off'
|
||||
| 'lock'
|
||||
| 'truck'
|
||||
| 'grip'
|
||||
| 'apps-plus'
|
||||
@@ -339,6 +341,15 @@ defineProps<{
|
||||
<path d="M2.5 12S6.5 5.5 12 5.5 21.5 12 21.5 12 17.5 18.5 12 18.5 2.5 12 2.5 12Z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</template>
|
||||
<template v-else-if="name === 'eye-off'">
|
||||
<path d="M2.5 12S6.5 5.5 12 5.5 21.5 12 21.5 12 17.5 18.5 12 18.5 2.5 12 2.5 12Z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M4 20 20 4" />
|
||||
</template>
|
||||
<template v-else-if="name === 'lock'">
|
||||
<rect x="5" y="11" width="14" height="10" rx="2" />
|
||||
<path d="M8 11V8a4 4 0 0 1 8 0v3" />
|
||||
</template>
|
||||
<template v-else-if="name === 'truck'">
|
||||
<path d="M3 7.5h11V16H3z" />
|
||||
<path d="M14 10h4.2l2.3 3.2V16H14z" />
|
||||
|
||||
@@ -10,44 +10,37 @@ withDefaults(
|
||||
}>(),
|
||||
{
|
||||
headline: 'همه ارتباطات، یکجا مدیریت میشوند',
|
||||
description: `با ${brand.nameFa} فروش، پشتیبانی و ارتباط با مشتری را در یک پنل یکپارچه مدیریت کنید و رشد پایدار بسازید.`,
|
||||
description: `${brand.nameFa} به شما کمک می کند فروش بیشتر داشته باشید،\nمشتریان را بهتر بشناسید و کسب و کارتان را رشد دهید.`,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="brand-panel" aria-hidden="false">
|
||||
<div class="brand-head">
|
||||
<MentoLogo :size="44" :show-text="false" />
|
||||
<div class="brand-copy">
|
||||
<BrandName />
|
||||
<span>{{ brand.taglineFa }}</span>
|
||||
<div class="brand-main">
|
||||
<div class="brand-head">
|
||||
<MentoLogo :size="70" :show-text="false" />
|
||||
<div class="brand-copy">
|
||||
<BrandName />
|
||||
<span class="tagline">{{ brand.taglineFa }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brand-body">
|
||||
<h2>{{ headline }}</h2>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="illustration" aria-hidden="true">
|
||||
<img src="/brand/lagin_pic.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brand-body">
|
||||
<h2>{{ headline }}</h2>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="illustration" aria-hidden="true">
|
||||
<div class="dash">
|
||||
<div class="dash-top">
|
||||
<span class="avatar" />
|
||||
<span class="bar short" />
|
||||
<span class="bar" />
|
||||
</div>
|
||||
<div class="chart-line" />
|
||||
<div class="chart-bars">
|
||||
<i /><i /><i /><i /><i />
|
||||
</div>
|
||||
</div>
|
||||
<span class="float chat" />
|
||||
<span class="float people" />
|
||||
<span class="float check" />
|
||||
<span class="float ring" />
|
||||
<span class="plant" />
|
||||
</div>
|
||||
<nav class="brand-foot">
|
||||
<a href="#">شرایط و قوانین</a>
|
||||
<span>|</span>
|
||||
<a href="#">تماس با ما</a>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -56,184 +49,110 @@ withDefaults(
|
||||
position: relative;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: clamp(1.4rem, 3vw, 2rem);
|
||||
background:
|
||||
radial-gradient(circle at 20% 10%, rgba(45, 212, 191, 0.18), transparent 42%),
|
||||
linear-gradient(165deg, #f0fdfa 0%, #e6fffa 48%, #f8fafc 100%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 0;
|
||||
padding: 2.6rem clamp(1.4rem, 3vw, 2.4rem);
|
||||
background-color: #f5fbfb;
|
||||
background-image:
|
||||
radial-gradient(ellipse 72% 48% at 50% 58%, rgba(45, 212, 191, 0.14), transparent 70%),
|
||||
radial-gradient(circle at 12% 10%, rgba(20, 184, 166, 0.08), transparent 28%),
|
||||
radial-gradient(rgba(13, 148, 136, 0.16) 1.05px, transparent 1.2px);
|
||||
background-size: auto, auto, 20px 20px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.brand-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.brand-copy strong {
|
||||
font-size: 1.2rem;
|
||||
.brand-copy :deep(.brand-name) {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.brand-copy span {
|
||||
font-size: 0.78rem;
|
||||
.brand-copy .tagline {
|
||||
font-size: 0.88rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.brand-body {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.brand-body h2 {
|
||||
margin: 0 0 0.55rem;
|
||||
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
|
||||
margin: 0 0 0.6rem;
|
||||
font-size: clamp(1.22rem, 1.95vw, 1.52rem);
|
||||
line-height: 1.45;
|
||||
color: #0f172a;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-body p {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
color: #64748b;
|
||||
line-height: 1.75;
|
||||
font-size: 0.95rem;
|
||||
max-width: 28ch;
|
||||
line-height: 1.7;
|
||||
font-size: 1.08rem;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
min-height: 220px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.dash {
|
||||
.illustration img {
|
||||
width: min(100%, 460px);
|
||||
height: auto;
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-foot {
|
||||
position: absolute;
|
||||
inset-inline-start: 12%;
|
||||
bottom: 18%;
|
||||
width: min(78%, 280px);
|
||||
aspect-ratio: 1.35;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.dash-top {
|
||||
inset-inline: 0;
|
||||
bottom: 1.15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(145deg, #5eead4, #0d9488);
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #e2e8f0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bar.short {
|
||||
flex: 0.55;
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
height: 54px;
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
linear-gradient(180deg, transparent 55%, rgba(13, 148, 136, 0.12) 55%),
|
||||
radial-gradient(circle at 20% 60%, #14b8a6 3px, transparent 4px),
|
||||
radial-gradient(circle at 45% 35%, #14b8a6 3px, transparent 4px),
|
||||
radial-gradient(circle at 70% 50%, #14b8a6 3px, transparent 4px),
|
||||
radial-gradient(circle at 88% 28%, #14b8a6 3px, transparent 4px);
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
height: 48px;
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.chart-bars i {
|
||||
flex: 1;
|
||||
border-radius: 6px 6px 2px 2px;
|
||||
background: linear-gradient(180deg, #5eead4, #0f766e);
|
||||
opacity: 0.85;
|
||||
.brand-foot a {
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chart-bars i:nth-child(1) { height: 45%; }
|
||||
.chart-bars i:nth-child(2) { height: 70%; }
|
||||
.chart-bars i:nth-child(3) { height: 55%; }
|
||||
.chart-bars i:nth-child(4) { height: 88%; }
|
||||
.chart-bars i:nth-child(5) { height: 62%; }
|
||||
|
||||
.float {
|
||||
position: absolute;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.float.chat {
|
||||
top: 18%;
|
||||
inset-inline-end: 8%;
|
||||
background:
|
||||
radial-gradient(circle at 35% 40%, #0d9488 0 28%, transparent 29%),
|
||||
linear-gradient(145deg, #ecfdf5, #fff);
|
||||
}
|
||||
|
||||
.float.people {
|
||||
top: 42%;
|
||||
inset-inline-start: 4%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 38%, #14b8a6 0 22%, transparent 23%),
|
||||
linear-gradient(145deg, #f0fdfa, #fff);
|
||||
}
|
||||
|
||||
.float.check {
|
||||
bottom: 28%;
|
||||
inset-inline-end: 6%;
|
||||
background:
|
||||
linear-gradient(135deg, transparent 42%, #10b981 42% 58%, transparent 58%),
|
||||
linear-gradient(45deg, transparent 48%, #10b981 48% 62%, transparent 62%),
|
||||
#ecfdf5;
|
||||
}
|
||||
|
||||
.float.ring {
|
||||
top: 8%;
|
||||
inset-inline-start: 18%;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
conic-gradient(#0d9488 0 70%, #e2e8f0 70% 100%);
|
||||
mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
inset-inline-start: 8%;
|
||||
width: 28px;
|
||||
height: 36px;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 20%, #34d399 0 35%, transparent 36%),
|
||||
linear-gradient(180deg, #0d9488 0 55%, #134e4a 55%);
|
||||
border-radius: 40% 40% 8px 8px;
|
||||
opacity: 0.9;
|
||||
.brand-foot a:hover {
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
|
||||
@@ -96,7 +96,7 @@ const model = defineModel<string | number>({ default: '' });
|
||||
}
|
||||
|
||||
.ui-input::placeholder {
|
||||
color: var(--muted-light);
|
||||
color: #c0c8d4;
|
||||
}
|
||||
|
||||
.ui-input-wrapper:focus-within {
|
||||
|
||||
@@ -56,7 +56,7 @@ const model = defineModel<string>({ default: '' });
|
||||
}
|
||||
|
||||
.ui-textarea::placeholder {
|
||||
color: var(--muted-light);
|
||||
color: #c0c8d4;
|
||||
}
|
||||
|
||||
.ui-textarea:focus {
|
||||
|
||||
@@ -247,6 +247,11 @@ textarea {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: #c0c8d4;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
font-size: 0.9rem;
|
||||
|
||||
@@ -9,6 +9,7 @@ import type { LoginChallengeResponse, LoginOrganizationChoiceResponse } from '@m
|
||||
import { USER_ROLE_LABELS } from '@/lib/roles';
|
||||
import { brand } from '@mento/shared';
|
||||
import BrandName from '@/components/brand/BrandName.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
@@ -18,8 +19,8 @@ const route = useRoute();
|
||||
const mode = ref<'password' | 'otp'>('password');
|
||||
const otpStep = ref<'mobile' | 'code'>('mobile');
|
||||
|
||||
const identifier = ref('owner@demo.local');
|
||||
const password = ref('demo1234');
|
||||
const identifier = ref('');
|
||||
const password = ref('');
|
||||
const mobile = ref('');
|
||||
const showPassword = ref(false);
|
||||
const remember = ref(true);
|
||||
@@ -209,15 +210,17 @@ function cancelOrgChoice() {
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="ایمیل یا شماره موبایل خود را وارد کنید"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="ico user" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="user" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="password">رمز عبور</label>
|
||||
<div class="input-wrap">
|
||||
<div class="input-wrap has-eye">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
@@ -225,16 +228,18 @@ function cancelOrgChoice() {
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="رمز عبور خود را وارد کنید"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="ico lock" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="lock" :size="18" />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="eye"
|
||||
:aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
{{ showPassword ? 'مخفی' : 'نمایش' }}
|
||||
<UiIcon :name="showPassword ? 'eye-off' : 'eye'" :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -266,9 +271,11 @@ function cancelOrgChoice() {
|
||||
required
|
||||
autocomplete="tel"
|
||||
placeholder="۰۹۱۲۱۲۳۴۵۶۷"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="ico user" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="phone" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
@@ -297,7 +304,7 @@ function cancelOrgChoice() {
|
||||
required
|
||||
autocomplete="one-time-code"
|
||||
placeholder="کد را وارد کنید"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -339,21 +346,22 @@ function cancelOrgChoice() {
|
||||
padding: 1rem;
|
||||
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
||||
background:
|
||||
radial-gradient(circle at 90% 0%, rgba(13, 148, 136, 0.08), transparent 36%),
|
||||
var(--bg);
|
||||
radial-gradient(ellipse 70% 45% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
|
||||
radial-gradient(rgba(13, 148, 136, 0.12) 1px, transparent 1.2px),
|
||||
#f5fbfb;
|
||||
background-size: auto, 20px 20px, auto;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
flex: 1;
|
||||
width: min(1040px, 100%);
|
||||
width: min(1100px, 100%);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
min-height: min(640px, calc(100dvh - 5.5rem));
|
||||
min-height: min(680px, calc(100dvh - 5.5rem));
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
@@ -361,6 +369,9 @@ function cancelOrgChoice() {
|
||||
flex-direction: column;
|
||||
padding: clamp(1.2rem, 3vw, 2.4rem);
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
@@ -434,6 +445,22 @@ h1 {
|
||||
gap: 0.95rem;
|
||||
}
|
||||
|
||||
.form input {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form input::placeholder {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
color: #cdd4de;
|
||||
}
|
||||
|
||||
.form input.ltr-value:not(:placeholder-shown) {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
}
|
||||
@@ -446,48 +473,42 @@ h1 {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.input-wrap.has-eye input {
|
||||
padding-left: 2.7rem;
|
||||
}
|
||||
|
||||
.input-wrap input:focus {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ico {
|
||||
.field-ico {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0.85rem;
|
||||
right: 0.75rem;
|
||||
left: auto;
|
||||
transform: translateY(-50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.45;
|
||||
color: #94a3b8;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ico.user {
|
||||
background:
|
||||
radial-gradient(circle at 50% 35%, currentColor 0 28%, transparent 29%),
|
||||
radial-gradient(circle at 50% 85%, currentColor 0 38%, transparent 39%);
|
||||
color: #64748b;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.ico.lock {
|
||||
background:
|
||||
linear-gradient(currentColor, currentColor) center 62%/10px 8px no-repeat,
|
||||
radial-gradient(circle at 50% 38%, transparent 34%, currentColor 35% 55%, transparent 56%);
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.eye {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: 0.55rem;
|
||||
left: 0.45rem;
|
||||
right: auto;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.4rem;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
@@ -612,8 +633,34 @@ h1 {
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.auth-page {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
grid-template-columns: minmax(420px, 1fr) minmax(440px, 1.05fr);
|
||||
grid-template-areas: "form brand";
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
grid-area: form;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.auth-shell :deep(.brand-panel) {
|
||||
grid-area: brand;
|
||||
height: 100dvh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
@@ -621,8 +668,12 @@ h1 {
|
||||
}
|
||||
|
||||
.form-inner {
|
||||
margin: 0;
|
||||
margin: 0 auto;
|
||||
width: min(440px, 100%);
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,6 +8,7 @@ import MentoLogo from '@/components/brand/MentoLogo.vue';
|
||||
import axios from 'axios';
|
||||
import { brand, type RegisterChallengeResponse } from '@mento/shared';
|
||||
import BrandName from '@/components/brand/BrandName.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
@@ -105,10 +106,7 @@ function backToForm() {
|
||||
<template>
|
||||
<div class="auth-page">
|
||||
<div class="auth-shell">
|
||||
<AuthBrandPanel
|
||||
headline="همه ارتباطات، یکجا مدیریت میشوند"
|
||||
:description="`با ساخت حساب ${brand.nameFa}، سازمان خود را راهاندازی کنید و فروش و پشتیبانی را از یکجا پیش ببرید.`"
|
||||
/>
|
||||
<AuthBrandPanel />
|
||||
|
||||
<section class="form-panel">
|
||||
<header class="mobile-brand">
|
||||
@@ -134,6 +132,9 @@ function backToForm() {
|
||||
<label for="org">نام سازمان <em>*</em></label>
|
||||
<div class="input-wrap">
|
||||
<input id="org" v-model="organizationName" required placeholder="نام سازمان" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="building" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -157,7 +158,9 @@ function backToForm() {
|
||||
required
|
||||
placeholder="نام و نام خانوادگی خود را وارد کنید"
|
||||
/>
|
||||
<span class="ico user" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="user" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -169,9 +172,11 @@ function backToForm() {
|
||||
type="email"
|
||||
required
|
||||
placeholder="ایمیل خود را وارد کنید"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="ico mail" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="mail" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,14 +192,16 @@ function backToForm() {
|
||||
type="tel"
|
||||
required
|
||||
placeholder="۹۱۲۱۲۳۴۵۶۷"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="ico phone" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="phone" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">رمز عبور <em>*</em></label>
|
||||
<div class="input-wrap">
|
||||
<div class="input-wrap has-eye">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
@@ -202,15 +209,18 @@ function backToForm() {
|
||||
minlength="6"
|
||||
required
|
||||
placeholder="رمز عبور خود را وارد کنید"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="ico lock" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="lock" :size="18" />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="eye"
|
||||
:aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
{{ showPassword ? 'مخفی' : 'نمایش' }}
|
||||
<UiIcon :name="showPassword ? 'eye-off' : 'eye'" :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -219,7 +229,7 @@ function backToForm() {
|
||||
<div class="grid-2">
|
||||
<div class="field">
|
||||
<label for="passwordConfirm">تکرار رمز عبور <em>*</em></label>
|
||||
<div class="input-wrap">
|
||||
<div class="input-wrap has-eye">
|
||||
<input
|
||||
id="passwordConfirm"
|
||||
v-model="passwordConfirm"
|
||||
@@ -227,15 +237,18 @@ function backToForm() {
|
||||
minlength="6"
|
||||
required
|
||||
placeholder="رمز عبور خود را تکرار کنید"
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="ico lock" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="lock" :size="18" />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="eye"
|
||||
:aria-label="showPasswordConfirm ? 'مخفی کردن رمز' : 'نمایش رمز'"
|
||||
@click="showPasswordConfirm = !showPasswordConfirm"
|
||||
>
|
||||
{{ showPasswordConfirm ? 'مخفی' : 'نمایش' }}
|
||||
<UiIcon :name="showPasswordConfirm ? 'eye-off' : 'eye'" :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -247,7 +260,9 @@ function backToForm() {
|
||||
v-model="referralCode"
|
||||
placeholder="اگر کد معرف دارید وارد کنید"
|
||||
/>
|
||||
<span class="ico gift" aria-hidden="true" />
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="gift" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -297,7 +312,7 @@ function backToForm() {
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
required
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
placeholder="کد ایمیل"
|
||||
/>
|
||||
</div>
|
||||
@@ -309,7 +324,7 @@ function backToForm() {
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
required
|
||||
dir="ltr"
|
||||
class="ltr-value"
|
||||
placeholder="کد موبایل"
|
||||
/>
|
||||
</div>
|
||||
@@ -349,8 +364,10 @@ function backToForm() {
|
||||
padding: 1rem;
|
||||
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
||||
background:
|
||||
radial-gradient(circle at 8% 0%, rgba(13, 148, 136, 0.07), transparent 34%),
|
||||
var(--bg);
|
||||
radial-gradient(ellipse 70% 45% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
|
||||
radial-gradient(rgba(13, 148, 136, 0.12) 1px, transparent 1.2px),
|
||||
#f5fbfb;
|
||||
background-size: auto, 20px 20px, auto;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
@@ -358,16 +375,18 @@ function backToForm() {
|
||||
width: min(1100px, 100%);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
padding: clamp(1rem, 2.5vw, 2rem);
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
@@ -466,6 +485,23 @@ h1 {
|
||||
padding: 0.8rem 0.95rem;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.field select {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.form input::placeholder {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
color: #cdd4de;
|
||||
}
|
||||
|
||||
.form input.ltr-value:not(:placeholder-shown) {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
@@ -473,16 +509,21 @@ h1 {
|
||||
}
|
||||
|
||||
.input-wrap input {
|
||||
padding-inline-end: 2.5rem;
|
||||
padding-right: 2.6rem;
|
||||
}
|
||||
|
||||
.input-wrap.has-eye input {
|
||||
padding-left: 2.7rem;
|
||||
}
|
||||
|
||||
.mobile-wrap input {
|
||||
padding-inline-start: 3.4rem;
|
||||
padding-left: 3.4rem;
|
||||
}
|
||||
|
||||
.cc {
|
||||
position: absolute;
|
||||
inset-inline-start: 0.7rem;
|
||||
left: 0.7rem;
|
||||
right: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
@@ -490,49 +531,33 @@ h1 {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ico {
|
||||
.field-ico {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0.8rem;
|
||||
right: 0.7rem;
|
||||
left: auto;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.45;
|
||||
color: #94a3b8;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
pointer-events: none;
|
||||
background: #64748b;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.ico.user {
|
||||
border-radius: 999px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 35%, #64748b 0 28%, transparent 29%),
|
||||
radial-gradient(circle at 50% 85%, #64748b 0 38%, transparent 39%);
|
||||
}
|
||||
|
||||
.ico.mail {
|
||||
background: linear-gradient(#64748b, #64748b);
|
||||
mask: linear-gradient(#000 0 0);
|
||||
opacity: 0.4;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.ico.lock,
|
||||
.ico.phone,
|
||||
.ico.gift {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.eye {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: 0.45rem;
|
||||
left: 0.35rem;
|
||||
right: auto;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.terms {
|
||||
@@ -618,12 +643,48 @@ h1 {
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.auth-page {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
grid-template-columns: minmax(260px, 0.85fr) minmax(380px, 1.15fr);
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
grid-template-columns: minmax(420px, 1fr) minmax(440px, 1.05fr);
|
||||
grid-template-areas: "form brand";
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
grid-area: form;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.auth-shell :deep(.brand-panel) {
|
||||
grid-area: brand;
|
||||
height: 100dvh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-inner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user