keanu-weblite/src/components/Login.vue

<template>
  <div class="pa-4 login-root fill-height">
    <div class="chat-header">
      <v-container fluid>
        <v-row no-gutters>
          <v-col>
            <v-img
              src="@/assets/logo.svg"
              width="32"
              height="32"
              xclass="d-inline-block header-button-left"
            />
          </v-col>
          <v-col>
            <div class="room-name no-upper">{{ $t("login.title") }}</div>
          </v-col>
          <v-col class="text-right">
            <v-btn text v-if="showCloseButton" @click.stop="$navigation.pop">
              <v-icon>close</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </div>

    <div color="rgba(255,255,255,0.1)" class="text-center">
      <v-form v-model="isValid">
        <v-text-field
          prepend-inner-icon="$vuetify.icons.user"
          v-model="user.user_id"
          :label="$t('login.username')"
          color="black"
          background-color="white"
          solo
          :rules="[(v) => !!v || $t('login.username_required')]"
          :error="userErrorMessage != null"
          :error-messages="userErrorMessage"
          required
          v-on:keyup.enter="$refs.password.focus()"
          v-on:keydown="hasError=false"
        ></v-text-field>
        <v-text-field
          prepend-inner-icon="$vuetify.icons.password"
          ref="password"
          v-model="user.password"
          :label="$t('login.password')"
          color="black"
          background-color="#f5f5f5"
          filled
          type="password"
          :rules="[(v) => !!v || $t('login.password_required')]"
          :error="passErrorMessage != null"
          :error-messages="passErrorMessage"
          required
          v-on:keydown="hasError=false"
          v-on:keyup.enter="
            () => {
              if (isValid && !loading) {
                handleLogin();
              }
            }
          "
        ></v-text-field>
        <div class="error--text" v-if="hasError">{{ this.message }}</div>
        <v-checkbox
          class="mt-0"
          v-model="rememberMe"
          :label="$t('join.remember_me')"
        />
        <v-btn
          :disabled="!isValid || loading"
          color="black"
          depressed
          block
          @click.stop="handleLogin"
          :loading="loading"
          class="filled-button mt-4"
          >{{ $t("login.login") }}</v-btn
        >
        <div class="mt-2 overline">{{ $t("login.or") }}</div>
        <v-btn
          color="primary"
          depressed
          block
          @click.stop="handleCreateRoom"
          class="filled-button mt-2"
          >{{ $t("login.create_room") }}</v-btn
        >
      </v-form>
    </div>
  </div>
</template>

<script>
import User from "../models/user";
import util from "../plugins/utils";

export default {
  name: "Login",
  data() {
    return {
      user: new User(this.$config.defaultServer, "", ""),
      isValid: true,
      loading: false,
      message: "",
      userErrorMessage: null,
      passErrorMessage: null,
      hasError: false
    };
  },
  computed: {
    loggedIn() {
      return this.$store.state.auth.status.loggedIn;
    },
    currentUser() {
      return this.$store.state.auth.user;
    },
    showCloseButton() {
      return this.$navigation && this.$navigation.canPop();
    },
    rememberMe: {
      get: function () {
        return !this.$store.state.useLocalStorage;
      },
      set: function (rememberMe) {
        this.$store.commit("setUseLocalStorage", !rememberMe);
      },
    },
  },
  created() {
    if (this.loggedIn) {
      this.$navigation.push(
        {
          name: "Chat",
          params: { roomId: util.sanitizeRoomId(this.$matrix.currentRoomId) },
        },
        -1
      );
    }
  },
  watch: {
    user: {
      handler() {
        // Reset manual errors
        this.userErrorMessage = null;
        this.passErrorMessage = null;
      },
      deep: true,
    }
  },
  methods: {
    handleLogin() {
      if (this.user.user_id && 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);
        user.normalize();

        this.loading = true;
        this.$store.dispatch("login", user).then(
          () => {
            if (this.$matrix.currentRoomId) {
              this.$navigation.push(
                {
                  name: "Chat",
                  params: {
                    roomId: util.sanitizeRoomId(this.$matrix.currentRoomId),
                  },
                },
                -1
              );
            } else {
              this.$navigation.push({ name: "Home" }, -1);
            }
          },
          (error) => {
            this.loading = false;
            this.message =
              (error.data && error.data.error) ||
              error.message ||
              error.toString();
            if(error.data.errcode ==='M_FORBIDDEN') {
              this.message = this.$i18n.messages[this.$i18n.locale].login.invalid_message;
              this.hasError = true;
            }
            console.log("Message set to ", this.message);
          }
        );
      }
    },
    handleCreateRoom() {
      this.$navigation.push({ name: "CreateRoom" });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/login.scss";
</style>