Initial commit
This commit is contained in:
N-Pex
parent
60df431f80
commit
fd332bda79
22 changed files with 13206 additions and 0 deletions
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw*
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
12101
package-lock.json
generated
Normal file
12101
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
63
package.json
Normal file
63
package.json
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
{
|
||||||
|
"name": "keanuapp-weblite",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"material-design-icons-iconfont": "^5.0.1",
|
||||||
|
"matrix-js-sdk": "^9.0.1",
|
||||||
|
"olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
|
||||||
|
"roboto-fontface": "*",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-router": "^3.2.0",
|
||||||
|
"vuetify": "^2.2.11",
|
||||||
|
"vuex": "^3.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"sass": "^1.19.0",
|
||||||
|
"sass-loader": "^8.0.0",
|
||||||
|
"vue-cli-plugin-vuetify": "~2.0.7",
|
||||||
|
"vue-template-compiler": "^2.6.11",
|
||||||
|
"vuetify-loader": "^1.3.0"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"vars": "all",
|
||||||
|
"args": "after-used",
|
||||||
|
"ignoreRestSiblings": false,
|
||||||
|
"argsIgnorePattern": "[iI]gnored"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
18
public/index.html
Normal file
18
public/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/js/olm.wasm
Normal file
BIN
public/js/olm.wasm
Normal file
Binary file not shown.
116
src/App.vue
Normal file
116
src/App.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
<template>
|
||||||
|
<v-app>
|
||||||
|
<v-app-bar app dark>
|
||||||
|
<v-app-bar-nav-icon @click.stop="openDrawer = !openDrawer">
|
||||||
|
<v-icon>menu</v-icon>
|
||||||
|
</v-app-bar-nav-icon>
|
||||||
|
|
||||||
|
<v-toolbar-title
|
||||||
|
>Keanu{{ room ? " - " + room.name : "" }}</v-toolbar-title
|
||||||
|
>
|
||||||
|
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
|
<template v-if="!currentUser && $route.path != '/login'">
|
||||||
|
<v-btn color="green" dark to="/login" replace
|
||||||
|
><v-icon>mdi-login</v-icon>Login</v-btn
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="currentUser">
|
||||||
|
<span class="ma-2">{{ currentUser.name }}</span>
|
||||||
|
<v-menu bottom left>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-btn dark icon v-bind="attrs" v-on="on">
|
||||||
|
<v-icon>settings</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-list>
|
||||||
|
<v-list-item @click.prevent="logOut">
|
||||||
|
<v-list-item-icon><v-icon>logout</v-icon></v-list-item-icon>
|
||||||
|
<v-list-item-title>Logout</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
<!-- <v-btn color="green" dark @click.prevent="logOut" replace><v-icon>mdi-logout</v-icon>Logout</v-btn> -->
|
||||||
|
</template>
|
||||||
|
</v-app-bar>
|
||||||
|
|
||||||
|
<v-navigation-drawer app v-model="openDrawer">
|
||||||
|
<v-list nav dense>
|
||||||
|
<RoomList
|
||||||
|
v-if="$matrixClient != null"
|
||||||
|
v-on:onCurrentRoomChanged="onCurrentRoomChanged"
|
||||||
|
/>
|
||||||
|
</v-list>
|
||||||
|
</v-navigation-drawer>
|
||||||
|
|
||||||
|
<v-main>
|
||||||
|
<router-view />
|
||||||
|
</v-main>
|
||||||
|
|
||||||
|
<v-footer app class="copyright">Powered by Guardian Project</v-footer>
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";
|
||||||
|
import RoomList from "./components/RoomList";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
components: {
|
||||||
|
RoomList,
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
openDrawer: false,
|
||||||
|
currentRoom: null,
|
||||||
|
}),
|
||||||
|
mounted() {
|
||||||
|
this.$router.replace("/");
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loggedIn() {
|
||||||
|
return this.$store.state.auth.status.loggedIn;
|
||||||
|
},
|
||||||
|
logOut() {
|
||||||
|
this.$store.dispatch("auth/logout");
|
||||||
|
this.$router.replace("/login");
|
||||||
|
this.$store.commit("setCurrentRoom", null);
|
||||||
|
},
|
||||||
|
onCurrentRoomChanged(room) {
|
||||||
|
this.$store.commit("setCurrentRoom", room);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentUser() {
|
||||||
|
return this.$store.state.auth.user;
|
||||||
|
},
|
||||||
|
room() {
|
||||||
|
return this.$store.state.currentRoom;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentUser: {
|
||||||
|
immediate: true,
|
||||||
|
handler(ignorednewVal, ignoredoldVal) {
|
||||||
|
if (this.loggedIn) {
|
||||||
|
this.$matrix.getMatrixClient(this.currentUser)
|
||||||
|
.then((matrixClient) => {
|
||||||
|
Vue.prototype.$matrixClient = matrixClient;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("Error creating client", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.copyright {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
151
src/assets/css/chat.scss
Normal file
151
src/assets/css/chat.scss
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
$chat-background: #f5fdf5;
|
||||||
|
$chat-standard-padding: 32px;
|
||||||
|
$chat-standard-padding-s: 16px;
|
||||||
|
$chat-standard-padding-xs: 8px;
|
||||||
|
$chat-text-size: 0.7pt;
|
||||||
|
|
||||||
|
.chat-root {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
background-color: $chat-background;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.chat-content {
|
||||||
|
margin: 0;
|
||||||
|
padding-top: $chat-standard-padding-s;
|
||||||
|
padding-left: $chat-standard-padding-s;
|
||||||
|
padding-bottom: $chat-standard-padding-s;
|
||||||
|
padding-right: $chat-standard-padding-s;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
/* Track */
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: #cccccc;
|
||||||
|
}
|
||||||
|
/* Handle */
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
/* Handle on hover */
|
||||||
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #4d4d4d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-btn {
|
||||||
|
font-family: 'Titillium Web', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 17 * $chat-text-size;
|
||||||
|
color: white;
|
||||||
|
background-color: #00eea0 !important;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
height: $chat-standard-padding;
|
||||||
|
margin-top: $chat-standard-padding-xs;
|
||||||
|
margin-bottom: $chat-standard-padding-xs;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area {
|
||||||
|
background-color: #cccccc;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: $chat-standard-padding-s;
|
||||||
|
padding-right: $chat-standard-padding-s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-message {
|
||||||
|
font-family: 'Titillium Web', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 15 * $chat-text-size;
|
||||||
|
font-style: italic;
|
||||||
|
height: 3 * $chat-standard-padding-s;
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
margin: $chat-standard-padding-xs 0 0 0;
|
||||||
|
color: #999999;
|
||||||
|
background-color: #ffffff;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
border-radius: 0;
|
||||||
|
.v-input__slot {
|
||||||
|
/* Remove text underline */
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
.v-text-field__slot {
|
||||||
|
padding: 0;
|
||||||
|
max-height: 3 * $chat-standard-padding-s;
|
||||||
|
height: 3 * $chat-standard-padding-s;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
line-height: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.messageJoin,
|
||||||
|
.typing {
|
||||||
|
font-family: 'Titillium Web', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 15 * $chat-text-size;
|
||||||
|
color: #1c242a;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messageOut {
|
||||||
|
margin: 8px;
|
||||||
|
margin-left: 30% !important;
|
||||||
|
text-align: right;
|
||||||
|
.bubble {
|
||||||
|
background-color: #00eea0;
|
||||||
|
border-radius: 10px 10px 0 10px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.messageIn {
|
||||||
|
margin: 8px;
|
||||||
|
margin-right: 30% !important;
|
||||||
|
text-align: left;
|
||||||
|
.bubble {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px 10px 10px 0;
|
||||||
|
padding: 8px;
|
||||||
|
border-width: 1px !important;
|
||||||
|
border-style: solid !important;
|
||||||
|
border-color: #cccccc !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sender {
|
||||||
|
font-family: 'Titillium Web', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 15 * $chat-text-size;
|
||||||
|
color: #1c242a;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
font-family: 'Titillium Web', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22 * $chat-text-size;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-family: 'Titillium Web', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 15 * $chat-text-size;
|
||||||
|
text-align: center;
|
||||||
|
color: #1c242a;
|
||||||
|
}
|
||||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||||
|
After Width: | Height: | Size: 539 B |
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>
|
||||||
18
src/main.js
Normal file
18
src/main.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import vuetify from './plugins/vuetify';
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import matrix from './services/matrix.service'
|
||||||
|
import 'roboto-fontface/css/roboto/roboto-fontface.css'
|
||||||
|
import 'material-design-icons-iconfont/dist/material-design-icons.css'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
vuetify,
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
matrix,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
7
src/models/user.js
Normal file
7
src/models/user.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export default class User {
|
||||||
|
constructor(server, username, password) {
|
||||||
|
this.server = server;
|
||||||
|
this.username = username;
|
||||||
|
this.password = password;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/plugins/vuetify.js
Normal file
10
src/plugins/vuetify.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import Vuetify from 'vuetify/lib';
|
||||||
|
|
||||||
|
Vue.use(Vuetify);
|
||||||
|
|
||||||
|
export default new Vuetify({
|
||||||
|
icons: {
|
||||||
|
iconfont: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
38
src/router/index.js
Normal file
38
src/router/index.js
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import Chat from '../components/Chat.vue'
|
||||||
|
import Login from '../components/Login.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Chat',
|
||||||
|
component: Chat
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: Login
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
const publicPages = ['/login'];
|
||||||
|
const authRequired = !publicPages.includes(to.path);
|
||||||
|
const loggedIn = localStorage.getItem('user');
|
||||||
|
|
||||||
|
// trying to access a restricted page + not logged in
|
||||||
|
// redirect to login page
|
||||||
|
if (authRequired && !loggedIn) {
|
||||||
|
next('/login');
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router
|
||||||
95
src/services/matrix.service.js
Normal file
95
src/services/matrix.service.js
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
global.Olm = require("olm");
|
||||||
|
import sdk from "matrix-js-sdk";
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
const LocalStorageCryptoStore = require("matrix-js-sdk/lib/crypto/store/localStorage-crypto-store")
|
||||||
|
.LocalStorageCryptoStore;
|
||||||
|
sdk.setCryptoStoreFactory(
|
||||||
|
() => new LocalStorageCryptoStore(window.localStorage)
|
||||||
|
);
|
||||||
|
|
||||||
|
class MatrixService {
|
||||||
|
constructor() {
|
||||||
|
this.matrixClient = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
login(user) {
|
||||||
|
const tempMatrixClient = sdk.createClient(user.server);
|
||||||
|
return tempMatrixClient
|
||||||
|
.login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
|
||||||
|
.then((response) => {
|
||||||
|
localStorage.setItem('user', JSON.stringify(response));
|
||||||
|
return response;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
localStorage.removeItem('user');
|
||||||
|
}
|
||||||
|
|
||||||
|
async getMatrixClient(user) {
|
||||||
|
const matrixStore = new sdk.MemoryStore(window.localStorage);
|
||||||
|
const webStorageSessionStore = new sdk.WebStorageSessionStore(
|
||||||
|
window.localStorage
|
||||||
|
);
|
||||||
|
|
||||||
|
var homeServer = user.home_server;
|
||||||
|
if (!homeServer.startsWith("https://")) {
|
||||||
|
homeServer = "https://" + homeServer;
|
||||||
|
}
|
||||||
|
|
||||||
|
var opts = {
|
||||||
|
baseUrl: homeServer,
|
||||||
|
userId: user.user_id,
|
||||||
|
store: matrixStore,
|
||||||
|
sessionStore: webStorageSessionStore,
|
||||||
|
deviceId: user.device_id,
|
||||||
|
accessToken: user.access_token
|
||||||
|
}
|
||||||
|
user.matrixClient = sdk.createClient(opts);
|
||||||
|
return user.matrixClient
|
||||||
|
.initCrypto()
|
||||||
|
.then(() => {
|
||||||
|
console.log("Crypto initialized");
|
||||||
|
user.matrixClient.startClient();
|
||||||
|
return user.matrixClient;
|
||||||
|
})
|
||||||
|
.then(matrixClient => {
|
||||||
|
if (matrixClient.isInitialSyncComplete()) {
|
||||||
|
console.log("Initial sync done already!");
|
||||||
|
return matrixClient;
|
||||||
|
} else {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
matrixClient.once(
|
||||||
|
"sync",
|
||||||
|
function (state, ignoredprevState, ignoredres) {
|
||||||
|
console.log(state); // state will be 'PREPARED' when the client is ready to use
|
||||||
|
if (state == "PREPARED") {
|
||||||
|
resolve(matrixClient);
|
||||||
|
} else if (state == "ERROR") {
|
||||||
|
reject("Error syncing");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const matrixService = new MatrixService();
|
||||||
|
const matrixServicePlugin = {}
|
||||||
|
matrixServicePlugin.install = function (Vue, ignoredOptions) {
|
||||||
|
Vue.prototype.$matrix = matrixService;
|
||||||
|
|
||||||
|
Vue.mixin({
|
||||||
|
mounted: function () {
|
||||||
|
// Store the VUE instance root in our own $root variable.
|
||||||
|
matrixService.$root = this.$root;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.use(matrixServicePlugin);
|
||||||
|
|
||||||
|
export default MatrixService;
|
||||||
49
src/store/auth.module.js
Normal file
49
src/store/auth.module.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import MatrixService from '../services/matrix.service';
|
||||||
|
|
||||||
|
const user = JSON.parse(localStorage.getItem('user'));
|
||||||
|
const initialState = user
|
||||||
|
? { status: { loggedIn: true }, user }
|
||||||
|
: { status: { loggedIn: false }, user: null };
|
||||||
|
|
||||||
|
export const auth = {
|
||||||
|
namespaced: true,
|
||||||
|
state: initialState,
|
||||||
|
actions: {
|
||||||
|
login({ commit }, user) {
|
||||||
|
return MatrixService.login(user).then(
|
||||||
|
user => {
|
||||||
|
commit('loginSuccess', user);
|
||||||
|
return Promise.resolve(user);
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
commit('loginFailure');
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
logout({ commit }) {
|
||||||
|
MatrixService.logout();
|
||||||
|
commit('logout');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
loginSuccess(state, user) {
|
||||||
|
state.status.loggedIn = true;
|
||||||
|
state.user = user;
|
||||||
|
},
|
||||||
|
loginFailure(state) {
|
||||||
|
state.status.loggedIn = false;
|
||||||
|
state.user = null;
|
||||||
|
},
|
||||||
|
logout(state) {
|
||||||
|
state.status.loggedIn = false;
|
||||||
|
state.user = null;
|
||||||
|
},
|
||||||
|
registerSuccess(state) {
|
||||||
|
state.status.loggedIn = false;
|
||||||
|
},
|
||||||
|
registerFailure(state) {
|
||||||
|
state.status.loggedIn = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
22
src/store/index.js
Normal file
22
src/store/index.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
import { auth } from './auth.module';
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
currentRoom: null
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
setCurrentRoom(state, room) {
|
||||||
|
state.currentRoom = room;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
auth
|
||||||
|
},
|
||||||
|
})
|
||||||
5
vue.config.js
Normal file
5
vue.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
"transpileDependencies": [
|
||||||
|
"vuetify"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue