butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Work on profile and login

Browse source
This commit is contained in:
N-Pex 2021-01-21 16:31:37 +01:00
parent 2708e58161
commit 4dac049664
4 changed files with 114 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/assets/css/chat.scss
View file

@ -528,10 +528,29 @@ $admin-fg: white;
border-radius: 20px;
}
.user-info {
display: flex;
flex-wrap: nowrap;
max-width: 40%;
}
.show-all {
color: black;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
}
.action {
padding: 4px 20px;
&::after {
content: ' ';
display: block;
margin: 10px 0px;
bottom: 0px;
height: 1px;
background-color: #e1e1e1;
width: 100%;
}
}
}

4
src/assets/css/login.scss
View file

@ -6,9 +6,9 @@
top: 0px;
right: 0px;
bottom: 0px;
width: 100%;
width: 80%;
height: 100%;
padding: 0;
margin: 0;
margin: 10%;
background-color: $background;
}

18
src/components/Login.vue
View file

@ -5,7 +5,7 @@
</v-btn>
<div color="rgba(255,255,255,0.1)" class="text-center">
<h4>Login</h4>
<div class="h2">Login</div>
<v-form v-model="isValid">
<v-text-field
v-model="user.username"
@ -90,19 +90,17 @@ export default {
message() {
if (
this.message &&
this.message.message &&
this.message.message.toLowerCase().includes("user")
this.message.toLowerCase().includes("user")
) {
this.userErrorMessage = this.message.message;
this.userErrorMessage = this.message;
} else {
this.userErrorMessage = null;
}
if (
this.message &&
this.message.message &&
this.message.message.toLowerCase().includes("pass")
this.message.toLowerCase().includes("pass")
) {
this.passErrorMessage = this.message.message;
this.passErrorMessage = this.message;
} else {
this.passErrorMessage = null;
}
@ -112,6 +110,9 @@ export default {
handleLogin() {
if (this.user.username && this.user.password) {
// Reset errors
this.message = null;
// Is it a full matrix user id? Modify a copy, so that the UI will still show the full ID.
var user = Object.assign({}, this.user);
if (user.username.startsWith('@') && user.username.includes(':')) {
@ -128,9 +129,10 @@ export default {
(error) => {
this.loading = false;
this.message =
(error.response && error.response.data) ||
(error.data && error.data.error) ||
error.message ||
error.toString();
console.log("Message set to ", this.message);
}
);
}

98
src/components/Profile.vue
View file

@ -15,25 +15,70 @@
</v-container>
</div>
<div @click="showEditDialog = true"><v-icon>lock</v-icon><span>Set password</span></div>
<!-- EDIT dialog -->
<v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
<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-avatar>
</v-col>
<v-col class="flex-shrink-1 flex-grow-1">
<div class="h1">{{ displayName }}</div>
<div v-if="$matrix.currentUser.is_guest">
This identity is temporary. Set a password to use it again.
</div>
</v-col>
</v-row>
</v-container>
<div class="action" @click="showEditPasswordDialog = true"><v-icon>lock</v-icon><span>Set password</span></div>
<div class="action" @click="editValue = displayName;showEditDisplaynameDialog = true"><v-icon>edit</v-icon><span>Change name</span></div>
<!-- edit password dialog -->
<v-dialog v-model="showEditPasswordDialog" class="ma-0 pa-0" width="50%">
<v-card>
<v-card-title>Display name</v-card-title>
<v-card-title>Change password</v-card-title>
<v-card-text>
<v-text-field v-model="displayName" />
Not yet implemented.
<!-- <v-text-field v-model="password" /> -->
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="showEditDialog = false">Cancel</v-btn>
<v-btn text @click="showEditPasswordDialog = false">Cancel</v-btn>
<v-btn
color="primary"
text
@click="
$matrix.matrixClient.setDisplayName(displayName);
showEditDialog = false;
showEditPasswordDialog = false;
"
>Ok</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
<!-- edit display name dialog -->
<v-dialog v-model="showEditDisplaynameDialog" class="ma-0 pa-0" width="50%">
<v-card>
<v-card-title>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">Cancel</v-btn>
<v-btn
color="primary"
text
@click="
setDisplayName(editValue);
showEditDisplaynameDialog = false;
"
>Ok</v-btn
>
@ -49,16 +94,14 @@ export default {
data() {
return {
memberCount: null,
showEditDialog: false,
user: null,
displayName: "",
showEditPasswordDialog: false,
showEditDisplaynameDialog: false,
editValue: null,
};
},
mounted() {
this.$matrix.on("Room.timeline", this.onEvent);
this.updateMemberCount();
this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
this.displayName = this.user.displayName;
},
destroyed() {
@ -69,6 +112,31 @@ export default {
room() {
return this.$matrix.currentRoom;
},
user() {
return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
},
displayName() {
if (!this.user) {
return null;
}
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);
},
userAvatarLetter() {
if (!this.user) {
return null;
}
return (this.user.displayName || this.user.userId.substring(1)).substring(0, 1).toUpperCase();
}
},
watch: {
@ -109,8 +177,8 @@ export default {
return null;
},
viewProfile() {
setDisplayName(name) {
this.$matrix.matrixClient.setDisplayName(name);
},
upgradeAccount() {