Add checkbox for user agreement

This commit is contained in:
N-Pex 2025-03-20 16:14:49 +01:00
parent 320c076d11
commit 7c0645a65e
5 changed files with 70 additions and 60 deletions

View file

@ -265,7 +265,8 @@
"logout": "Logout",
"want_more": "Want more?",
"powered_by": "This room is powered by {product}. Learn more at {productLink} or go ahead and create another room!",
"new_room": "New room"
"new_room": "New room",
"review_ua": "Review the Service User Agreement"
},
"join": {
"title": "Welcome you have been invited to join",
@ -281,7 +282,9 @@
"status_joining": "Joining room...",
"join_failed": "Failed to join room.",
"choose_name": "Choose a name to use",
"you_have_been_banned": "You have been banned from this room."
"you_have_been_banned": "You have been banned from this room.",
"accept_ua": "I agree to the {agreement}",
"ua": "service user agreement"
},
"invite": {
"title": "Add Friends",

View file

@ -37,8 +37,11 @@
<v-card-text class="with-right-label">
<div>
<div class="paragraph-bold">{{ $t('room_info.message_retention') }}</div>
<div class="caption-1-gray">{{ limitHistory ? $t('room_info.limit_history_info', {period: roomMessageRetentionDisplayString(limitHistoryMilliseconds)}) : $t('room_info.message_retention_info') }}</div>
<div v-show="limitHistory" @click="showRetentionDialog" class="paragraph paragraph-button mt-4 clickable">{{ $t('menu.edit') }}</div>
<div class="caption-1-gray">{{ limitHistory ? $t('room_info.limit_history_info', {period:
roomMessageRetentionDisplayString(limitHistoryMilliseconds)}) : $t('room_info.message_retention_info')
}}</div>
<div v-show="limitHistory" @click="showRetentionDialog"
class="paragraph paragraph-button mt-4 clickable">{{ $t('menu.edit') }}</div>
</div>
<v-switch class="ma-0" v-model="limitHistory"></v-switch>
</v-card-text>
@ -100,16 +103,29 @@
:label="$t('join.remember_me')" />
</v-col>
</v-row>
<v-row class="mt-0">
<v-col class="py-0">
<v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
<template slot="label">
<i18n path="join.accept_ua" tag="span">
<template v-slot:agreement>
<a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
</template>
</i18n>
</template>
</v-checkbox>
</v-col>
</v-row>
<v-btn color="black" depressed class="filled-button" @click.stop="onEnterRoom"
:disabled="!selectedProfile.name">
:disabled="!acceptUA || !selectedProfile.name">
{{ $t("join.enter_room") }}
</v-btn>
</v-container>
</v-card>
</v-dialog>
<MessageRetentionDialog :initialValue="limitHistoryMilliseconds" :show="selectRetentionDialog" v-on:close="selectRetentionDialog = false"
v-on:message-retention-update="onUpdateHistoryLimit" />
<MessageRetentionDialog :initialValue="limitHistoryMilliseconds" :show="selectRetentionDialog"
v-on:close="selectRetentionDialog = false" v-on:message-retention-update="onUpdateHistoryLimit" />
</div>
</template>
@ -139,7 +155,8 @@ export default {
selectRetentionDialog: false,
publicRoom: false,
limitHistory: false,
limitHistoryMilliseconds: 2 * 7 * 24 * 3600 * 1000, // 2 weeks default
limitHistoryMilliseconds: 2 * 7 * 24 * 3600 * 1000, // 2 weeks default,
acceptUA: false
};
},

View file

@ -22,27 +22,12 @@
<v-row v-if="canEditProfile">
<v-col cols="10" sm="7" class="py-0">
<v-select
ref="avatar"
:items="availableAvatars"
cache-items
outlined
dense
@change="selectAvatar"
:value="selectedProfile"
single-line
autofocus
>
<v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
:value="selectedProfile" single-line autofocus>
<template v-slot:selection>
<v-text-field
background-color="transparent"
solo
flat
hide-details
@click.native.stop="(event) => event.target.focus()"
@focus="$event.target.select()"
v-model="selectedProfile.name"
></v-text-field>
<v-text-field background-color="transparent" solo flat hide-details
@click.native.stop="(event) => event.target.focus()" @focus="$event.target.select()"
v-model="selectedProfile.name"></v-text-field>
</template>
<template v-slot:item="data">
<v-avatar size="32">
@ -51,13 +36,8 @@
<div class="ms-2">{{ data.item.name }}</div>
</template>
</v-select>
<v-checkbox
id="chk-remember-me"
class="mt-0"
v-model="rememberMe"
:label="$t('join.remember_me')"
@change="onRememberMe"
/>
<v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')"
@change="onRememberMe" />
</v-col>
<v-col cols="2" sm="5" class="py-0">
<v-avatar @click="showAvatarPicker">
@ -78,29 +58,34 @@
</v-col>
</v-row>
<v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
<template slot="label">
<i18n path="join.accept_ua" tag="span">
<template v-slot:agreement>
<a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
</template>
</i18n>
</template>
</v-checkbox>
<interactive-auth ref="interactiveAuth" />
<v-btn id="btn-join" class="btn-dark" :disabled="room && room.selfMembership == 'ban'" large @click.stop="handleJoin" :loading="loading" v-if="!currentUser">{{
<v-btn id="btn-join" class="btn-dark" :disabled="!acceptUA || (room && room.selfMembership == 'ban')" large
@click.stop="handleJoin" :loading="loading" v-if="!currentUser">{{
roomId && roomId.startsWith("@") ? $t("join.enter_room_user") : $t("join.enter_room")
}}</v-btn>
<v-btn id="btn-join" class="btn-dark" :disabled="room && room.selfMembership == 'ban'" large block @click.stop="handleJoin" :loading="loading" v-else>{{
}}</v-btn>
<v-btn id="btn-join" class="btn-dark" :disabled="!acceptUA || (room && room.selfMembership == 'ban')" large
block @click.stop="handleJoin" :loading="loading" v-else>{{
roomId && roomId.startsWith("@") ? $t("join.join_user") : $t("join.join")
}}</v-btn>
}}</v-btn>
<div v-if="loadingMessage" class="text-center">{{ loadingMessage }}</div>
<div v-if="room && room.selfMembership == 'ban'" class="text-center">{{ $t("join.you_have_been_banned") }}</div>
</div>
</div>
<input
id="room-avatar-picker"
ref="avatar"
type="file"
name="avatar"
@change="handlePickedAvatar($event)"
accept="image/*"
class="d-none"
/>
<input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
accept="image/*" class="d-none" />
<div class="join-lang">
<h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
@ -131,20 +116,12 @@
</div>
</div>
<!-- Loading indicator -->
<v-container
v-else
fluid
fill-height
class="loading-indicator transparent"
>
<!-- Loading indicator -->
<v-container v-else fluid fill-height class="loading-indicator transparent">
<v-row align="center" justify="center">
<v-col class="text-center">
<interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" />
<v-progress-circular v-else
indeterminate
color="primary"
></v-progress-circular>
<v-progress-circular v-else indeterminate color="primary"></v-progress-circular>
</v-col>
</v-row>
</v-container>
@ -178,6 +155,7 @@ export default {
selectedProfile: null,
showEditDisplaynameDialog: false,
showSelectLanguageDialog: false,
acceptUA: false,
};
},
computed: {

View file

@ -56,6 +56,8 @@
</v-btn>
</div>
</div>
<a href="./ua.html" class="review-ua-link">{{ $t("profile_info_popup.review_ua") }}</a>
</v-card-text>
</v-card>
</v-dialog>
@ -198,6 +200,16 @@ export default {
}
}
.review-ua-link {
margin-top: 10px;
text-decoration: none;
color: #181719;
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10 * $chat-text-size !important;
}
@media #{map-get($display-breakpoints, 'sm-and-up')} {
width: 70%;
}

View file

@ -138,7 +138,7 @@ router.beforeEach((to, from, next) => {
}
const roomId = util.sanitizeRoomId(to.params.roomId);
router.app.$matrix.setCurrentRoomId(roomId);
if (roomId && roomId.startsWith('#')) {
if (roomId) {
//Invite to public room
authRequired = false;
}