N-Pex
parent
b7f25d0631
commit
66b108bc70
2 changed files with 203 additions and 64 deletions
|
|
@ -891,10 +891,16 @@ $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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue