Initial commit
This commit is contained in:
N-Pex
parent
60df431f80
commit
fd332bda79
22 changed files with 13206 additions and 0 deletions
271
src/components/Chat.vue
Normal file
271
src/components/Chat.vue
Normal file
|
|
@ -0,0 +1,271 @@
|
|||
<template>
|
||||
<div class="chat-root fill-height d-flex flex-column" ma-0 pa-0>
|
||||
<div
|
||||
class="chat-content flex-grow-1 flex-shrink-1"
|
||||
ref="chatContainer"
|
||||
style="overflow-x: hidden; overflow-y: auto"
|
||||
>
|
||||
<div v-for="(event, index) in events" :key="index">
|
||||
<!-- Contact joined the chat -->
|
||||
<div
|
||||
class="messageJoin"
|
||||
v-if="
|
||||
event.event.state_key != myAddress &&
|
||||
event.getContent().membership == 'join' &&
|
||||
event.getType() == 'm.room.member'
|
||||
"
|
||||
>
|
||||
{{ stateEventDisplayName(event) }} joined the chat
|
||||
</div>
|
||||
|
||||
<!-- Contact left the chat -->
|
||||
<div
|
||||
class="messageJoin"
|
||||
v-if="
|
||||
event.event.state_key != myAddress &&
|
||||
event.getContent().membership == 'leave' &&
|
||||
event.getType() == 'm.room.member'
|
||||
"
|
||||
>
|
||||
{{ stateEventDisplayName(event) }} left the chat
|
||||
</div>
|
||||
|
||||
<!-- Contact invited to the chat -->
|
||||
<div
|
||||
class="messageJoin"
|
||||
v-if="
|
||||
event.event.state_key != myAddress &&
|
||||
event.getContent().membership == 'invite' &&
|
||||
event.getType() == 'm.room.member'
|
||||
"
|
||||
>
|
||||
{{ stateEventDisplayName(event) }} was invited to the chat...
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
event.getSender() != myAddress &&
|
||||
event.getType() == 'm.room.message'
|
||||
"
|
||||
>
|
||||
<div class="messageIn">
|
||||
<div class="sender">{{ event.getSender() }}</div>
|
||||
<div class="bubble">
|
||||
<div class="message">{{ event.getContent().body }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{ formatTime(event.event.origin_server_ts) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="event.getType() == 'm.room.message'">
|
||||
<div class="messageOut">
|
||||
<div class="sender">{{ "You" }}</div>
|
||||
<div class="bubble">
|
||||
<div class="message">{{ event.getContent().body }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{ formatTime(event.event.origin_server_ts) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CONTACT IS TYPING -->
|
||||
<div v-show="contactIsTyping" class="typing">Someone is typing...</div>
|
||||
</div>
|
||||
|
||||
<!-- Input area -->
|
||||
<div class="input-area flex-grow-0 flex-shrink-0">
|
||||
<v-textarea
|
||||
ref="messageInput"
|
||||
full-width
|
||||
v-model="currentInput"
|
||||
no-resize
|
||||
class="input-message"
|
||||
placeholder="Send message"
|
||||
hide-details
|
||||
></v-textarea>
|
||||
<div align-self="end" class="text-right">
|
||||
<v-btn
|
||||
elevation="0"
|
||||
@click.stop="sendMessage"
|
||||
:disabled="sendButtonDisabled"
|
||||
>Send</v-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Chat",
|
||||
|
||||
data: () => ({
|
||||
events: [],
|
||||
currentInput: "",
|
||||
contactIsTyping: false,
|
||||
}),
|
||||
|
||||
computed: {
|
||||
room() {
|
||||
return this.$store.state.currentRoom;
|
||||
},
|
||||
roomId() {
|
||||
return this.room != null ? this.room.roomId : null;
|
||||
},
|
||||
sendButtonDisabled() {
|
||||
return this.currentInput.length == 0;
|
||||
},
|
||||
myAddress() {
|
||||
// TODO
|
||||
return "@npex2:neo.keanu.im";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
room() {
|
||||
console.log("Chat: Current room changed");
|
||||
|
||||
// Clear old events
|
||||
this.events = [];
|
||||
|
||||
// Remove all old room listeners
|
||||
this.$matrixClient.removeAllListeners("Room.timeline");
|
||||
this.$matrixClient.removeAllListeners("RoomMember.typing");
|
||||
|
||||
this.contactIsTyping = false;
|
||||
|
||||
if (!this.room) {
|
||||
return; // no room
|
||||
}
|
||||
|
||||
this.room.timeline.forEach((event) => {
|
||||
this.handleMatrixEvent(event);
|
||||
});
|
||||
|
||||
// Add event listener for this room
|
||||
this.$matrixClient.on(
|
||||
"Room.timeline",
|
||||
function (event, ignoredroom, ignoredtoStartOfTimeline) {
|
||||
if (event.getRoomId() !== this.roomId) {
|
||||
return; // Not for this room
|
||||
}
|
||||
if (this.handleMatrixEvent(event)) {
|
||||
this.$nextTick(function () {
|
||||
const container = this.$refs.chatContainer;
|
||||
if (container.children.length > 0) {
|
||||
const lastChild =
|
||||
container.children[container.children.length - 1];
|
||||
console.log("Scroll into view", lastChild);
|
||||
window.requestAnimationFrame(() => {
|
||||
lastChild.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "end",
|
||||
inline: "nearest",
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
this.$matrixClient.on(
|
||||
"RoomMember.typing",
|
||||
function (event, member) {
|
||||
if (member.userId == this.contactAddress) {
|
||||
this.contactIsTyping = member.typing;
|
||||
}
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Handle a matrix event. Add it to our array if valid type.
|
||||
* @returns True if the event was added, false otherwise.
|
||||
*/
|
||||
handleMatrixEvent(event) {
|
||||
console.log("Type is", event.getType());
|
||||
|
||||
if (event.getType() == "m.room.encryption") {
|
||||
this.$root.matrixClient.setRoomEncryption(
|
||||
event.event.room_id,
|
||||
event.getContent()
|
||||
);
|
||||
}
|
||||
|
||||
const allowedEvents = [
|
||||
"m.room.message",
|
||||
"m.room.member",
|
||||
"m.room.encrypted",
|
||||
];
|
||||
if (allowedEvents.includes(event.getType())) {
|
||||
console.log("Add event", event);
|
||||
this.events.push(event);
|
||||
return true;
|
||||
} else {
|
||||
console.log("Ignore event", event);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get a display name given an event.
|
||||
*/
|
||||
stateEventDisplayName(event) {
|
||||
return event.getContent().displayname || event.event.state_key;
|
||||
},
|
||||
|
||||
sendMessage() {
|
||||
if (this.currentInput.length > 0) {
|
||||
this.sendMatrixMessage(this.currentInput);
|
||||
this.currentInput = "";
|
||||
}
|
||||
},
|
||||
|
||||
sendMatrixMessage(body) {
|
||||
// Send chat message sent event
|
||||
window.logtag("event", "chat_message_sent", {
|
||||
event_category: "chat",
|
||||
});
|
||||
|
||||
var content = {
|
||||
body: body,
|
||||
msgtype: "m.notice",
|
||||
};
|
||||
this.$root.matrixClient.sendEvent(
|
||||
this.currentRoomId,
|
||||
"m.room.message",
|
||||
content,
|
||||
"",
|
||||
(err, ignoredres) => {
|
||||
console.log(err);
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
formatTime(time) {
|
||||
const date = new Date();
|
||||
date.setTime(time);
|
||||
|
||||
const today = new Date();
|
||||
if (
|
||||
date.getDate() == today.getDate() &&
|
||||
date.getMonth() == today.getMonth() &&
|
||||
date.getFullYear() == today.getFullYear()
|
||||
) {
|
||||
// For today, skip the date part
|
||||
return date.toLocaleTimeString();
|
||||
}
|
||||
return date.toLocaleString();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
122
src/components/Login.vue
Normal file
122
src/components/Login.vue
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="d-flex justify-center">
|
||||
<v-card class="ma-8 pa-4" style="min-width: 400px; max-width: 400px" flat>
|
||||
<v-card-title primary-title>
|
||||
<h4>Login</h4>
|
||||
</v-card-title>
|
||||
<v-form v-model="isValid">
|
||||
<v-text-field
|
||||
prepend-icon="mdi-account"
|
||||
v-model="user.username"
|
||||
label="Username"
|
||||
:rules="[(v) => !!v || 'Username is required']"
|
||||
:error="userErrorMessage != null"
|
||||
:error-messages="userErrorMessage"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
prepend-icon="mdi-lock"
|
||||
v-model="user.password"
|
||||
label="Password"
|
||||
type="password"
|
||||
:rules="[(v) => !!v || 'Password is required']"
|
||||
:error="passErrorMessage != null"
|
||||
:error-messages="passErrorMessage"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
:disabled="!isValid || loading"
|
||||
primary
|
||||
large
|
||||
block
|
||||
@click.stop="handleLogin"
|
||||
:loading="loading"
|
||||
>Login</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-form>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import User from "../models/user";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
user: new User("https://neo.keanu.im", "", ""),
|
||||
isValid: true,
|
||||
loading: false,
|
||||
message: "",
|
||||
userErrorMessage: null,
|
||||
passErrorMessage: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.state.auth.status.loggedIn;
|
||||
},
|
||||
currentUser() {
|
||||
return this.$store.state.auth.user;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.loggedIn) {
|
||||
this.$router.push("/profile");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
user: {
|
||||
handler() {
|
||||
// Reset manual errors
|
||||
this.userErrorMessage = null;
|
||||
this.passErrorMessage = null;
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
message() {
|
||||
if (
|
||||
this.message &&
|
||||
this.message.message &&
|
||||
this.message.message.toLowerCase().includes("user")
|
||||
) {
|
||||
this.userErrorMessage = this.message.message;
|
||||
} else {
|
||||
this.userErrorMessage = null;
|
||||
}
|
||||
if (
|
||||
this.message &&
|
||||
this.message.message &&
|
||||
this.message.message.toLowerCase().includes("pass")
|
||||
) {
|
||||
this.passErrorMessage = this.message.message;
|
||||
} else {
|
||||
this.passErrorMessage = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
if (this.user.username && this.user.password) {
|
||||
this.loading = true;
|
||||
const self = this;
|
||||
this.$store.dispatch("auth/login", this.user).then(
|
||||
() => {
|
||||
self.$router.replace({ name: "Chat" });
|
||||
},
|
||||
(error) => {
|
||||
this.loading = false;
|
||||
this.message =
|
||||
(error.response && error.response.data) ||
|
||||
error.message ||
|
||||
error.toString();
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
93
src/components/RoomList.vue
Normal file
93
src/components/RoomList.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<v-list flat>
|
||||
<v-subheader>ROOMS</v-subheader>
|
||||
<v-list-item-group v-model="currentRoomIndex" color="primary">
|
||||
<v-list-item v-for="(room, i) in rooms" :key="i">
|
||||
<v-list-item-icon>
|
||||
<v-icon v-text="room.icon"></v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title
|
||||
v-text="room.summary.info.title"
|
||||
></v-list-item-title>
|
||||
<v-list-item-content
|
||||
>Topic: {{ room.summary.info.desc }}</v-list-item-content
|
||||
>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
<v-btn @click="reloadRooms">Refresh</v-btn>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RoomList",
|
||||
|
||||
data: () => ({
|
||||
rooms: [],
|
||||
currentRoomIndex: -1,
|
||||
}),
|
||||
|
||||
mounted() {
|
||||
this.reloadRooms();
|
||||
this.$matrixClient.on("Room.name", this.onRoomNameChanged);
|
||||
this.$matrixClient.on("event", this.onEvent);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
this.$matrixClient.off("Room.name", this.onRoomNameChanged);
|
||||
this.$matrixClient.off("event", this.onEvent);
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentRoomIndex() {
|
||||
var currentRoom =
|
||||
this.currentRoomIndex >= 0 && this.currentRoomIndex < this.rooms.length
|
||||
? this.rooms[this.currentRoomIndex]
|
||||
: null;
|
||||
this.$emit("onCurrentRoomChanged", currentRoom);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onEvent(event) {
|
||||
if (event.getType() == "m.room.topic") {
|
||||
const room = this.rooms.find((r) => {
|
||||
return (r.roomId == event.getRoomId());
|
||||
})
|
||||
if (room) {
|
||||
room.summary.info.desc = event.getContent().topic;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const allowedEvents = [
|
||||
"m.room.message"
|
||||
];
|
||||
if (allowedEvents.includes(event.getType())) {
|
||||
// TODO - find "last message"...
|
||||
}
|
||||
},
|
||||
|
||||
onRoomNameChanged(room) {
|
||||
console.log("New name for room: " + room.name);
|
||||
},
|
||||
|
||||
reloadRooms() {
|
||||
var rooms = this.$matrixClient.getVisibleRooms();
|
||||
rooms.forEach((room) => {
|
||||
console.log("Room", room);
|
||||
});
|
||||
this.rooms = rooms;
|
||||
|
||||
// Default to first room if available
|
||||
if (this.rooms.length > 0 && this.currentRoomIndex == -1) {
|
||||
this.currentRoomIndex = 0;
|
||||
} else if (this.rooms.length == 0) {
|
||||
this.currentRoomIndex = -1;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue