hedena_gold/apps/user-app/src/views/user/RegisterView.vue

<!--
  Ported from legacy henza_pwa/src/views/user/LoginRegister/components/Register.vue,
  restyled into the redesigned design language (see components/home/* and
  HomeView).

  DROPPED as confirmed-dead code (verified unreachable, not merely "possibly
  dead"): legacy rendered a whole cascading country->province->city picker
  (WorkActionSheet + selectCityArrays + getCities() against POST /cities/list)
  alongside a plain "شهر" text <Input>. The only element that ever opened the
  picker (`#citybtn`) was itself commented out in legacy's own template, so the
  picker was unreachable UI even in the original app; the visible form uses the
  plain text input. That whole complex, and the parallel unused
  `userFormModel`/`defaultUserFormModel` objects, are not ported.

  STUBBED, not real, and unchanged from the previous version: legacy's
  POST /major/register — apps/api has no create-customer endpoint. Submitting
  shows legacy's exact success message without persisting anything. The copy
  says the account awaits review, which is what legacy said too, so the screen
  does not claim an account exists when none was created.
-->
<template>
  <div class="auth">
    <PageBar title="ثبت نام" back-to="home" />

    <Spinner :spinning="profileData.loading" tip="در حال ثبت اطلاعات">
      <container class="auth__body">
        <section class="auth__intro">
          <div class="auth__mark" aria-hidden="true">
            <Icon icon="vuesax-linear:user-add" size="28" />
          </div>
          <h2 class="auth__title">ساخت حساب کاربری</h2>
          <p class="auth__sub">اطلاعات فروشگاه خود را وارد کنید</p>
        </section>

        <section class="auth__card">
          <Form :model="formModel" layout="vertical" @finish="register" class="auth__form">
            <FormItem name="fname" label="نام" :rules="required('نام')">
              <Input v-model:value="formModel.fname" />
            </FormItem>
            <FormItem name="lname" label="نام خانوادگی" :rules="required('نام خانوادگی')">
              <Input v-model:value="formModel.lname" />
            </FormItem>
            <FormItem
              name="mobile"
              label="شماره موبایل"
              :rules="[mobileRule('شماره موبایل'), required('شماره موبایل')]"
            >
              <Input v-model:value="formModel.mobile" type="number" />
            </FormItem>
            <FormItem name="store_name" label="نام فروشگاه" :rules="required('نام فروشگاه')">
              <Input v-model:value="formModel.store_name" />
            </FormItem>
            <FormItem name="phone" label="تلفن فروشگاه" :rules="[required('تلفن فروشگاه')]">
              <Input v-model:value="formModel.phone" type="number" />
            </FormItem>
            <FormItem name="address" label="آدرس پستی" :rules="required('آدرس')">
              <Textarea v-model:value="formModel.address" :rows="3" />
            </FormItem>
            <FormItem name="city" label="شهر" :rules="required('شهر')">
              <Input v-model:value="formModel.city" />
            </FormItem>

            <button type="submit" class="auth__cta">ثبت اطلاعات</button>
          </Form>
        </section>

        <p class="auth__switch">
          اگر حساب کاربری دارید
          <button type="button" @click="emit('register', false)">وارد شوید</button>
        </p>
      </container>
    </Spinner>

    <DialogVant :timeOut="-1" v-model:show="registeredInfo" :closeOnClickOverlay="false">
      <template v-slot:img>
        <img :src="registerDelayImage" alt="" class="opacity-80" />
      </template>
      <template v-slot:title>
        <div class="p-5">
          ثبت نام شما با موفقیت انجام شد. منتظر تایید اطلاعات ثبت نامی شما توسط کارشناسان بمانید.
        </div>
      </template>
      <template v-slot:button>
        <div class="text-center" @click="router.push({ name: 'home' })">متوجه شدم</div>
      </template>
    </DialogVant>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Form, FormItem, Input, Textarea } from 'ant-design-vue'
import registerDelayImage from '../../assets/img/registerDelay.svg'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
import DialogVant from '../../components/DialogVant.vue'
import { required, mobile as mobileRule } from '../../utils/validator'

const emit = defineEmits<{ (e: 'register', value: boolean): void }>()
const router = useRouter()

const profileData = reactive({ loading: false })
const registeredInfo = ref(false)

const formModel = reactive({
  fname: undefined as string | undefined,
  lname: undefined as string | undefined,
  mobile: undefined as string | undefined,
  store_name: undefined as string | undefined,
  phone: undefined as string | undefined,
  address: undefined as string | undefined,
  city: undefined as string | undefined,
})

const register = async () => {
  try {
    profileData.loading = true
    // Stubbed — no create-customer endpoint exists in apps/api yet.
    registeredInfo.value = true
  } finally {
    profileData.loading = false
  }
}
</script>

<style scoped lang="less">
.auth {
  background: @page;
  min-height: 100vh;
}

.auth__body {
  padding-top: 86px;
  padding-bottom: 90px;
}

.auth__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 24px;
}

.auth__mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: @wine;
  background: @wineWash;
}

.auth__title {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: @ink;
}

.auth__sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: @inkFaint;
}

.auth__card {
  padding: 18px 16px 20px;
  border: 1px solid @hairline;
  border-radius: 20px;
  background: @canvasSoft;
}

.auth__form :deep(.ant-form-item-label > label) {
  font-size: 12px;
  color: @inkMuted;
}

.auth__cta {
  width: 100%;
  margin-top: 4px;
  padding: 13px 18px;
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: @primary;
  transition: transform 0.15s ease;
}

.auth__cta:active {
  transform: scale(0.99);
}

.auth__switch {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12px;
  color: @inkMuted;
}

.auth__switch button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 3px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: @wine;
}
</style>