site/resources/js/Pages/Settings/SettingsVerification.vue

<template>
  <meta-head title="Верификация"></meta-head>

  <div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
        <settings-menu />

        <div class="col-span-4">
          <div class="mx-4 2xl:mx-28 my-8">
            <h2 class="text-xl lg:text-2xl xl:text-3xl text-white font-semibold">
              Верификация: паспорт
            </h2>
            <div>
              <div v-if="isPassportVerified">
                <div class="mt-5 text-green font-semibold text-lg">
                  Аккаунт успешно верифицирован
                </div>
              </div>
              <div v-else>
                <form class="flex flex-col" @submit.prevent="submit">
                  <file-input
                    v-model="form.docs"
                    accept="image/png, image/jpeg, image/jpg"
                    :error="form.errors.docs"
                    label="Скан 1ой страницы паспорта(.png,.jpg)"
                  />

                  <div class="mt-3 flex flex-wrap">
                    <progress
                      v-if="form.progress"
                      class="mx-3 my-1 w-full"
                      :value="form.progress.percentage"
                      max="100"
                    >
                      {{ form.progress.percentage }}%
                    </progress>

                    <loading-button :loading="form.processing" class=" transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-1.5 justify-center  text-base rounded-md text-white bg-orange focus:outline-none"
                                    type="submit"
                    >
                      Загрузить
                    </loading-button>
                  </div>
                </form>
                <div v-if="docUuid">
                  <p class="mt-4 text-sm text-white">
                    <a :href="route('users.get.document', {'uuid': docUuid}) " class="underline">
                      <span>Ваш паспорт</span>
                    </a>
                  </p>
                  <p class="text-sm text-white">
                    (Ожидайте верификацию, для замены загрузите скан заново)
                  </p>
                </div>
              </div>
            </div>




            <!-- <div class="my-5">
              <hr>
            </div> -->

            <!-- <h2 class="text-xl lg:text-2xl xl:text-3xl text-white font-semibold">
              Верификация: телефон
            </h2>
            <div v-if="isPhoneVerify" class="mt-5 text-green font-semibold text-lg">
              Ваш номер успешно верифицирован!
            </div> -->
            <!-- <div v-else class="mt-2">
              <p class=" text-white text-lg">
                На номер телефона {{ phone }}, будет совершен звонок, нужно ввести 4-х значный код
              </p>
              <div v-if="isToken" class="mt-5">
                <div class="flex flex-col">
                  <text-input v-model="token"
                              type="text" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
                              label="Введите код"
                  />
                  <div>
                    <button type="button"
                            class="text-white bg-orange hover:shadow-classic2 mt-4 my-1 transition shadow-none  inline-flex items-center px-8 py-2  justify-center text-base rounded-md"
                            @click="sendVerifyCode"
                    >
                      Отправить
                    </button>
                  </div>
                </div>
              </div>
              <button v-else type="button"
                      class="text-white bg-pink hover:shadow-pink mt-5 my-1 transition shadow-none  inline-flex items-center px-8 py-2  justify-center text-base rounded-md"
                      @click="sendCode"
              >
                Отправить код
              </button>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TextInput from '@/Shared/Form/TextInput.vue'
import { Inertia } from '@inertiajs/inertia'
import { useForm, usePage } from '@inertiajs/inertia-vue3'
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
import FileInput from '@/Shared/Form/FileInput.vue'
import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import { ref } from 'vue'

export default {
    components: {
        MetaHead,
        SettingsMenu,
        FileInput,
        LoadingButton,
        TextInput
    },
    layout: Layout,
    props: {
        docUuid: {
            type: String,
            default: null
        },
        phone: {
            type: String,
            default: ''
        },
        isToken: {
            type: Boolean,
            default: false
        },
        isPhoneVerify: {
            type: Boolean,
            default: false
        },
        isPassportVerified: {
            type: Boolean,
            default: false
        },
    },
    setup(props) {
        const form = useForm({
            docs: null,
        })
        const token = ref('')
        const submit = () => {
            if(!form.docs) return
            form.post(route('users.document'), {
                onSuccess: () => form.reset(),
            })
        }

        const sendCode = () => {
            Inertia.post(route('users.phone.verify.request'))
        }
        const sendVerifyCode = () => {
            Inertia.post(route('users.phone.verify.token'), {
                token: token.value,
            })
        }

        return {
            form,
            submit,
            sendCode,
            sendVerifyCode,
            token,
        }
    }
}
</script>