mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.9 KiB
63 lines
1.9 KiB
<script setup lang="ts"> |
|
import type { VNodeRef } from '@vue/runtime-core' |
|
import type { InputPassword } from 'ant-design-vue' |
|
import { extractSdkResponseErrorMsg, message, ref, useRoute, useSharedView, useVModel } from '#imports' |
|
|
|
const props = defineProps<{ |
|
modelValue: boolean |
|
}>() |
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
const vModel = useVModel(props, 'modelValue', emit) |
|
|
|
const route = useRoute() |
|
|
|
const { loadSharedView } = useSharedView() |
|
|
|
const formState = ref({ password: undefined }) |
|
|
|
const onFinish = async () => { |
|
try { |
|
await loadSharedView(route.params.viewId as string, formState.value.password) |
|
vModel.value = false |
|
} catch (e: any) { |
|
console.error(e) |
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
} |
|
} |
|
|
|
const focus: VNodeRef = (el: typeof InputPassword) => el?.$el?.querySelector('input').focus() |
|
</script> |
|
|
|
<template> |
|
<NcModal v-model:visible="vModel" c size="small" :class="{ active: vModel }" :mask-closable="false"> |
|
<template #header> |
|
<div class="flex flex-row items-center gap-x-2"> |
|
<GeneralIcon icon="key" /> |
|
This shared view is protected |
|
</div> |
|
</template> |
|
|
|
<div class="mt-2"> |
|
<a-form ref="formRef" :model="formState" name="create-new-table-form" @finish="onFinish"> |
|
<a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]"> |
|
<a-input-password |
|
ref="focus" |
|
v-model:value="formState.password" |
|
class="nc-input-md" |
|
hide-details |
|
size="large" |
|
placeholder="Enter password" |
|
/> |
|
</a-form-item> |
|
</a-form> |
|
<div class="flex flex-row justify-end gap-x-2 mt-6"> |
|
<NcButton type="primary" html-type="submit" @click="onFinish" |
|
>Unlock |
|
<template #loading> Verifying Password </template> |
|
</NcButton> |
|
</div> |
|
</div> |
|
</NcModal> |
|
</template>
|
|
|