update login and throbber

add-admin-interface
adb 4 years ago
parent 31beb2b436
commit f7ee0d9695

@ -0,0 +1,34 @@
<template>
<div class="overlay">
<throbber :text="text" class="throbber"/>
</div>
</template>
<script>
import throbber from "@/components/throbber";
export default {
name: "throbberOverlay",
components:{
throbber
},
props: {
text: String
}
}
</script>
<style scoped>
.throbber{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay{
position: absolute;
height: 100%;
width: 100%;
background-color: #111d;
user-select: none;
}
</style>

@ -13,7 +13,8 @@ export class MatrixHandler {
login(user, password, baseUrl, onError, callback = ()=>{}){
if (this.client){ console.log('there is already an active session'); return; }
this.client = new matrix.createClient({
baseUrl: baseUrl
baseUrl: baseUrl,
sessionStore: new matrix.WebStorageSessionStore(window.localStorage)
});
this.client.login('m.login.password', {
user: user,
@ -40,13 +41,18 @@ export class MatrixHandler {
}
tokenLogin(baseUrl, accessToken, userId){
if (this.client){ console.log('there is already an active session'); return; }
this.client = new matrix.createClient({baseUrl, accessToken, userId});
this.client = new matrix.createClient({
baseUrl,
accessToken,
userId,
sessionStore: new matrix.WebStorageSessionStore(window.localStorage)
});
this.user = userId;
this.baseUrl = baseUrl;
this.startSync();
}
logout(){
this.client.stopClient();
async logout(){
await this.client.stopClient();
this.client = undefined;
}
startSync(callback = ()=>{}){

@ -1,7 +1,8 @@
<template>
<div id="login">
<div class="login">
<div class="loginBox">
<h1 class="title">[chat]</h1>
<form v-if="showLogin" @submit.prevent="login()">
<form v-if="showLogin()" @submit.prevent="login()">
<input v-model="user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br>
<input v-model="password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
<input v-model="homeServer" class="input" name="homeserver" maxlength="50" placeholder="https://matrix.org"><br>
@ -14,16 +15,20 @@
<textbtn @click.native="logout()" text="logout" />
</div>
</div>
<throbber-overlay v-if="loading" :text="loading" class="throbber"/>
</div>
</template>
<script>
import textbtn from '@/components/textbtn';
import {matrix} from '@/main.js';
import {cookieHandler} from "@/lib/cookieHandler";
import ThrobberOverlay from "@/components/throbberOverlay";
export default {
name: "login.vue",
components: {
ThrobberOverlay,
textbtn
},
methods: {
@ -41,22 +46,38 @@ export default {
this.loginError = 'username is in wrong style';
return;
}
this.loading = 'logging in';
matrix.login(this.user, this.password, this.homeServer, (error) => {
this.loginError = `login failed: ${error}`;
}, token => {
let cookie = new cookieHandler();
cookie.setCookie({
this.loading = 'store token';
this.cookie.setCookie({
baseUrl: this.homeServer,
userId: this.user,
accessToken: token
});
cookie.setExpire(15);
cookie.store();
this.cookie.setExpire(15);
this.cookie.store();
this.loading = false;
this.$router.push('/rooms/');
});
},
logout(){
matrix.logout();
async logout(){
this.loading = 'logging out';
await matrix.logout();
this.loading = 'remove token';
this.cookie.setCookie({
baseUrl: undefined,
userId: undefined,
accessToken: undefined
});
this.cookie.setExpire(0);
this.cookie.store();
this.loading = false;
this.$forceUpdate();
},
showLogin(){
return matrix.client === undefined;
}
},
data(){
@ -65,14 +86,19 @@ export default {
password: "",
homeServer: "https://adb.sh",
loginError: "",
showLogin: (matrix.client === undefined)
cookie: new cookieHandler(),
loading: false
}
}
}
</script>
<style scoped>
#login{
.login{
width: 100%;
height: 100%;
}
.loginBox{
position: absolute;
top: 40%;
left: 50%;
@ -98,7 +124,12 @@ input:focus{
color: #000;
background-color: #fff;
}
.throbber{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 35rem) {
input {

@ -1,12 +1,12 @@
<template>
<div v-if="matrix.loading">
<throbber class="throbber" text="loading"/>
<throbber-overlay text="loading"/>
</div>
<div v-else>
<div id="roomList" class="roomList">
<h1>[chat]</h1>
<input v-model="search" class="input" type="text" maxlength="50" placeholder="search"><br>
<div v-for="room in matrix.rooms" :key="room" @click="openChat(room)" >
<div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
<div v-if="!search || room.name.toLowerCase().includes(search.toLowerCase())" class="roomListElement">
<userThumbnail
class="roomImg"
@ -51,12 +51,12 @@ import userThumbnail from "@/components/userThumbnail";
import {matrix} from "@/main";
import sdk from "matrix-js-sdk";
import {getTime} from "@/lib/getTimeStrings";
import throbber from "@/components/throbber";
import ThrobberOverlay from "@/components/throbberOverlay";
export default {
name: "rooms",
components:{
throbber,
ThrobberOverlay,
chat,
chatInformation,
userThumbnail
@ -185,12 +185,6 @@ export default {
.roomImg.small{
margin-left: calc(50% - 2rem);
}
.throbber{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input{
padding: 0 2rem 0 2rem;
height: 2.5rem;

Loading…
Cancel
Save