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>
<div>
<div>
<div :class="$style.banner">
<i class="ti ti-checklist"></i>
</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>
</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 class="_buttonsCenter">
@ -58,38 +49,37 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</MkSpacer>
</div>
</template>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { instance } from '@/instance.js';
import { i18n } from '@/i18n.js';
import sanitizeHtml from '@/scripts/sanitize-html.js';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js';
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { instance } from '@/instance.js';
import { i18n } from '@/i18n.js';
import sanitizeHtml from '@/scripts/sanitize-html.js';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js';
const availableServerRules = instance.serverRules.length > 0;
const availableTos = instance.tosUrl != null && instance.tosUrl !== '';
const availablePrivacyPolicy = instance.privacyPolicyUrl != null && instance.privacyPolicyUrl !== '';
const availableServerRules = instance.serverRules.length > 0;
const availableTos = instance.tosUrl != null && instance.tosUrl !== '';
const availablePrivacyPolicy = instance.privacyPolicyUrl != null && instance.privacyPolicyUrl !== '';
const agreeServerRules = ref(false);
const agreeTosAndPrivacyPolicy = ref(false);
const agreeNote = ref(false);
const agreeServerRules = ref(false);
const agreeTosAndPrivacyPolicy = ref(false);
const agreed = computed(() => {
return (!availableServerRules || agreeServerRules.value) && ((!availableTos && !availablePrivacyPolicy) || agreeTosAndPrivacyPolicy.value) && agreeNote.value;
});
const agreed = computed(() => {
return (!availableServerRules || agreeServerRules.value) && ((!availableTos && !availablePrivacyPolicy) || agreeTosAndPrivacyPolicy.value);
});
const emit = defineEmits<{
const emit = defineEmits<{
(ev: 'cancel'): void;
(ev: 'done'): void;
}>();
}>();
const tosPrivacyPolicyLabel = computed(() => {
const tosPrivacyPolicyLabel = computed(() => {
if (availableTos && availablePrivacyPolicy) {
return i18n.ts.tosAndPrivacyPolicy;
} else if (availableTos) {
@ -99,9 +89,9 @@ const tosPrivacyPolicyLabel = computed(() => {
} else {
return '';
}
});
});
async function updateAgreeServerRules(v: boolean) {
async function updateAgreeServerRules(v: boolean) {
if (v) {
const confirm = await os.confirm({
type: 'question',
@ -113,9 +103,9 @@ async function updateAgreeServerRules(v: boolean) {
} else {
agreeServerRules.value = false;
}
}
}
async function updateAgreeTosAndPrivacyPolicy(v: boolean) {
async function updateAgreeTosAndPrivacyPolicy(v: boolean) {
if (v) {
const confirm = await os.confirm({
type: 'question',
@ -129,40 +119,26 @@ async function updateAgreeTosAndPrivacyPolicy(v: boolean) {
} else {
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>
.banner {
<style lang="scss" module>
.banner {
padding: 16px;
text-align: center;
font-size: 26px;
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
}
}
.rules {
.rules {
counter-reset: item;
list-style: none;
padding: 0;
margin: 0;
}
}
.rule {
.rule {
display: flex;
gap: 8px;
word-break: break-word;
@ -185,9 +161,9 @@ async function updateAgreeNote(v: boolean) {
justify-content: center;
border-radius: var(--MI-radius-ellipse);
}
}
}
.ruleText {
.ruleText {
padding-top: 6px;
}
</style>
}
</style>