Quollkey/Quollkey
Quollkey/Quollkey
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'signup' into feature/quollkey

Browse source
This commit is contained in:
Quollkey 2025-02-22 12:22:58 +10:30
commit 217af2230b
1 changed files with 144 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
packages/frontend/src/components/MkSignupDialog.rules.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <div>
<div :class="$style.banner"> <div :class="$style.banner">
<i class="ti ti-checklist"></i> <i class="ti ti-checklist"></i>
</div> </div>
@ -41,15 +41,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch :modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;" @update:modelValue="updateAgreeTosAndPrivacyPolicy">{{ i18n.ts.agree }}</MkSwitch> <MkSwitch :modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;" @update:modelValue="updateAgreeTosAndPrivacyPolicy">{{ i18n.ts.agree }}</MkSwitch>
</MkFolder> </MkFolder>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template>
<template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
<a href="https://git.quollkey.org/Quollkey/Quollkey/raw/branch/main/IMPORTANT_NOTES.md" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a>
<MkSwitch :modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree @update:modelValue="updateAgreeNote">{{ i18n.ts.agree }}</MkSwitch>
</MkFolder>
<div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div> <div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div>
<div class="_buttonsCenter"> <div class="_buttonsCenter">
@ -58,38 +49,37 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</MkSpacer> </MkSpacer>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { instance } from '@/instance.js'; import { instance } from '@/instance.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import sanitizeHtml from '@/scripts/sanitize-html.js'; import sanitizeHtml from '@/scripts/sanitize-html.js';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
const availableServerRules = instance.serverRules.length > 0; const availableServerRules = instance.serverRules.length > 0;
const availableTos = instance.tosUrl != null && instance.tosUrl !== ''; const availableTos = instance.tosUrl != null && instance.tosUrl !== '';
const availablePrivacyPolicy = instance.privacyPolicyUrl != null && instance.privacyPolicyUrl !== ''; const availablePrivacyPolicy = instance.privacyPolicyUrl != null && instance.privacyPolicyUrl !== '';
const agreeServerRules = ref(false); const agreeServerRules = ref(false);
const agreeTosAndPrivacyPolicy = ref(false); const agreeTosAndPrivacyPolicy = ref(false);
const agreeNote = ref(false);
const agreed = computed(() => { const agreed = computed(() => {
return (!availableServerRules || agreeServerRules.value) && ((!availableTos && !availablePrivacyPolicy) || agreeTosAndPrivacyPolicy.value) && agreeNote.value; return (!availableServerRules || agreeServerRules.value) && ((!availableTos && !availablePrivacyPolicy) || agreeTosAndPrivacyPolicy.value);
}); });
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'cancel'): void; (ev: 'cancel'): void;
(ev: 'done'): void; (ev: 'done'): void;
}>(); }>();
const tosPrivacyPolicyLabel = computed(() => { const tosPrivacyPolicyLabel = computed(() => {
if (availableTos && availablePrivacyPolicy) { if (availableTos && availablePrivacyPolicy) {
return i18n.ts.tosAndPrivacyPolicy; return i18n.ts.tosAndPrivacyPolicy;
} else if (availableTos) { } else if (availableTos) {
@ -99,9 +89,9 @@ const tosPrivacyPolicyLabel = computed(() => {
} else { } else {
return ''; return '';
} }
}); });
async function updateAgreeServerRules(v: boolean) { async function updateAgreeServerRules(v: boolean) {
if (v) { if (v) {
const confirm = await os.confirm({ const confirm = await os.confirm({
type: 'question', type: 'question',
@ -113,9 +103,9 @@ async function updateAgreeServerRules(v: boolean) {
} else { } else {
agreeServerRules.value = false; agreeServerRules.value = false;
} }
} }
async function updateAgreeTosAndPrivacyPolicy(v: boolean) { async function updateAgreeTosAndPrivacyPolicy(v: boolean) {
if (v) { if (v) {
const confirm = await os.confirm({ const confirm = await os.confirm({
type: 'question', type: 'question',
@ -129,40 +119,26 @@ async function updateAgreeTosAndPrivacyPolicy(v: boolean) {
} else { } else {
agreeTosAndPrivacyPolicy.value = false; agreeTosAndPrivacyPolicy.value = false;
} }
}
async function updateAgreeNote(v: boolean) {
if (v) {
const confirm = await os.confirm({
type: 'question',
title: i18n.ts.doYouAgree,
text: i18n.tsx.iHaveReadXCarefullyAndAgree({ x: i18n.ts.basicNotesBeforeCreateAccount }),
});
if (confirm.canceled) return;
agreeNote.value = true;
} else {
agreeNote.value = false;
} }
} </script>
</script>
<style lang="scss" module> <style lang="scss" module>
.banner { .banner {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
font-size: 26px; font-size: 26px;
background-color: var(--MI_THEME-accentedBg); background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent); color: var(--MI_THEME-accent);
} }
.rules { .rules {
counter-reset: item; counter-reset: item;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.rule { .rule {
display: flex; display: flex;
gap: 8px; gap: 8px;
word-break: break-word; word-break: break-word;
@ -185,9 +161,9 @@ async function updateAgreeNote(v: boolean) {
justify-content: center; justify-content: center;
border-radius: var(--MI-radius-ellipse); border-radius: var(--MI-radius-ellipse);
} }
} }
.ruleText { .ruleText {
padding-top: 6px; padding-top: 6px;
} }
</style> </style>