media_player_client/src/pages/Login.vue

<template>
  <q-layout view="hHh lpR fFf">
    <q-page-container>
      <q-page class="row items-center justify-evenly">
        <q-card style="width: 30vw">
          <q-card-section class="text-center text-h6">
            {{ $t('login') }}
          </q-card-section>
          <q-separator />
          <q-card-section class="fit">
            <q-form
              ref="login_form"
              @submit="onSubmit"
              @reset="onReset"
              class="q-gutter-md"
            >
              <q-input
                :loading="data.loading"
                filled
                v-model="data.user_name"
                :label="$t('user name')"
                :hint="$t('please input user name')"
                lazy-rules
                :rules="[
                  (val) =>
                    (val && val.length > 0) || $t('Please type something'),
                ]"
                @keydown="
                  (evt) => {
                    if (evt.keyCode == 13) {
                      //
                      $refs?.password_input?.focus();
                    }
                  }
                "
              >
                <template v-if="data.user_name" v-slot:append>
                  <q-icon
                    name="cancel"
                    @click.stop="data.user_name = null"
                    class="cursor-pointer"
                  />
                </template>
              </q-input>

              <q-input
                ref="password_input"
                :loading="data.loading"
                filled
                v-model="data.password"
                :label="$t('password')"
                :hint="$t('please input password')"
                lazy-rules
                :rules="[
                  (val) =>
                    (val && val.length > 0) || $t('Please type something'),
                ]"
                @keydown="
                  (evt) => {
                    if (evt.keyCode == 13) {
                      $refs?.login_button?.click();
                    }
                  }
                "
              >
                <template v-if="data.password" v-slot:append>
                  <q-icon
                    name="cancel"
                    @click.stop="data.password = null"
                    class="cursor-pointer"
                  />
                </template>
              </q-input>
            </q-form>
          </q-card-section>
          <q-card-actions>
            <q-btn
              ref="login_button"
              class="full-width"
              :loading="data.loading"
              :label="$t('login')"
              color="primary"
              @click="$refs?.login_form?.submit()"
            />
          </q-card-actions>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

import GlobalData from 'src/common/GlobalData';
import { LocalStorage, SessionStorage, useQuasar } from 'quasar';
import ClientConnection from 'src/common/ClientConnection';
import PermissionLevel from 'src/entities/PermissionLevel';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

class _Data {
  user_name: string | null = null;
  password: string | null = null;
  loading = false;
  ip_address = '127.0.0.1';

  constructor() {
    let temp = LocalStorage.getItem('default_ip_address');
    if (temp) {
      this.ip_address = temp.toString();
    } else {
      this.ip_address = window.location.hostname;
    }

    temp = LocalStorage.getItem('default_user_name');
    if (temp) {
      this.user_name = temp.toString();
    }

    temp = LocalStorage.getItem('default_password');
    if (temp) {
      this.password = temp.toString();
    }
  }
}

export default defineComponent({
  name: 'PageLogin',

  components: {},

  setup() {
    const $q = useQuasar();
    const $t = useI18n();
    const $route = useRouter();
    const data = reactive(new _Data());

    return {
      data,
      loga(a: any) {
        console.log(a);
      },
      async onSubmit() {
        return new Promise((resolve) => {
          data.loading = true;
          try {
            let global_data = GlobalData.getInstance();
            let web_socket = global_data.getClient(data.ip_address);
            const url =
              'ws://' +
              data.ip_address +
              ':' +
              GlobalData.kDefaultWebsocektPort.toString() +
              GlobalData.kWebsocketResource;
            if (web_socket) {
              web_socket.reconnectTo(url, data.user_name, data.password);
            } else {
              web_socket = new ClientConnection(
                url,
                data.user_name,
                data.password
              );
              global_data.addClient(data.ip_address, web_socket);
            }
            global_data.setCurrentClientName(data.ip_address);
            web_socket.login_callback = (is_login) => {
              if (is_login) {
                SessionStorage.set('auth', PermissionLevel.Root);
                SessionStorage.set('url', url);
                SessionStorage.set('name', data.ip_address);
                SessionStorage.set('user_name', data.user_name);
                SessionStorage.set('password', data.password);
                $route.push('/');
              } else {
                $q.notify({
                  color: 'negative',
                  icon: 'warning',
                  message: $t.t('login fail!'),
                  position: 'center',
                  timeout: 1500,
                });
              }
              resolve(true);
              data.loading = false;
            };
          } catch {
            resolve(true);
            data.loading = false;
          }
        });
      },
      onReset() {
        data.user_name = null;
        data.password = null;
      },
    };
  },
});
</script>