Allow mixed-company cart, add delete confirmations, and fix profile settings routes.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,132 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import BaseButton from '@/components/ui/BaseButton.vue'
|
||||
import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
|
||||
|
||||
const language = ref('fa')
|
||||
const currency = ref('irr')
|
||||
const density = ref('comfortable')
|
||||
const saved = ref(false)
|
||||
|
||||
function save() {
|
||||
saved.value = true
|
||||
setTimeout(() => {
|
||||
saved.value = false
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProfileSubpageLayout title="تنظیمات نمایش" subtitle="زبان، واحد پول و حالت نمایش">
|
||||
<div class="display-form">
|
||||
<label class="display-field">
|
||||
<span class="display-field__label">زبان</span>
|
||||
<select v-model="language" class="display-field__control">
|
||||
<option value="fa">فارسی</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="display-field">
|
||||
<span class="display-field__label">واحد پول</span>
|
||||
<select v-model="currency" class="display-field__control">
|
||||
<option value="irr">تومان</option>
|
||||
<option value="rial">ریال</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<fieldset class="display-field">
|
||||
<legend class="display-field__label">حالت نمایش</legend>
|
||||
<div class="display-options">
|
||||
<label class="display-option">
|
||||
<input v-model="density" type="radio" value="comfortable" />
|
||||
<span>راحت</span>
|
||||
</label>
|
||||
<label class="display-option">
|
||||
<input v-model="density" type="radio" value="compact" />
|
||||
<span>فشرده</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<BaseButton block @click="save">ذخیره تنظیمات</BaseButton>
|
||||
<p v-if="saved" class="display-saved">تنظیمات نمایش ذخیره شد ✓</p>
|
||||
</div>
|
||||
</ProfileSubpageLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.display-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.display-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.display-field__label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.display-field__control {
|
||||
width: 100%;
|
||||
min-height: var(--btn-height);
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-family: inherit;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.display-field__control:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.display-options {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.display-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.display-option:has(input:checked) {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.display-option input {
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.display-saved {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
color: var(--color-success);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import BaseButton from '@/components/ui/BaseButton.vue'
|
||||
import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
|
||||
|
||||
const emailOrders = ref(true)
|
||||
const emailChecks = ref(true)
|
||||
const smsOrders = ref(true)
|
||||
const smsMarketing = ref(false)
|
||||
const saved = ref(false)
|
||||
|
||||
function save() {
|
||||
saved.value = true
|
||||
setTimeout(() => {
|
||||
saved.value = false
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProfileSubpageLayout title="اعلان‌ها" subtitle="مدیریت اعلان‌های ایمیل و پیامک">
|
||||
<div class="notify-list">
|
||||
<label class="notify-row">
|
||||
<span class="notify-row__text">
|
||||
<strong>ایمیل وضعیت سفارش</strong>
|
||||
<span>اطلاع از تأیید، ارسال و تکمیل سفارش</span>
|
||||
</span>
|
||||
<input v-model="emailOrders" type="checkbox" class="notify-row__switch" />
|
||||
</label>
|
||||
|
||||
<label class="notify-row">
|
||||
<span class="notify-row__text">
|
||||
<strong>ایمیل سررسید چک</strong>
|
||||
<span>یادآوری قبل از موعد چک‌های ثبت‌شده</span>
|
||||
</span>
|
||||
<input v-model="emailChecks" type="checkbox" class="notify-row__switch" />
|
||||
</label>
|
||||
|
||||
<label class="notify-row">
|
||||
<span class="notify-row__text">
|
||||
<strong>پیامک وضعیت سفارش</strong>
|
||||
<span>ارسال پیامک برای تغییر وضعیت سفارش</span>
|
||||
</span>
|
||||
<input v-model="smsOrders" type="checkbox" class="notify-row__switch" />
|
||||
</label>
|
||||
|
||||
<label class="notify-row">
|
||||
<span class="notify-row__text">
|
||||
<strong>پیامک‌های تبلیغاتی</strong>
|
||||
<span>تخفیف‌ها و پیشنهادهای ویژه</span>
|
||||
</span>
|
||||
<input v-model="smsMarketing" type="checkbox" class="notify-row__switch" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<BaseButton block class="notify-save" @click="save">ذخیره تنظیمات</BaseButton>
|
||||
<p v-if="saved" class="notify-saved">تنظیمات اعلان ذخیره شد ✓</p>
|
||||
</ProfileSubpageLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notify-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.notify-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notify-row:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.notify-row__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notify-row__text strong {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notify-row__text span {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.notify-row__switch {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
accent-color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notify-save {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.notify-saved {
|
||||
margin: 8px 0 0;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
color: var(--color-success);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import BaseInput from '@/components/ui/BaseInput.vue'
|
||||
import BaseButton from '@/components/ui/BaseButton.vue'
|
||||
import FormErrorBanner from '@/components/ui/FormErrorBanner.vue'
|
||||
import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
|
||||
import {
|
||||
FORM_VALIDATION_SUMMARY,
|
||||
clearFieldError,
|
||||
hasFieldErrors,
|
||||
type FieldErrors,
|
||||
} from '@/utils/formErrors'
|
||||
|
||||
const currentPassword = ref('')
|
||||
const newPassword = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const fieldErrors = ref<FieldErrors>({})
|
||||
const formError = ref('')
|
||||
const saved = ref(false)
|
||||
|
||||
function clearField(key: string) {
|
||||
fieldErrors.value = clearFieldError(fieldErrors.value, key)
|
||||
if (!hasFieldErrors(fieldErrors.value)) formError.value = ''
|
||||
}
|
||||
|
||||
function save() {
|
||||
fieldErrors.value = {}
|
||||
formError.value = ''
|
||||
saved.value = false
|
||||
|
||||
const errors: FieldErrors = {}
|
||||
if (!currentPassword.value) errors.currentPassword = 'رمز فعلی الزامی است.'
|
||||
if (newPassword.value.length < 6) errors.newPassword = 'رمز جدید باید حداقل ۶ کاراکتر باشد.'
|
||||
if (confirmPassword.value !== newPassword.value) {
|
||||
errors.confirmPassword = 'تکرار رمز با رمز جدید یکسان نیست.'
|
||||
}
|
||||
|
||||
if (hasFieldErrors(errors)) {
|
||||
fieldErrors.value = errors
|
||||
formError.value = FORM_VALIDATION_SUMMARY
|
||||
return
|
||||
}
|
||||
|
||||
currentPassword.value = ''
|
||||
newPassword.value = ''
|
||||
confirmPassword.value = ''
|
||||
saved.value = true
|
||||
setTimeout(() => {
|
||||
saved.value = false
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProfileSubpageLayout title="امنیت حساب" subtitle="تغییر رمز عبور و تنظیمات ورود">
|
||||
<FormErrorBanner :message="formError" />
|
||||
|
||||
<div class="settings-form">
|
||||
<BaseInput
|
||||
v-model="currentPassword"
|
||||
type="password"
|
||||
label="رمز عبور فعلی"
|
||||
:error="fieldErrors.currentPassword"
|
||||
@update:model-value="clearField('currentPassword')"
|
||||
/>
|
||||
<BaseInput
|
||||
v-model="newPassword"
|
||||
type="password"
|
||||
label="رمز عبور جدید"
|
||||
:error="fieldErrors.newPassword"
|
||||
@update:model-value="clearField('newPassword')"
|
||||
/>
|
||||
<BaseInput
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
label="تکرار رمز عبور جدید"
|
||||
:error="fieldErrors.confirmPassword"
|
||||
@update:model-value="clearField('confirmPassword')"
|
||||
/>
|
||||
<BaseButton block @click="save">ذخیره رمز جدید</BaseButton>
|
||||
<p v-if="saved" class="settings-form__saved">رمز عبور با موفقیت تغییر کرد ✓</p>
|
||||
</div>
|
||||
</ProfileSubpageLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.settings-form__saved {
|
||||
margin: 8px 0 0;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
color: var(--color-success);
|
||||
}
|
||||
</style>
|
||||
@@ -106,21 +106,21 @@ const settingsItems: Array<{
|
||||
label: 'امنیت حساب',
|
||||
description: 'تغییر رمز عبور و تنظیمات ورود',
|
||||
icon: IconLock,
|
||||
path: '/profile/edit',
|
||||
path: '/profile/security',
|
||||
},
|
||||
{
|
||||
id: 'notifications',
|
||||
label: 'اعلان‌ها',
|
||||
description: 'مدیریت اعلان‌های ایمیل و پیامک',
|
||||
icon: IconBell,
|
||||
path: '/profile/edit',
|
||||
path: '/profile/notifications',
|
||||
},
|
||||
{
|
||||
id: 'display',
|
||||
label: 'تنظیمات نمایش',
|
||||
description: 'زبان، واحد پول و حالت نمایش',
|
||||
icon: IconLayoutGrid,
|
||||
path: '/profile/edit',
|
||||
path: '/profile/display',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import IconChevronBack from '@/components/icons/IconChevronBack.vue'
|
||||
|
||||
defineProps<{
|
||||
title: string
|
||||
subtitle?: string
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function goBack() {
|
||||
router.push('/profile')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Mobile -->
|
||||
<div class="page profile-subpage mobile-only">
|
||||
<header class="profile-subpage__nav">
|
||||
<button type="button" class="nav-btn" aria-label="بازگشت" @click="goBack">
|
||||
<IconChevronBack :size="20" />
|
||||
</button>
|
||||
<h1 class="profile-subpage__title">{{ title }}</h1>
|
||||
<button type="button" class="nav-btn nav-btn--ghost" aria-hidden="true" tabindex="-1">
|
||||
<IconChevronBack :size="18" class="nav-btn__flip" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="page__scroll page__scroll--with-nav">
|
||||
<div class="profile-subpage__card card">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop -->
|
||||
<div class="desktop-page profile-subpage-desktop desktop-only">
|
||||
<header class="desktop-page__head">
|
||||
<button type="button" class="profile-subpage-desktop__back" @click="goBack">
|
||||
<IconChevronBack :size="18" />
|
||||
بازگشت به پروفایل
|
||||
</button>
|
||||
<h1 class="desktop-page__title">{{ title }}</h1>
|
||||
<p v-if="subtitle" class="desktop-page__subtitle">{{ subtitle }}</p>
|
||||
</header>
|
||||
|
||||
<div class="profile-subpage-desktop__card card">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-subpage {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-subpage__nav {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr 40px;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.profile-subpage__title {
|
||||
margin: 0;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-btn--ghost {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-btn__flip {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.profile-subpage__card {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.profile-subpage-desktop__back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-subpage-desktop__card {
|
||||
max-width: 560px;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user