Fix login

src/assets/css/chat.scss

@@ -1,4 +1,6 @@
-$chat-background: #008860;
+@import "@/assets/css/main.scss";
+
+$chat-background: $background;
 $chat-standard-padding: 32px;
 $chat-standard-padding-s: 16px;
 $chat-standard-padding-xs: 8px;

src/assets/css/login.scss

@@ -0,0 +1,14 @@
+@import "@/assets/css/main.scss";
+
+.login-root {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: $background;
+}

src/assets/css/main.scss

@@ -0,0 +1 @@
+$background: #008860;

src/components/Login.vue

@@ -1,30 +1,31 @@
 <template>
-  <div class="d-flex justify-center">
+  <div class="d-flex justify-center login-root">
-    <v-card class="ma-8 pa-4" style="min-width: 400px; max-width: 400px" flat>
+    <div color="rgba(255,255,255,0.1)">
-      <v-card-title primary-title>
+      <h4>Login</h4>
-        <h4>Login</h4>
-      </v-card-title>
       <v-form v-model="isValid">
         <v-text-field
-          prepend-icon="mdi-account"
           v-model="user.username"
           label="Username"
+          color="black"
+          background-color="white"
+          outlined
           :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"
+          color="black"
+          background-color="white"
+          outlined
           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
@@ -34,9 +35,8 @@
             :loading="loading"
             >Login</v-btn
           >
-        </v-card-actions>
       </v-form>
-    </v-card>
+    </div>
   </div>
 </template>
 
@@ -120,3 +120,7 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+@import "@/assets/css/login.scss";
+</style>

src/components/RoomList.vue

@@ -7,12 +7,8 @@
           <v-icon v-text="room.icon"></v-icon>
         </v-list-item-icon>
         <v-list-item-content>
-          <v-list-item-title
+          <v-list-item-title>{{ room.summary.info.title }}</v-list-item-title>
-            v-text="room.summary.info.title"
+          <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
-          ></v-list-item-title>
-          <v-list-item-content
-            >Topic: {{ room.topic }}</v-list-item-content
-          >
         </v-list-item-content>
       </v-list-item>
     </v-list-item-group>

src/store/auth.module.js

@@ -1,5 +1,3 @@
-import MatrixService from '../services/matrix.service';
-
 const user = JSON.parse(localStorage.getItem('user'));
 const initialState = user
     ? { status: { loggedIn: true }, user }
@@ -10,7 +8,7 @@ export const auth = {
     state: initialState,
     actions: {
         login({ commit }, user) {
-            return MatrixService.login(user).then(
+            return this._vm.$matrix.login(user).then(
                 user => {
                     commit('loginSuccess', user);
                     return Promise.resolve(user);
@@ -22,7 +20,7 @@ export const auth = {
             );
         },
         logout({ commit }) {
-            MatrixService.logout();
+            this._vm.$matrix.logout();
             commit('logout');
         },
     },