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 { useProfile } from "@/modules/auth"
import { invokeProfile } from "@/ipcRend/account";
import { postInitSession, postMount } from "@/ipcRend/session";

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

import { Profile } from "@/types";


export default defineComponent({

  components: {
    Splash,
    Messenger,
    Login
  },

  setup() {

    const { post, invoke } = useIpc();

    const { profile, setProfile, clearProfile } = useProfile();

    // Whether browser has received user info yet.
    const ready = 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.`);
      }

      newMessages.value = payload.message.newMessages;

      ready.value = true;

    }

    const onSessionAuthFail = (_event: IpcRendererEvent, _payload: null) => {
        clearProfile();
    }

    onMounted(async () => {
      console.log("APP:mounted.");

      window.ipcRenderer.on("session-auth-fail", onSessionAuthFail)
      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');
      })

      postMount();

      try {
        const profile = await invokeProfile() as Profile;
        setProfile(profile);
      } catch(e) {
          console.log('[REND] Auth:', e);
          clearProfile();
      } finally {
          ready.value = true;
          if (profile.value.crimataId) {
              // start session
              postInitSession();
          }
      }

    });

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

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

</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>