mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-09-29 11:25:39 +00:00
upd: create verification dialog
This commit is contained in:
Marie
parent
1caf3636d1
commit
58c8c00376
|
|
@ -2810,3 +2810,12 @@ _contextMenu:
|
|||
app: "Application"
|
||||
appWithShift: "Application with shift key"
|
||||
native: "Native"
|
||||
|
||||
_stripeAgeCheck:
|
||||
startText: We require you to confirm your identity, Please press the start button to begin the process
|
||||
beginProcess: Press the open Stripe in new tab button to begin Identification through Stripe
|
||||
endProcess: If you have completed the Stripe verification process, wait a few seconds and then click Confirm completion.
|
||||
_buttons:
|
||||
start: Start Verification
|
||||
openInNewTab: Open Stripe in new tab
|
||||
confirmFinish: Confirm completion
|
||||
|
|
|
|||
28
locales/index.d.ts
vendored
28
locales/index.d.ts
vendored
|
|
@ -10849,6 +10849,34 @@ export interface Locale extends ILocale {
|
|||
*/
|
||||
"native": string;
|
||||
};
|
||||
"_stripeAgeCheck": {
|
||||
/**
|
||||
* ご本人様確認をさせていただきますので、スタートボタンを押して手続きを開始してください。
|
||||
*/
|
||||
"startText": string;
|
||||
/**
|
||||
* 新しいタブでStripeを開くボタンを押すと、Stripeでの本人確認が開始されます。
|
||||
*/
|
||||
"beginProcess": string;
|
||||
/**
|
||||
* Stripeでの本人確認手続きが完了した場合は、数秒待ってから完了をクリックしてください。
|
||||
*/
|
||||
"endProcess": string;
|
||||
"_buttons": {
|
||||
/**
|
||||
* 検証を開始する
|
||||
*/
|
||||
"start": string;
|
||||
/**
|
||||
* 新しいタブでStripeを開く
|
||||
*/
|
||||
"openInNewTab": string;
|
||||
/**
|
||||
* 完成を確認する
|
||||
*/
|
||||
"confirmFinish": string;
|
||||
};
|
||||
};
|
||||
}
|
||||
declare const locales: {
|
||||
[lang: string]: Locale;
|
||||
|
|
|
|||
|
|
@ -2886,3 +2886,12 @@ _contextMenu:
|
|||
app: "アプリケーション"
|
||||
appWithShift: "Shiftキーでアプリケーション"
|
||||
native: "ブラウザのUI"
|
||||
|
||||
_stripeAgeCheck:
|
||||
startText: ご本人様確認をさせていただきますので、スタートボタンを押して手続きを開始してください。
|
||||
beginProcess: 新しいタブでStripeを開くボタンを押すと、Stripeでの本人確認が開始されます。
|
||||
endProcess: Stripeでの本人確認手続きが完了した場合は、数秒待ってから完了をクリックしてください。
|
||||
_buttons:
|
||||
start: 検証を開始する
|
||||
openInNewTab: 新しいタブでStripeを開く
|
||||
confirmFinish: 完成を確認する
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export class StripeHookServerService {
|
|||
});
|
||||
}
|
||||
|
||||
this.logger.succ(`${user.username} has succesfully approved their ID via Session ${verificationSession.client_reference_id}`);
|
||||
this.logger.succ(`${user.username} has succesfully approved their ID via Session ${verificationSession.id}`);
|
||||
|
||||
await this.usersRepository.update(user.id, { idCheckRequired: false, idVerified: true });
|
||||
|
||||
|
|
|
|||
132
packages/frontend/src/components/SkConfirmIdDialog.vue
Normal file
132
packages/frontend/src/components/SkConfirmIdDialog.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: marie and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkModalWindow ref="dialog" :width="500" :height="550" :with-close-button="false" @closed="emit('closed')">
|
||||
<template #header>
|
||||
<i class="ph-warning-circle ph-bold ph-lg" style="margin-right: 0.5em;"></i>
|
||||
<b>Confirm your Identity</b>
|
||||
</template>
|
||||
<Transition
|
||||
mode="out-in"
|
||||
:enterActiveClass="$style.transition_x_enterActive"
|
||||
:leaveActiveClass="$style.transition_x_leaveActive"
|
||||
:enterFromClass="$style.transition_x_enterFrom"
|
||||
:leaveToClass="$style.transition_x_leaveTo"
|
||||
>
|
||||
<template v-if="page === 0">
|
||||
<div :class="$style.centerPage">
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps" style="text-align: center;">
|
||||
<div style="font-size: 110%;">{{ i18n.ts._stripeAgeCheck.startText }}</div>
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton rounded primary @click="startCheck()">{{ i18n.ts._stripeAgeCheck._buttons.start }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 1">
|
||||
<div :class="$style.centerPage">
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps" style="text-align: center;">
|
||||
<div style="font-size: 110%;">{{ i18n.ts._stripeAgeCheck.beginProcess }}</div>
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton rounded primary @click="openCheck()">{{ i18n.ts._stripeAgeCheck._buttons.openInNewTab }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 2">
|
||||
<div :class="$style.centerPage">
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps" style="text-align: center;">
|
||||
<div style="font-size: 110%;">{{ i18n.ts._stripeAgeCheck.endProcess }}</div>
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton rounded primary @click="confirmFinish()">{{ i18n.ts._stripeAgeCheck._buttons.confirmFinish }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
</Transition>
|
||||
</MkModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { shallowRef, ref } from 'vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import MkModalWindow from '@/components/MkModalWindow.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i } from '@/account.js';
|
||||
|
||||
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
const url = ref('');
|
||||
const page = ref(0);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
||||
async function startCheck() {
|
||||
// Fail safe as it seems Misskey's frontend tends to not update the $i properly so on first reload the dialog may pop up again if reloaded too fast.
|
||||
if ($i && !$i.idCheckRequired) dialog.value?.close();
|
||||
await misskeyApi('stripe/create-verify-session').then(res => {
|
||||
url.value = res.url;
|
||||
page.value = page.value + 1;
|
||||
})
|
||||
}
|
||||
|
||||
function openCheck() {
|
||||
window.open(url.value, '_blank', 'noopener');
|
||||
page.value = page.value + 1;
|
||||
}
|
||||
|
||||
async function confirmFinish() {
|
||||
await misskeyApi('i').then(res => {
|
||||
if (!res.idCheckRequired && $i) {
|
||||
$i.idCheckRequired = res.idCheckRequired;
|
||||
$i.idVerified = res.idVerified;
|
||||
dialog.value?.close();
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.transition_x_enterActive,
|
||||
.transition_x_leaveActive {
|
||||
transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
|
||||
}
|
||||
.transition_x_enterFrom {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
.transition_x_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
.centerPage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100cqh;
|
||||
padding-bottom: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pageRoot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.pageMain {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch, provide, shallowRef, ref } from 'vue';
|
||||
import { computed, watch, provide, shallowRef, ref, defineAsyncComponent } from 'vue';
|
||||
import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
|
|
@ -71,6 +71,13 @@ const withRenotes = computed<boolean>({
|
|||
set: (x) => saveTlFilter('withRenotes', x),
|
||||
});
|
||||
|
||||
if ($i && $i.idCheckRequired) {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/SkConfirmIdDialog.vue')), {
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
// computed内での無限ループを防ぐためのフラグ
|
||||
const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>(
|
||||
defaultStore.reactiveState.tl.value.filter.withReplies ? 'withReplies' :
|
||||
|
|
|
|||
Loading…
Reference in a new issue