add: Require Approval for Signup

This commit is contained in:
Mar0xy 2023-10-18 02:41:36 +02:00
parent 5c7f517895
commit 2f2d88dcfc
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
24 changed files with 330 additions and 29 deletions

View file

@ -61,6 +61,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
</template>
</MkInput>
<MkInput v-if="instance.approvalRequiredForSignup" v-model="reason" type="text" :spellcheck="false" required data-cy-signup-reason>
<template #label>Reason <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ph-question ph-bold ph-lg"></i></div></template>
<template #prefix><i class="ph-envelope ph-bold ph-lg"></i></template>
</MkInput>
<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :class="$style.captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
@ -97,6 +101,7 @@ const props = withDefaults(defineProps<{
const emit = defineEmits<{
(ev: 'signup', user: Record<string, any>): void;
(ev: 'signupEmailPending'): void;
(ev: 'approvalPending'): void;
}>();
const host = toUnicode(config.host);
@ -109,6 +114,7 @@ let username: string = $ref('');
let password: string = $ref('');
let retypedPassword: string = $ref('');
let invitationCode: string = $ref('');
let reason: string = $ref('');
let email = $ref('');
let usernameState: null | 'wait' | 'ok' | 'unavailable' | 'error' | 'invalid-format' | 'min-range' | 'max-range' = $ref(null);
let emailState: null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:format' | 'unavailable:disposable' | 'unavailable:mx' | 'unavailable:smtp' | 'unavailable' | 'error' = $ref(null);
@ -249,6 +255,7 @@ async function onSubmit(): Promise<void> {
password,
emailAddress: email,
invitationCode,
reason,
'hcaptcha-response': hCaptchaResponse,
'g-recaptcha-response': reCaptchaResponse,
'turnstile-response': turnstileResponse,
@ -260,6 +267,13 @@ async function onSubmit(): Promise<void> {
text: i18n.t('_signup.emailSent', { email }),
});
emit('signupEmailPending');
} else if (instance.approvalRequiredForSignup) {
os.alert({
type: 'success',
title: i18n.ts._signup.almostThere,
text: i18n.t('_signup.emailSent', { email }),
});
emit('approvalPending');
} else {
const res = await os.api('signin', {
username,

View file

@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XServerRules @done="isAcceptedServerRule = true" @cancel="dialog.close()"/>
</template>
<template v-else>
<XSignup :autoSet="autoSet" @signup="onSignup" @signupEmailPending="onSignupEmailPending"/>
<XSignup :autoSet="autoSet" @signup="onSignup" @signupEmailPending="onSignupEmailPending" @approvalPending="onApprovalPending"/>
</template>
</Transition>
</div>
@ -64,6 +64,9 @@ function onSignup(res) {
function onSignupEmailPending() {
dialog.close();
}
function onApprovalPending() {
dialog.close();
}
</script>
<style lang="scss" module>

View file

@ -21,6 +21,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="instance.disableRegistration" :class="$style.mainWarn">
<MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
</div>
<div v-if="instance.approvalRequiredForSignup" :class="$style.mainWarn">
<MkInfo warn>This instance is only accepting users who specify a reason for registration.<br />You must enter a reason during sign up as to why you want to join this instance.</MkInfo>
</div>
<div class="_gaps_s" :class="$style.mainActions">
<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
<MkButton :class="$style.mainAction" full rounded @click="exploreOtherServers()">{{ i18n.ts.exploreOtherServers }}</MkButton>

View file

@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span class="name"><MkUserName class="name" :user="user"/></span>
<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
<span class="state">
<span v-if="!approved" class="silenced">Not Approved</span>
<span v-if="suspended" class="suspended">Suspended</span>
<span v-if="silenced" class="silenced">Silenced</span>
<span v-if="moderator" class="moderator">Moderator</span>
@ -176,6 +177,20 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkObjectView tall :value="user">
</MkObjectView>
</div>
<div v-else-if="tab === 'approval'" class="_gaps_m">
<MkKeyValue oneline>
<template #key>Approval Status</template>
<template #value><span class="_monospace">{{ approved ? 'Approved' : 'Not Approved' }}</span></template>
</MkKeyValue>
<MkTextarea v-model="signupReason" readonly>
<template #label>Reason</template>
</MkTextarea>
<MkButton v-if="$i.isAdmin" inline success @click="approveAccount">Approve</MkButton>
<MkButton v-if="$i.isAdmin" inline danger @click="deleteAccount">Deny & Delete</MkButton>
</div>
</FormSuspense>
</MkSpacer>
</MkStickyContainer>
@ -222,8 +237,11 @@ let ips = $ref(null);
let ap = $ref(null);
let moderator = $ref(false);
let silenced = $ref(false);
let approved = $ref(false);
let suspended = $ref(false);
let moderationNote = $ref('');
let signupReason = $ref('');
const filesPagination = {
endpoint: 'admin/drive/files' as const,
limit: 10,
@ -253,8 +271,10 @@ function createFetcher() {
ips = _ips;
moderator = info.isModerator;
silenced = info.isSilenced;
approved = info.approved;
suspended = info.isSuspended;
moderationNote = info.moderationNote;
signupReason = info.signupReason;
watch($$(moderationNote), async () => {
await os.api('admin/update-user-note', { userId: user.id, text: moderationNote });
@ -346,6 +366,16 @@ async function deleteAccount() {
}
}
async function approveAccount() {
const confirm = await os.confirm({
type: 'warning',
text: i18n.ts.suspendConfirm,
});
if (confirm.canceled) return;
await os.api('admin/approve-user', { userId: user.id });
await refreshUser();
}
async function assignRole() {
const roles = await os.api('admin/roles/list');
@ -432,31 +462,60 @@ watch($$(user), () => {
const headerActions = $computed(() => []);
const headerTabs = $computed(() => [{
key: 'overview',
title: i18n.ts.overview,
icon: 'ph-info ph-bold ph-lg',
}, {
key: 'roles',
title: i18n.ts.roles,
icon: 'ph-seal-check ph-bold pg-lg',
}, {
key: 'announcements',
title: i18n.ts.announcements,
icon: 'ph-megaphone ph-bold ph-lg',
}, {
key: 'drive',
title: i18n.ts.drive,
icon: 'ph-cloud ph-bold ph-lg',
}, {
key: 'chart',
title: i18n.ts.charts,
icon: 'ph-chart-line ph-bold pg-lg',
}, {
key: 'raw',
title: 'Raw',
icon: 'ph-code ph-bold pg-lg',
}]);
const headerTabs = $computed(() => iAmAdmin && !approved ?
[{
key: 'overview',
title: i18n.ts.overview,
icon: 'ph-info ph-bold ph-lg',
}, {
key: 'roles',
title: i18n.ts.roles,
icon: 'ph-seal-check ph-bold pg-lg',
}, {
key: 'announcements',
title: i18n.ts.announcements,
icon: 'ph-megaphone ph-bold ph-lg',
}, {
key: 'drive',
title: i18n.ts.drive,
icon: 'ph-cloud ph-bold ph-lg',
}, {
key: 'chart',
title: i18n.ts.charts,
icon: 'ph-chart-line ph-bold pg-lg',
}, {
key: 'raw',
title: 'Raw',
icon: 'ph-code ph-bold pg-lg',
}, {
key: 'approval',
title: 'Approval',
icon: 'ph-eye ph-bold pg-lg',
}] : [{
key: 'overview',
title: i18n.ts.overview,
icon: 'ph-info ph-bold ph-lg',
}, {
key: 'roles',
title: i18n.ts.roles,
icon: 'ph-seal-check ph-bold pg-lg',
}, {
key: 'announcements',
title: i18n.ts.announcements,
icon: 'ph-megaphone ph-bold ph-lg',
}, {
key: 'drive',
title: i18n.ts.drive,
icon: 'ph-cloud ph-bold ph-lg',
}, {
key: 'chart',
title: i18n.ts.charts,
icon: 'ph-chart-line ph-bold pg-lg',
}, {
key: 'raw',
title: 'Raw',
icon: 'ph-code ph-bold pg-lg',
}]);
definePageMetadata(computed(() => ({
title: user ? acct(user) : i18n.ts.userInfo,
@ -547,6 +606,18 @@ definePageMetadata(computed(() => ({
}
}
}
.casdwq {
.silenced {
color: var(--warn);
border-color: var(--warn);
}
.moderator {
color: var(--success);
border-color: var(--success);
}
}
</style>
<style lang="scss" module>

View file

@ -18,6 +18,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.emailRequiredForSignup }}</template>
</MkSwitch>
<MkSwitch v-model="approvalRequiredForSignup">
<template #label>Require approval for new sign-ups</template>
</MkSwitch>
<FormLink to="/admin/server-rules">{{ i18n.ts.serverRules }}</FormLink>
<MkInput v-model="tosUrl">
@ -71,6 +75,7 @@ import FormLink from '@/components/form/link.vue';
let enableRegistration: boolean = $ref(false);
let emailRequiredForSignup: boolean = $ref(false);
let approvalRequiredForSignup: boolean = $ref(false);
let sensitiveWords: string = $ref('');
let preservedUsernames: string = $ref('');
let tosUrl: string | null = $ref(null);
@ -80,6 +85,7 @@ async function init() {
const meta = await os.api('admin/meta');
enableRegistration = !meta.disableRegistration;
emailRequiredForSignup = meta.emailRequiredForSignup;
approvalRequiredForSignup = meta.approvalRequiredForSignup;
sensitiveWords = meta.sensitiveWords.join('\n');
preservedUsernames = meta.preservedUsernames.join('\n');
tosUrl = meta.tosUrl;
@ -90,6 +96,7 @@ function save() {
os.apiWithDialog('admin/update-meta', {
disableRegistration: !enableRegistration,
emailRequiredForSignup,
approvalRequiredForSignup,
tosUrl,
privacyPolicyUrl,
sensitiveWords: sensitiveWords.split('\n'),

View file

@ -10,11 +10,12 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="{
[$style.logGreen]: ['createRole', 'addCustomEmoji', 'createGlobalAnnouncement', 'createUserAnnouncement', 'createAd', 'createInvitation'].includes(log.type),
[$style.logYellow]: ['markSensitiveDriveFile', 'resetPassword'].includes(log.type),
[$style.logRed]: ['suspend', 'deleteRole', 'suspendRemoteInstance', 'deleteGlobalAnnouncement', 'deleteUserAnnouncement', 'deleteCustomEmoji', 'deleteNote', 'deleteDriveFile', 'deleteAd'].includes(log.type)
[$style.logRed]: ['suspend', 'approve', 'deleteRole', 'suspendRemoteInstance', 'deleteGlobalAnnouncement', 'deleteUserAnnouncement', 'deleteCustomEmoji', 'deleteNote', 'deleteDriveFile', 'deleteAd'].includes(log.type)
}"
>{{ i18n.ts._moderationLogTypes[log.type] }}</b>
<span v-if="log.type === 'updateUserNote'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
<span v-else-if="log.type === 'suspend'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
<span v-else-if="log.type === 'approve'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
<span v-else-if="log.type === 'unsuspend'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
<span v-else-if="log.type === 'resetPassword'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
<span v-else-if="log.type === 'assignRole'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }} <i class="ti ti-arrow-right"></i> {{ log.info.roleName }}</span>
@ -65,6 +66,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="log.type === 'suspend'">
<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
</template>
<template v-else-if="log.type === 'approve'">
<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
</template>
<template v-else-if="log.type === 'unsuspend'">
<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
</template>