mime-chat/src/App.vue

<template>
  <!-- Only render when profile has been set -->
  <div id="app" v-if="(ready)">

    <button id="titlebar" />

    <!-- Minimize and exit buttons. -->
    <span class="menu">
      <button
        class="menuButton exitButton"
        @click.prevent="post('nav-bar', 'close')"
      />
      <button
        class="menuButton minimizeButton"
        @click.prevent="post('nav-bar', 'min')"
      />
    </span>

    <!-- Main Pages -->
    <Messenger
      v-if="profile"
      :profile="profile"
      :newMessages="newMessages"
    />
    <Login v-else />

  </div>

  <!-- Show spash screen if ready is false -->
  <Splash v-else />

</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import { IpcRendererEvent } from "electron";
import { useIpc } from "@/modules/ipc";
import { useAuth } from "@/modules/auth"

import Splash from "@/components/splash.vue";
import Messenger from "@/components/messenger.vue";
import Login from "@/components/login.vue";


export default defineComponent({

  components: {
    Splash,
    Messenger,
    Login
  },

  setup() {

    const { post, invoke } = useIpc();

    const { user } = useAuth();

    // Whether browser has received user info yet.
    const ready = ref(false);

    // Information about current user.
    const profile = ref(false);

    // New messages that browser missed while closed.
    const newMessages = ref([]);

    // Receive updated information about the session.
    const updateState = (_event: IpcRendererEvent, payload: any) => {
      console.log('YAYAYAYAYA');
      console.log("APP:Received updated profile and new messages: \n" +
                  `    profile: ${payload.message.profile}\n` +
                  `    new: ${payload.message.newMessages}`);

      if (payload.message.profile) {
        console.log(`APP:Logged-in, showing Messenger View.`);
      } else {
        console.log(`APP:Logged-out, showing Login View.`);
      }

      // Set profile and newMessages.
      // profile.value = payload.message.profile;
      profile.value = true;
      newMessages.value = payload.message.newMessages;

      ready.value = true;

    }

    onMounted(async () => {
      console.log("APP:mounted.");
      window.ipcRenderer.on("update-state", updateState)
      window.ipcRenderer.on("update_available", () => {
          console.log('testing auto update');
      })

      window.ipcRenderer.on("update_downloaded", () => {
          console.log('testing update download');
      })

      post("app-mounted", "");

      if(user.value.key) {
          try {
            const res = await invoke('user-auth', JSON.stringify(user.value));
            profile.value = res;
          } catch(e) {
              profile.value = false;
              console.log('[AUTH]', e);
          } finally {
              ready.value = true;
              if (profile.value) {
                  // start session
                  post("init-session", user.value.email);
              }
          }
      } else {
          profile.value = false;
          ready.value = true;
      }

    });

    onUnmounted(() => {
      window.ipcRenderer.removeAllListeners("update-state");
    })

    return {
        ready,
        profile,
        post,
        newMessages
    }
  }
})

</script>

<style lang="scss">

html, body {
  margin: 0;
  padding: 0;
  // Background color set in window.ts
}

#app {
  font-family: "SF Pro Text";

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  height: 100vh;
  width: 100vw;

  border-radius: 15px;
 }

#titlebar {
  position: fixed;

  width: 100vw;
  height: 54px;

  opacity: 0.75;

  background-color: #EBEBEB;

  -webkit-app-region: drag;

  border: none;
  outline: none;

  z-index: 1;

}

.menu {
  position: fixed;
  margin-left: 20px;
  margin-top: 20px;

  z-index: 2;

}

.menuButton {
  border: none;
  outline:none;
  min-width: 14px;
  min-height: 14px;
  border-radius: 7px;
}

.exitButton {
  background-color: #FF6157;
}

.exitButton:active {
  background: #c14645;
}

.minimizeButton {
  background-color: #FFC12F;
  margin-left: 8px;
}

.minimizeButton:active {
  background-color: #c08e38;
}

</style>