Merge branch 'main' of gitlab.com:keanuapp/keanuapp-weblite into main

This commit is contained in:
Nathan Freitas 2021-06-24 10:47:57 -04:00
commit fb6ba2338e
No known key found for this signature in database
GPG key ID: A801183E69B37AA9
9 changed files with 318 additions and 122 deletions

5
package-lock.json generated
View file

@ -1,11 +1,12 @@
{
"name": "keanuapp-weblite",
"version": "0.1.9",
"version": "0.1.10",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "0.1.9",
"name": "keanuapp-weblite",
"version": "0.1.10",
"dependencies": {
"aes-js": "^3.1.2",
"axios": "^0.21.0",

View file

@ -1,6 +1,6 @@
{
"name": "keanuapp-weblite",
"version": "0.1.10",
"version": "0.1.13",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

View file

@ -1,6 +1,6 @@
{
"name": "keanuapp-weblite",
"version": "0.1.9",
"version": "0.1.12",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

View file

@ -869,7 +869,7 @@ $admin-fg: white;
}
.created-room-welcome-header {
background-color: #e0e0e0;
background-color: #f5f5f5;
border-radius: 25px;
margin: 20px;
padding: 20px;
@ -891,10 +891,29 @@ $admin-fg: white;
.avatar-32 {
font-size: 18 * $chat-text-size !important;
&.clickable {
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
.avatar-48 {
font-size: 27 * $chat-text-size !important;
}
.avatar-32.clickable,
.avatar-48.clickable {
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
}
.new-room {
font-family: "Inter", sans-serif;
font-size: 16px !important;
font-weight: 600 !important;
text-decoration: underline;
color: black;
&::after {
content: "\00a0\00a0>";
display: inline-block;
text-decoration: none !important;
}
}

View file

@ -63,13 +63,13 @@
"room_list_rooms": "Rooms"
},
"room_welcome": {
"welcome": "Welcome!",
"info": "Here are a few things to know about your group:",
"info": "Welcome! Here are a few things to know about your room:",
"encrypted": "Messages are end-to-end encrypted.",
"room_history_is": "Room history is {type}.",
"room_history_joined": "People can only see the messages sent after they join.",
"join_public": "Anyone can join by opening this link: {link}.",
"join_invite": "Only people you invite can join.",
"info_permissions": "You can change 'join permissions' and 'message history' at any time in the group settings.",
"info_permissions": "You can change join permissions at any time in the room settings.",
"got_it": "Got it"
},
"new_room": {

View file

@ -1,13 +1,6 @@
<template>
<div class="created-room-welcome-header">
<div class="h4">{{ $t("room_welcome.welcome") }}</div>
<div class="mt-2">{{ $t("room_welcome.info") }}</div>
<div class="mt-2" v-if="roomIsEncrypted">
{{ $t("room_welcome.encrypted") }}
</div>
<div class="mt-2" v-if="roomHistoryDescription">
{{ roomHistoryDescription }}
</div>
<div>{{ $t("room_welcome.info") }}</div>
<div class="mt-2" v-if="roomJoinRule == 'public'">
<i18n path="room_welcome.join_public" tag="span">
<template v-slot:link>
@ -19,8 +12,14 @@
{{ $t("room_welcome.join_invite") }}
</div>
<div class="mt-2">{{ $t("room_welcome.info_permissions") }}</div>
<div class="mt-2" v-if="roomIsEncrypted">
{{ $t("room_welcome.encrypted") }}
</div>
<div class="mt-2" v-if="roomHistoryDescription">
{{ roomHistoryDescription }}
</div>
<div class="text-right">
<v-btn text @click.stop="$emit('close')">{{
<v-btn text @click.stop="$emit('close')" style="text-transform: none">{{
$t("room_welcome.got_it")
}}</v-btn>
</div>
@ -50,9 +49,7 @@ export default {
type: this.$t("message.room_history_invited"),
});
case "joined":
return this.$t("room_welcome.room_history_is", {
type: this.$t("message.room_history_joined"),
});
return this.$t("room_welcome.room_history_joined");
}
return null;
},

View file

@ -2,66 +2,112 @@
<div v-if="user" class="profile">
<div class="chat-header">
<v-container fluid>
<div class="room-name">{{$t('profile.title')}}</div>
<v-btn
text
class="header-button-right"
v-show="$navigation && $navigation.canPop()"
@click.stop="$navigation.pop"
>
<v-icon>close</v-icon>
</v-btn>
<div class="room-name">{{ $t("profile.title") }}</div>
<v-btn
text
class="header-button-right"
v-show="$navigation && $navigation.canPop()"
@click.stop="$navigation.pop"
>
<v-icon>close</v-icon>
</v-btn>
</v-container>
</div>
<v-container class="user-info">
<v-row>
<v-col class="flex-grow-0 flex-shrink-0">
<v-avatar class="avatar" size="48" color="#e0e0e0">
<img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text headline">{{
userAvatarLetter
}}</span>
<v-row>
<v-col class="flex-grow-0 flex-shrink-0">
<v-avatar
class="avatar-48 clickable"
size="48"
color="#e0e0e0"
@click="showAvatarPicker"
>
<img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<input
ref="avatar"
type="file"
name="avatar"
@change="handlePickedAvatar($event)"
accept="image/*"
style="display: none"
/>
</v-avatar>
</v-col>
<v-col class="flex-shrink-1 flex-grow-1">
<div class="h1">{{ displayName }}</div>
<div class="text-center">{{ $matrix.currentUser.user_id }}</div>
<div v-if="$matrix.currentUser.is_guest">{{$t('profile.temporary_identity')}}</div>
<v-btn depressed block class="outlined-button" @click.stop="logout">{{$t('menu.logout')}}</v-btn>
</v-col>
</v-row>
</v-container>
</v-col>
<v-col class="flex-shrink-1 flex-grow-1">
<div class="h1">{{ displayName }}</div>
<div class="text-center">{{ $matrix.currentUser.user_id }}</div>
<div v-if="$matrix.currentUser.is_guest">
{{ $t("profile.temporary_identity") }}
</div>
<v-btn depressed block class="outlined-button" @click.stop="logout">{{
$t("menu.logout")
}}</v-btn>
</v-col>
</v-row>
</v-container>
<v-container class="mt-2 pa-5">
<ActionRow @click="showEditPasswordDialog = true" :icon="'lock'" :text="$t('profile.set_password')" />
<ActionRow @click="editValue = displayName;showEditDisplaynameDialog = true" :icon="'edit'" :text="$t('profile.change_name')" />
<ActionRow
@click="showEditPasswordDialog = true"
:icon="'lock'"
:text="$t('profile.set_password')"
/>
<ActionRow
@click="
editValue = displayName;
showEditDisplaynameDialog = true;
"
:icon="'edit'"
:text="$t('profile.change_name')"
/>
</v-container>
<!-- edit password dialog -->
<v-dialog v-model="showEditPasswordDialog" class="ma-0 pa-0" width="50%">
<v-card :disabled="settingPassword">
<v-card-title>{{$t('profile.change_password')}}</v-card-title>
<v-card-title>{{ $t("profile.change_password") }}</v-card-title>
<v-card-text>
<v-text-field v-if="!$matrix.currentUser.is_guest" v-model="password" :label="$t('profile.password_old')" type="password" />
<v-text-field v-model="newPassword1" :label="$t('profile.password_new')" type="password" />
<v-text-field v-model="newPassword2" :label="$t('profile.password_repeat')" type="password" />
<div class="red--text" v-if="passwordErrorMessage">{{ passwordErrorMessage }}</div>
<v-text-field
v-if="!$matrix.currentUser.is_guest"
v-model="password"
:label="$t('profile.password_old')"
type="password"
/>
<v-text-field
v-model="newPassword1"
:label="$t('profile.password_new')"
type="password"
/>
<v-text-field
v-model="newPassword2"
:label="$t('profile.password_repeat')"
type="password"
/>
<div class="red--text" v-if="passwordErrorMessage">
{{ passwordErrorMessage }}
</div>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="closeEditPasswordDialog">{{$t('menu.cancel')}}</v-btn>
<v-btn text @click="closeEditPasswordDialog">{{
$t("menu.cancel")
}}</v-btn>
<v-btn
:disabled="!passwordsMatch"
color="primary"
text
@click="
setPassword($matrix.currentUser.is_guest ? $matrix.currentUser.password : password, newPassword1);
setPassword(
$matrix.currentUser.is_guest
? $matrix.currentUser.password
: password,
newPassword1
)
"
>{{$t('menu.ok')}}</v-btn
>{{ $t("menu.ok") }}</v-btn
>
</v-card-actions>
</v-card>
@ -70,14 +116,16 @@
<!-- edit display name dialog -->
<v-dialog v-model="showEditDisplaynameDialog" class="ma-0 pa-0" width="50%">
<v-card>
<v-card-title>{{$t('profile.display_name')}}</v-card-title>
<v-card-title>{{ $t("profile.display_name") }}</v-card-title>
<v-card-text>
<v-text-field v-model="editValue" />
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="showEditDisplaynameDialog = false">{{$t('menu.cancel')}}</v-btn>
<v-btn text @click="showEditDisplaynameDialog = false">{{
$t("menu.cancel")
}}</v-btn>
<v-btn
color="primary"
text
@ -85,7 +133,7 @@
setDisplayName(editValue);
showEditDisplaynameDialog = false;
"
>{{$t('menu.ok')}}</v-btn
>{{ $t("menu.ok") }}</v-btn
>
</v-card-actions>
</v-card>
@ -94,12 +142,17 @@
</template>
<script>
import dataUriToBuffer from "data-uri-to-buffer";
import ActionRow from "./ActionRow.vue";
import ImageResize from "image-resize";
const sizeOf = require("image-size");
//const dataUriToBuffer = require("data-uri-to-buffer");
import util from "../plugins/utils";
export default {
name: "Profile",
components: {
ActionRow
ActionRow,
},
data() {
return {
@ -110,7 +163,7 @@ export default {
newPassword1: null,
newPassword2: null,
settingPassword: false,
passwordErrorMessage: null
passwordErrorMessage: null,
};
},
@ -126,26 +179,38 @@ export default {
if (!this.user) {
return null;
}
return (this.user.displayName || this.user.userId);
return this.user.displayName || this.user.userId;
},
userAvatar() {
if (!this.user || !this.user.avatarUrl) {
return null;
}
return this.$matrix.matrixClient.mxcUrlToHttp(this.user.avatarUrl, 80, 80, 'scale', true);
return this.$matrix.matrixClient.mxcUrlToHttp(
this.user.avatarUrl,
80,
80,
"scale",
true
);
},
userAvatarLetter() {
if (!this.user) {
return null;
}
return (this.user.displayName || this.user.userId.substring(1)).substring(0, 1).toUpperCase();
return (this.user.displayName || this.user.userId.substring(1))
.substring(0, 1)
.toUpperCase();
},
passwordsMatch() {
return this.newPassword1 && this.newPassword2 && this.newPassword1 == this.newPassword2;
}
return (
this.newPassword1 &&
this.newPassword2 &&
this.newPassword1 == this.newPassword2
);
},
},
methods: {
@ -156,17 +221,20 @@ export default {
setPassword(oldPassword, newPassword) {
this.settingPassword = true;
this.passwordErrorMessage = null;
this.$matrix.setPassword(oldPassword, newPassword)
.then(success => {
console.log(success ? "Password changed" : "Failed to change password");
this.closeEditPasswordDialog();
})
.catch(error => {
this.passwordErrorMessage = error.message;
})
.finally(() => {
this.settingPassword = false;
});
this.$matrix
.setPassword(oldPassword, newPassword)
.then((success) => {
console.log(
success ? "Password changed" : "Failed to change password"
);
this.closeEditPasswordDialog();
})
.catch((error) => {
this.passwordErrorMessage = error.message;
})
.finally(() => {
this.settingPassword = false;
});
},
closeEditPasswordDialog() {
@ -175,7 +243,72 @@ export default {
this.newPassword1 = null;
this.newPassword2 = null;
this.showEditPasswordDialog = false;
}
},
showAvatarPicker() {
this.$refs.avatar.click();
},
handlePickedAvatar(event) {
const self = this;
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();
reader.onload = (e) => {
const file = event.target.files[0];
if (file.type.startsWith("image/")) {
try {
var image = e.target.result;
var dimens = sizeOf(dataUriToBuffer(e.target.result));
// Need to resize?
const w = dimens.width;
const h = dimens.height;
if (w > 640 || h > 640) {
var aspect = w / h;
var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
var newHeight = parseInt(
(w > h ? 640 / aspect : 640).toFixed()
);
var imageResize = new ImageResize({
format: "png",
width: newWidth,
height: newHeight,
outputType: "blob",
});
imageResize
.play(event.target)
.then((img) => {
var resizedImageFile = new File([img], file.name, {
type: img.type,
lastModified: Date.now(),
});
var reader2 = new FileReader();
reader2.onload = (e) => {
self.setAvatar(e.target.result);
};
reader2.readAsDataURL(resizedImageFile);
})
.catch((err) => {
console.error("Resize failed:", err);
});
} else {
self.setAvatar(image);
}
} catch (error) {
console.error("Failed to get image dimensions: " + error);
}
}
};
reader.readAsDataURL(event.target.files[0]);
}
},
setAvatar(image) {
return util.setAvatar(this.$matrix, image, function (progress) {
console.log("Progress: " + JSON.stringify(progress));
});
},
},
};
</script>

View file

@ -1,39 +1,61 @@
<template>
<v-list dense class="room-list">
<div v-if="showInvites && $matrix.invites.length > 0" class="h4">{{invitesTitle}}</div>
<v-list-item-group v-if="showInvites" v-model="currentRoomId" color="primary">
<div v-if="showInvites && $matrix.invites.length > 0" class="h4">
{{ invitesTitle }}
</div>
<v-list-item-group
v-if="showInvites"
v-model="currentRoomId"
color="primary"
>
<v-slide-y-transition group>
<v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in $matrix.invites" :key="room.roomId" :value="room.roomId">
<v-list-item-avatar size="40" color="#e0e0e0">
<v-img :src="room.avatar" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ room.name || room.summary.info.title }}</v-list-item-title>
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn @click.stop="acceptInvitation(room)" icon><v-icon>check_circle</v-icon></v-btn>
<v-btn @click.stop="rejectInvitation(room)" icon><v-icon>cancel</v-icon></v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
:disabled="roomsProcessing[room.roomId]"
v-for="room in $matrix.invites"
:key="room.roomId"
:value="room.roomId"
>
<v-list-item-avatar size="40" color="#e0e0e0">
<v-img :src="room.avatar" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{
room.name || room.summary.info.title
}}</v-list-item-title>
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn @click.stop="acceptInvitation(room)" icon
><v-icon>check_circle</v-icon></v-btn
>
<v-btn @click.stop="rejectInvitation(room)" icon
><v-icon>cancel</v-icon></v-btn
>
</v-list-item-action>
</v-list-item>
</v-slide-y-transition>
</v-list-item-group>
<div class="h4">{{title}}</div>
<div class="h4">{{ title }}</div>
<v-list-item-group v-model="currentRoomId" color="primary">
<v-list-item v-if="showCreate" @click.stop="$emit('newroom')">
<v-list-item-avatar size="40" color="#e0e0e0">
<v-img />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{$t('menu.new_room')}}</v-list-item-title>
<v-list-item-title class="new-room">{{
$t("menu.new_room")
}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-for="room in $matrix.joinedRooms" :key="room.roomId" :value="room.roomId">
<v-list-item
v-for="room in $matrix.joinedRooms"
:key="room.roomId"
:value="room.roomId"
>
<v-list-item-avatar size="40" color="#e0e0e0">
<v-img :src="room.avatar" />
</v-list-item-avatar>
<div class="room-list-notification-count">{{ notificationCount(room) }}</div>
<div class="room-list-notification-count">
{{ notificationCount(room) }}
</div>
<v-list-item-content>
<v-list-item-title>{{ room.summary.info.title }}</v-list-item-title>
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
@ -45,7 +67,7 @@
<script>
import util from "../plugins/utils";
import Vue from 'vue';
import Vue from "vue";
export default {
name: "RoomList",
@ -53,20 +75,20 @@ export default {
props: {
title: {
type: String,
default: "Rooms"
default: "Rooms",
},
invitesTitle: {
type: String,
default: "Invites"
default: "Invites",
},
showInvites: {
type: Boolean,
default: false
default: false,
},
showCreate: {
type: Boolean,
default: false
}
default: false,
},
},
data: () => ({
@ -77,18 +99,23 @@ export default {
methods: {
notificationCount(room) {
return room.getUnreadNotificationCount('total') || 0;
return room.getUnreadNotificationCount("total") || 0;
},
acceptInvitation(room) {
Vue.set(this.roomsProcessing, room.roomId, true);
this.$matrix.matrixClient.joinRoom(room.roomId)
this.$matrix.matrixClient
.joinRoom(room.roomId)
.then((ignoredRoom) => {
this.$nextTick(() => {
this.$navigation.push(
{
name: "Chat",
params: { roomId: util.sanitizeRoomId(room.getCanonicalAlias() || room.roomId) },
params: {
roomId: util.sanitizeRoomId(
room.getCanonicalAlias() || room.roomId
),
},
},
-1
);
@ -104,7 +131,8 @@ export default {
rejectInvitation(room) {
Vue.set(this.roomsProcessing, room.roomId, true);
this.$matrix.leaveRoom(room.roomId)
this.$matrix
.leaveRoom(room.roomId)
.catch((err) => {
console.error("Failed to reject invite: ", err);
})
@ -121,7 +149,13 @@ export default {
return;
}
this.$emit("close");
this.$navigation.push({name: 'Chat', params: { roomId: util.sanitizeRoomId(this.currentRoomId) }}, -1);
this.$navigation.push(
{
name: "Chat",
params: { roomId: util.sanitizeRoomId(this.currentRoomId) },
},
-1
);
},
},
};

View file

@ -14,6 +14,15 @@ export default {
throw new Error('Please initialise plugin with a Vuex store.')
}
// Set User-Agent headers.
// Update: browser do not allow this, "Refused to set unsafe header "User-Agent""
// Keep this code around however, since it's an example of how to add headers to a request...
// sdk.wrapRequest((orig, opts, callback) => {
// opts.headers = opts.headers || {}
// opts.headers['User-Agent'] = "Keanu";
// var ret = orig(opts, callback);
// return ret;
// });
const store = options.store;
const i18n = options.i18n;
@ -107,6 +116,7 @@ export default {
promiseLogin = tempMatrixClient
.register(user, pass, null, {
type: "m.login.dummy",
initial_device_display_name: config.appName
})
.then((response) => {
console.log("Response", response);
@ -116,7 +126,7 @@ export default {
return response;
})
} else {
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password" };
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
if (user.device_id) {
data.device_id = user.device_id;
}
@ -584,8 +594,9 @@ export default {
// Is the other member the one we are looking for?
if (this.isDirectRoomWith(room, userId)) {
var member = room.getMember(userId);
if (member && member.membership == "invite") {
// TODO Resend invite
if (member && member.membership != "join") {
// Resend invite
this.matrixClient.invite(room.roomId, userId);
}
resolve(room);
return;
@ -721,6 +732,7 @@ export default {
clientPromise = tempMatrixClient
.register(user, pass, null, {
type: "m.login.dummy",
initial_device_display_name: config.appName
})
.then((response) => {
console.log("Response", response);
@ -733,7 +745,7 @@ export default {
// Get an access token
clientPromise = clientPromise.then(user => {
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password" };
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
if (user.device_id) {
data.device_id = user.device_id;
}