Merge branch '376-allow-creation-of-new-direct-chat-using-matrix-id' into 'dev'
Don't redirect to login page if we have no account See merge request keanuapp/keanuapp-weblite!127
This commit is contained in:
N Pex
commit
0602c4c72f
3 changed files with 119 additions and 72 deletions
|
|
@ -18,18 +18,41 @@
|
|||
</div>
|
||||
|
||||
<hr class="my-10 join-line" />
|
||||
<div class="font-weight-black mb-2" v-if="!currentUser">Choose a name to use.</div>
|
||||
<div class="font-weight-black mb-4" v-if="!currentUser">Choose a name to use.</div>
|
||||
|
||||
<v-row v-if="canEditProfile">
|
||||
<v-col cols="10" sm="7">
|
||||
<v-text-field
|
||||
solo
|
||||
@click.native.stop="
|
||||
{
|
||||
}
|
||||
"
|
||||
v-model="selectedProfile.name"
|
||||
></v-text-field>
|
||||
<v-col cols="10" sm="7" class="py-0">
|
||||
<v-select
|
||||
ref="avatar"
|
||||
:items="availableAvatars"
|
||||
cache-items
|
||||
outlined
|
||||
dense
|
||||
@change="selectAvatar"
|
||||
:value="availableAvatars[0]"
|
||||
single-line
|
||||
autofocus
|
||||
>
|
||||
<template v-slot:selection>
|
||||
<v-text-field
|
||||
background-color="transparent"
|
||||
solo
|
||||
flat
|
||||
hide-details
|
||||
@click.native.stop="
|
||||
{
|
||||
}
|
||||
"
|
||||
v-model="selectedProfile.name"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<template v-slot:item="data">
|
||||
<v-avatar size="32">
|
||||
<v-img :src="data.item.image" />
|
||||
</v-avatar>
|
||||
<div class="ms-2">{{ data.item.name }}</div>
|
||||
</template>
|
||||
</v-select>
|
||||
<v-checkbox
|
||||
id="chk-remember-me"
|
||||
class="mt-0"
|
||||
|
|
@ -38,8 +61,8 @@
|
|||
@change="onRememberMe"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="2" sm="5">
|
||||
<v-avatar @click="showAvatarPickerList">
|
||||
<v-col cols="2" sm="5" class="py-0">
|
||||
<v-avatar @click="showAvatarPicker">
|
||||
<v-img v-if="selectedProfile" :src="selectedProfile.image" />
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
|
|
@ -68,6 +91,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<v-row class="align-center">
|
||||
|
|
@ -232,8 +265,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
removeHomeServer(roomName) {
|
||||
let lastIndexDash = roomName.lastIndexOf("-");
|
||||
let lastIndex = lastIndexDash > 0 ? lastIndexDash : roomName.lastIndexOf(":");
|
||||
let lastIndex = roomName.lastIndexOf(":");
|
||||
if (roomName && roomName.startsWith("@")) {
|
||||
return roomName.substring(roomName.indexOf("@") + 1, lastIndex);
|
||||
}
|
||||
return roomName ? roomName.substring(roomName.indexOf("#") + 1, lastIndex) : "";
|
||||
},
|
||||
getRoomInfo() {
|
||||
|
|
@ -375,8 +410,14 @@ export default {
|
|||
this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data
|
||||
},
|
||||
|
||||
showAvatarPickerList() {
|
||||
this.$refs.avatar.$refs.input.click();
|
||||
showAvatarPicker() {
|
||||
this.$refs.avatar.click();
|
||||
},
|
||||
|
||||
handlePickedAvatar(event) {
|
||||
util.loadAvatarFromFile(event, (image) => {
|
||||
this.selectedProfile.image = image;
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -197,11 +197,7 @@
|
|||
|
||||
<script>
|
||||
import SelectLanguageDialog from "./SelectLanguageDialog.vue";
|
||||
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";
|
||||
import profileInfoMixin from "./profileInfoMixin";
|
||||
import LogoutRoomDialog from './LogoutRoomDialog.vue';
|
||||
|
|
@ -318,58 +314,9 @@ export default {
|
|||
},
|
||||
|
||||
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]);
|
||||
}
|
||||
util.loadAvatarFromFile(event, (image) => {
|
||||
this.setAvatar(image);
|
||||
});
|
||||
},
|
||||
setAvatar(image) {
|
||||
const self = this;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import axios from 'axios';
|
||||
import * as ContentHelpers from "matrix-js-sdk/lib/content-helpers";
|
||||
import dataUriToBuffer from "data-uri-to-buffer";
|
||||
import ImageResize from "image-resize";
|
||||
|
||||
const sizeOf = require("image-size");
|
||||
|
||||
var dayjs = require('dayjs');
|
||||
var sha256 = require('js-sha256').sha256;
|
||||
var aesjs = require('aes-js');
|
||||
|
|
@ -597,6 +602,60 @@ class Util {
|
|||
});
|
||||
}
|
||||
|
||||
loadAvatarFromFile(event, onLoad) {
|
||||
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) => {
|
||||
onLoad(e.target.result);
|
||||
};
|
||||
reader2.readAsDataURL(resizedImageFile);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Resize failed:", err);
|
||||
});
|
||||
} else {
|
||||
onLoad(image);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to get image dimensions: " + error);
|
||||
}
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Return number of whole days between the timestamps, at end of that day.
|
||||
* @param {*} ts1
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue