Add support for resuming user's login intention

services/agora/src/components/authentication/intention/DialogContainer.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <q-dialog v-model="showDialog" no-route-dismiss>
+      <div class="cardStyle">
+        <div class="title">
+          {{ title }}
+        </div>
+
+        <div v-if="message">
+          {{ message }}
+        </div>
+
+        <slot name="body" />
+
+        <div class="actionButtons">
+          <ZKButton
+            v-if="showCancelDialog"
+            button-type="largeButton"
+            label="Cancel"
+            @click="showDialog = false"
+          />
+          <ZKButton
+            button-type="largeButton"
+            label="Ok"
+            color="primary"
+            @click="clickedOkButton()"
+          />
+        </div>
+      </div>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ZKButton from "src/components/ui-library/ZKButton.vue";
+
+const props = defineProps<{
+  title: string;
+  message: string;
+  showCancelDialog: boolean;
+  okCallback: () => void;
+}>();
+
+const showDialog = defineModel<boolean>({ required: true });
+
+function clickedOkButton() {
+  props.okCallback();
+}
+</script>
+
+<style lang="scss" scoped>
+.cardStyle {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: white;
+  border-radius: 25px;
+  max-width: 25rem;
+  min-width: 5rem;
+  padding: 1.5rem;
+}
+
+.title {
+  font-size: 1.3rem;
+  font-weight: 500;
+}
+
+.actionButtons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding-top: 1rem;
+}
+</style>

services/agora/src/components/authentication/intention/PostLoginIntentionDialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <DialogContainer
+      v-model="showDialog"
+      :title="'Session resumed'"
+      :message="''"
+      :show-cancel-dialog="false"
+      :ok-callback="okCallback"
+    >
+      <template #body>
+        {{ message }}
+      </template>
+    </DialogContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useLoginIntentionStore } from "src/stores/loginIntention";
+import { storeToRefs } from "pinia";
+import DialogContainer from "./DialogContainer.vue";
+
+const { showPostLoginIntentionDialog, activeUserIntention } = storeToRefs(
+  useLoginIntentionStore()
+);
+const { setActiveUserIntention, composePostLoginDialogMessage } =
+  useLoginIntentionStore();
+
+const message = ref("");
+
+const showDialog = ref(false);
+
+onMounted(() => {
+  checkData();
+});
+
+watch(showPostLoginIntentionDialog, () => {
+  checkData();
+});
+
+function checkData() {
+  if (showPostLoginIntentionDialog.value == true) {
+    message.value = composePostLoginDialogMessage(activeUserIntention.value);
+    showDialog.value = true;
+  }
+}
+
+function okCallback() {
+  showPostLoginIntentionDialog.value = false;
+  showDialog.value = false;
+  setActiveUserIntention("none");
+}
+</script>
+
+<style lang="scss" scoped>
+.cardStyle {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: white;
+  border-radius: 25px;
+  max-width: 20rem;
+  padding: 1.5rem;
+}
+</style>

services/agora/src/components/authentication/intention/PreLoginIntentionDialog.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <DialogContainer
+      v-model="showDialog"
+      :title="'Log in to Agora'"
+      :message="'Sign in to participate the discussions'"
+      :show-cancel-dialog="true"
+      :ok-callback="okButtonClicked"
+    >
+      <template #body>
+        <div v-if="subMessage" class="shadowBoxStyle">
+          <div class="iconAlignment">
+            <q-icon name="mdi-information" size="1.2rem" />
+          </div>
+          <div>
+            {{ subMessage }}
+          </div>
+        </div>
+      </template>
+    </DialogContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  PossibleIntentions,
+  useLoginIntentionStore,
+} from "src/stores/loginIntention";
+import { useRouter } from "vue-router";
+import DialogContainer from "./DialogContainer.vue";
+
+const showDialog = defineModel<boolean>({ required: true });
+
+const props = defineProps<{
+  okCallback: () => void;
+  activeIntention: PossibleIntentions;
+}>();
+
+const { composeLoginIntentionDialogMessage, setActiveUserIntention } =
+  useLoginIntentionStore();
+
+const subMessage = ref(
+  composeLoginIntentionDialogMessage(props.activeIntention)
+);
+
+const router = useRouter();
+
+async function okButtonClicked() {
+  props.okCallback();
+  setActiveUserIntention(props.activeIntention);
+  await router.push({ name: "/welcome/" });
+}
+</script>
+
+<style scoped lang="scss">
+.shadowBoxStyle {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: 1fr;
+  gap: 0px 1rem;
+  grid-template-areas: ". .";
+  padding: 0.5rem;
+  color: $primary;
+}
+
+.iconAlignment {
+  margin: auto;
+}
+</style>

services/agora/src/components/navigation/SideDrawer.vue

@@ -53,15 +53,22 @@
       </div>
 
       <div>
-        <div
-          v-if="drawerBehavior == 'desktop'"
-          class="bottomSection startConversationButton"
-          @click="requestNewPost()"
-        >
-          <img :src="newConversationButton" />
-        </div>
+        <RouterLink :to="{ name: '/conversation/create/' }">
+          <div
+            v-if="drawerBehavior == 'desktop'"
+            class="bottomSection startConversationButton"
+          >
+            <img :src="newConversationButton" />
+          </div>
+        </RouterLink>
       </div>
     </div>
+
+    <PreLoginIntentionDialog
+      v-model="showLoginDialog"
+      :ok-callback="() => {}"
+      :active-intention="'none'"
+    />
   </div>
 </template>
 
@@ -70,16 +77,13 @@ import { RouteMap, useRoute, useRouter } from "vue-router";
 import ZKHoverEffect from "../ui-library/ZKHoverEffect.vue";
 import { storeToRefs } from "pinia";
 import { useAuthenticationStore } from "src/stores/authentication";
-import { useDialog } from "src/utils/ui/dialog";
 import UserAvatar from "../account/UserAvatar.vue";
 import { useUserStore } from "src/stores/user";
 import { useNavigationStore } from "src/stores/navigation";
 import { ref, watch } from "vue";
-import { useCreateNewPost } from "src/utils/component/conversation/newPost";
 import ZKStyledIcon from "../ui-library/ZKStyledIcon.vue";
 import NewNotificationIndicator from "../notification/NewNotificationIndicator.vue";
-
-const { requestNewPost } = useCreateNewPost();
+import PreLoginIntentionDialog from "../authentication/intention/PreLoginIntentionDialog.vue";
 
 const newConversationButton =
   process.env.VITE_PUBLIC_DIR + "/images/conversation/newConversationLong.svg";
@@ -93,11 +97,11 @@ const drawerIconLogo1 =
 const drawerIconLogo2 =
   process.env.VITE_PUBLIC_DIR + "/images/icons/agora-text.svg";
 
-const { showLoginConfirmationDialog } = useDialog();
-
 const router = useRouter();
 const route = useRoute();
 
+const showLoginDialog = ref(false);
+
 interface SettingItem {
   icon: string;
   name: string;
@@ -170,7 +174,7 @@ function initializeMenu() {
 
 async function enterRoute(routeName: keyof RouteMap, requireAuth: boolean) {
   if (requireAuth && isAuthenticated.value == false) {
-    showLoginConfirmationDialog();
+    showLoginDialog.value = true;
   } else {
     if (drawerBehavior.value == "mobile") {
       showMobileDrawer.value = false;

services/agora/src/components/navigation/footer/FooterBar.vue

@@ -36,25 +36,32 @@
         </div>
       </div>
     </div>
+
+    <PreLoginIntentionDialog
+      v-model="showLoginDialog"
+      :ok-callback="() => {}"
+      :active-intention="'none'"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
+import PreLoginIntentionDialog from "src/components/authentication/intention/PreLoginIntentionDialog.vue";
 import NewNotificationIndicator from "src/components/notification/NewNotificationIndicator.vue";
 import ZKStyledIcon from "src/components/ui-library/ZKStyledIcon.vue";
 import ZKStyledText from "src/components/ui-library/ZKStyledText.vue";
 import { useAuthenticationStore } from "src/stores/authentication";
-import { useDialog } from "src/utils/ui/dialog";
+import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 const { isAuthenticated } = storeToRefs(useAuthenticationStore());
 
-const dialog = useDialog();
-
 const route = useRoute();
 const router = useRouter();
 
+const showLoginDialog = ref(false);
+
 async function accessHomeFeed() {
   if (route.name == "/") {
     window.scrollTo({ top: 0, behavior: "smooth" });
@@ -65,7 +72,7 @@ async function accessHomeFeed() {
 
 async function accessNotifications() {
   if (!isAuthenticated.value) {
-    dialog.showLoginConfirmationDialog();
+    showLoginDialog.value = true;
   } else {
     await router.push({ name: "/notification/" });
   }