Merge branch 'signup' into feature/quollkey
This commit is contained in:
commit
217af2230b
1 changed files with 144 additions and 168 deletions
|
|
@ -4,190 +4,166 @@ 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>
|
||||||
|
<MkSpacer :marginMin="20" :marginMax="28">
|
||||||
|
<div class="_gaps_m">
|
||||||
|
<div v-if="instance.disableRegistration">
|
||||||
|
<MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<div>{{ i18n.ts.pleaseConfirmBelowBeforeSignup }}</div>
|
||||||
|
<div style="font-weight: bold; margin-top: 0.5em;">{{ i18n.ts.beSureToReadThisAsItIsImportant }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<MkFolder v-if="availableServerRules" :defaultOpen="true">
|
||||||
|
<template #label>{{ i18n.ts.serverRules }}</template>
|
||||||
|
<template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
|
||||||
|
|
||||||
|
<ol class="_gaps_s" :class="$style.rules">
|
||||||
|
<li v-for="item in instance.serverRules" :class="$style.rule"><div :class="$style.ruleText" v-html="sanitizeHtml(item)"></div></li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<MkSwitch :modelValue="agreeServerRules" style="margin-top: 16px;" @update:modelValue="updateAgreeServerRules">{{ i18n.ts.agree }}</MkSwitch>
|
||||||
|
</MkFolder>
|
||||||
|
|
||||||
|
<MkFolder v-if="availableTos || availablePrivacyPolicy" :defaultOpen="true">
|
||||||
|
<template #label>{{ tosPrivacyPolicyLabel }}</template>
|
||||||
|
<template #suffix><i v-if="agreeTosAndPrivacyPolicy" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
|
||||||
|
<div class="_gaps_s">
|
||||||
|
<div v-if="availableTos"><a :href="instance.tosUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a></div>
|
||||||
|
<div v-if="availablePrivacyPolicy"><a :href="instance.privacyPolicyUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.privacyPolicy }} <i class="ti ti-external-link"></i></a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<MkSwitch :modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;" @update:modelValue="updateAgreeTosAndPrivacyPolicy">{{ i18n.ts.agree }}</MkSwitch>
|
||||||
|
</MkFolder>
|
||||||
|
|
||||||
|
<div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div>
|
||||||
|
|
||||||
|
<div class="_buttonsCenter">
|
||||||
|
<MkButton inline rounded @click="emit('cancel')">{{ i18n.ts.cancel }}</MkButton>
|
||||||
|
<MkButton inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue @click="emit('done')">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</MkSpacer>
|
||||||
</div>
|
</div>
|
||||||
<MkSpacer :marginMin="20" :marginMax="28">
|
</template>
|
||||||
<div class="_gaps_m">
|
|
||||||
<div v-if="instance.disableRegistration">
|
|
||||||
<MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<script lang="ts" setup>
|
||||||
<div>{{ i18n.ts.pleaseConfirmBelowBeforeSignup }}</div>
|
import { computed, ref } from 'vue';
|
||||||
<div style="font-weight: bold; margin-top: 0.5em;">{{ i18n.ts.beSureToReadThisAsItIsImportant }}</div>
|
import { instance } from '@/instance.js';
|
||||||
</div>
|
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';
|
||||||
|
|
||||||
<MkFolder v-if="availableServerRules" :defaultOpen="true">
|
const availableServerRules = instance.serverRules.length > 0;
|
||||||
<template #label>{{ i18n.ts.serverRules }}</template>
|
const availableTos = instance.tosUrl != null && instance.tosUrl !== '';
|
||||||
<template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
|
const availablePrivacyPolicy = instance.privacyPolicyUrl != null && instance.privacyPolicyUrl !== '';
|
||||||
|
|
||||||
<ol class="_gaps_s" :class="$style.rules">
|
const agreeServerRules = ref(false);
|
||||||
<li v-for="item in instance.serverRules" :class="$style.rule"><div :class="$style.ruleText" v-html="sanitizeHtml(item)"></div></li>
|
const agreeTosAndPrivacyPolicy = ref(false);
|
||||||
</ol>
|
|
||||||
|
|
||||||
<MkSwitch :modelValue="agreeServerRules" style="margin-top: 16px;" @update:modelValue="updateAgreeServerRules">{{ i18n.ts.agree }}</MkSwitch>
|
const agreed = computed(() => {
|
||||||
</MkFolder>
|
return (!availableServerRules || agreeServerRules.value) && ((!availableTos && !availablePrivacyPolicy) || agreeTosAndPrivacyPolicy.value);
|
||||||
|
});
|
||||||
|
|
||||||
<MkFolder v-if="availableTos || availablePrivacyPolicy" :defaultOpen="true">
|
const emit = defineEmits<{
|
||||||
<template #label>{{ tosPrivacyPolicyLabel }}</template>
|
(ev: 'cancel'): void;
|
||||||
<template #suffix><i v-if="agreeTosAndPrivacyPolicy" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
|
(ev: 'done'): void;
|
||||||
<div class="_gaps_s">
|
}>();
|
||||||
<div v-if="availableTos"><a :href="instance.tosUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a></div>
|
|
||||||
<div v-if="availablePrivacyPolicy"><a :href="instance.privacyPolicyUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.privacyPolicy }} <i class="ti ti-external-link"></i></a></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MkSwitch :modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;" @update:modelValue="updateAgreeTosAndPrivacyPolicy">{{ i18n.ts.agree }}</MkSwitch>
|
const tosPrivacyPolicyLabel = computed(() => {
|
||||||
</MkFolder>
|
if (availableTos && availablePrivacyPolicy) {
|
||||||
|
return i18n.ts.tosAndPrivacyPolicy;
|
||||||
|
} else if (availableTos) {
|
||||||
|
return i18n.ts.termsOfService;
|
||||||
|
} else if (availablePrivacyPolicy) {
|
||||||
|
return i18n.ts.privacyPolicy;
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
<MkFolder :defaultOpen="true">
|
async function updateAgreeServerRules(v: boolean) {
|
||||||
<template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template>
|
if (v) {
|
||||||
<template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
|
const confirm = await os.confirm({
|
||||||
|
type: 'question',
|
||||||
<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>
|
title: i18n.ts.doYouAgree,
|
||||||
|
text: i18n.tsx.iHaveReadXCarefullyAndAgree({ x: i18n.ts.serverRules }),
|
||||||
<MkSwitch :modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree @update:modelValue="updateAgreeNote">{{ i18n.ts.agree }}</MkSwitch>
|
});
|
||||||
</MkFolder>
|
if (confirm.canceled) return;
|
||||||
|
agreeServerRules.value = true;
|
||||||
<div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div>
|
} else {
|
||||||
|
agreeServerRules.value = false;
|
||||||
<div class="_buttonsCenter">
|
}
|
||||||
<MkButton inline rounded @click="emit('cancel')">{{ i18n.ts.cancel }}</MkButton>
|
|
||||||
<MkButton inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue @click="emit('done')">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</MkSpacer>
|
|
||||||
</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';
|
|
||||||
|
|
||||||
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 agreed = computed(() => {
|
|
||||||
return (!availableServerRules || agreeServerRules.value) && ((!availableTos && !availablePrivacyPolicy) || agreeTosAndPrivacyPolicy.value) && agreeNote.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(ev: 'cancel'): void;
|
|
||||||
(ev: 'done'): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const tosPrivacyPolicyLabel = computed(() => {
|
|
||||||
if (availableTos && availablePrivacyPolicy) {
|
|
||||||
return i18n.ts.tosAndPrivacyPolicy;
|
|
||||||
} else if (availableTos) {
|
|
||||||
return i18n.ts.termsOfService;
|
|
||||||
} else if (availablePrivacyPolicy) {
|
|
||||||
return i18n.ts.privacyPolicy;
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
async function updateAgreeServerRules(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',
|
||||||
title: i18n.ts.doYouAgree,
|
title: i18n.ts.doYouAgree,
|
||||||
text: i18n.tsx.iHaveReadXCarefullyAndAgree({ x: i18n.ts.serverRules }),
|
text: i18n.tsx.iHaveReadXCarefullyAndAgree({
|
||||||
});
|
x: tosPrivacyPolicyLabel.value,
|
||||||
if (confirm.canceled) return;
|
}),
|
||||||
agreeServerRules.value = true;
|
});
|
||||||
} else {
|
if (confirm.canceled) return;
|
||||||
agreeServerRules.value = false;
|
agreeTosAndPrivacyPolicy.value = true;
|
||||||
|
} else {
|
||||||
|
agreeTosAndPrivacyPolicy.value = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
</script>
|
||||||
|
|
||||||
async function updateAgreeTosAndPrivacyPolicy(v: boolean) {
|
<style lang="scss" module>
|
||||||
if (v) {
|
.banner {
|
||||||
const confirm = await os.confirm({
|
padding: 16px;
|
||||||
type: 'question',
|
text-align: center;
|
||||||
title: i18n.ts.doYouAgree,
|
font-size: 26px;
|
||||||
text: i18n.tsx.iHaveReadXCarefullyAndAgree({
|
background-color: var(--MI_THEME-accentedBg);
|
||||||
x: tosPrivacyPolicyLabel.value,
|
color: var(--MI_THEME-accent);
|
||||||
}),
|
|
||||||
});
|
|
||||||
if (confirm.canceled) return;
|
|
||||||
agreeTosAndPrivacyPolicy.value = true;
|
|
||||||
} else {
|
|
||||||
agreeTosAndPrivacyPolicy.value = false;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
async function updateAgreeNote(v: boolean) {
|
.rules {
|
||||||
if (v) {
|
counter-reset: item;
|
||||||
const confirm = await os.confirm({
|
list-style: none;
|
||||||
type: 'question',
|
padding: 0;
|
||||||
title: i18n.ts.doYouAgree,
|
margin: 0;
|
||||||
text: i18n.tsx.iHaveReadXCarefullyAndAgree({ x: i18n.ts.basicNotesBeforeCreateAccount }),
|
|
||||||
});
|
|
||||||
if (confirm.canceled) return;
|
|
||||||
agreeNote.value = true;
|
|
||||||
} else {
|
|
||||||
agreeNote.value = false;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" module>
|
.rule {
|
||||||
.banner {
|
display: flex;
|
||||||
padding: 16px;
|
gap: 8px;
|
||||||
text-align: center;
|
word-break: break-word;
|
||||||
font-size: 26px;
|
|
||||||
background-color: var(--MI_THEME-accentedBg);
|
|
||||||
color: var(--MI_THEME-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules {
|
&::before {
|
||||||
counter-reset: item;
|
flex-shrink: 0;
|
||||||
list-style: none;
|
display: flex;
|
||||||
padding: 0;
|
position: sticky;
|
||||||
margin: 0;
|
top: calc(var(--MI-stickyTop, 0px) + 8px);
|
||||||
}
|
counter-increment: item;
|
||||||
|
content: counter(item);
|
||||||
.rule {
|
width: 32px;
|
||||||
display: flex;
|
height: 32px;
|
||||||
gap: 8px;
|
line-height: 32px;
|
||||||
word-break: break-word;
|
background-color: var(--MI_THEME-accentedBg);
|
||||||
|
color: var(--MI_THEME-accent);
|
||||||
&::before {
|
font-size: 13px;
|
||||||
flex-shrink: 0;
|
font-weight: bold;
|
||||||
display: flex;
|
align-items: center;
|
||||||
position: sticky;
|
justify-content: center;
|
||||||
top: calc(var(--MI-stickyTop, 0px) + 8px);
|
border-radius: var(--MI-radius-ellipse);
|
||||||
counter-increment: item;
|
}
|
||||||
content: counter(item);
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
line-height: 32px;
|
|
||||||
background-color: var(--MI_THEME-accentedBg);
|
|
||||||
color: var(--MI_THEME-accent);
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: bold;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: var(--MI-radius-ellipse);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.ruleText {
|
.ruleText {
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue