Membership loading (#219)

* update sign in forms * add some mobile treatment and clean up * remove dashboard announcement
Playabl-io · Dec 1, 2023 · 3379ba5 · 3379ba5
1 parent 4baaed2
commit 3379ba5
Show file tree

Hide file tree

Showing 15 changed files with 347 additions and 274 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -7,43 +7,15 @@
       @close="showNewProfileModal = false"
     />
     <OfflineIndicator />
-    <div
-      v-if="store.user && !shownDashboardAnnouncement"
-      class="z-50 fixed inset-x-0 mx-2 md:mx-auto w-fit rounded-xl bottom-6 p-6 bg-teal-200 text-teal-900 flex items-center gap-3 max-w-4xl"
-    >
-      <DismissButton
-        label="dismiss notification"
-        class="absolute top-2 right-2"
-        @click="shownDashboardAnnouncement = true"
-      />
-      <div class="grid grid-cols-6 gap-6">
-        <img
-          v-if="isSmAndLarger"
-          src="/public/images/task_done.png"
-          class="w-full"
-        />
-        <div
-          class="flex flex-col justify-center gap-2 col-span-full sm:col-span-5 sm:text-right"
-        >
-          <p class="md:text-lg font-semibold">
-            Your personal view of your next week of gaming is now available!
-          </p>
-          <p>
-            <router-link
-              to="/"
-              class="text-blue-700 underline"
-              @click="shownDashboardAnnouncement = true"
-              >Check it out now</router-link
-            >, or any time on the home page.
-          </p>
-        </div>
-      </div>
-    </div>
   </AppShell>
 </template>
 <script setup lang="ts">
 import { store } from "./store";
-import { getUserAccess, getUserMemberships } from "./storeActions";
+import {
+  getUserAccess,
+  getUserMemberships,
+  triggerUserAccessLoad,
+} from "./storeActions";
 import { supabase } from "./supabase";
 import ToasterManager from "./components/Toast/ToasterManager.vue";
 import { useRoute, useRouter } from "vue-router";
@@ -54,13 +26,7 @@ import { loadProfile } from "./api/profiles";
 import { log } from "./util/logger";
 import AppShell from "./layouts/AppShell.vue";
 import { Notification } from "./typings/Notification";
-import { useStorage, breakpointsTailwind, useBreakpoints } from "@vueuse/core";
-import DismissButton from "./components/Buttons/DismissButton.vue";
 
-const breakpoints = useBreakpoints(breakpointsTailwind);
-const isSmAndLarger = breakpoints.greater("sm");
-
-const shownDashboardAnnouncement = useStorage("dashboard-announcement", false);
 const route = useRoute();
 const router = useRouter();
 
@@ -80,6 +46,7 @@ supabase.auth.onAuthStateChange(async (event, session) => {
         }
         store.user = profile;
         store.userSettings = profile.user_settings;
+        triggerUserAccessLoad(session.user.id);
 
         if (!notificationSubscription.value) {
           loadNotificationsAndSubscribe();

diff --git a/src/components/Modals/SignUpModal.vue b/src/components/Modals/SignUpModal.vue
@@ -1,5 +1,9 @@
 <template>
-  <BaseModal title="One sec, let's make you an account" :open="open">
+  <BaseModal
+    :title="showSignUpForm ? 'Create a new account' : 'Sign in to your account'"
+    :open="open"
+    @close="allowDismiss ? emit('cancel') : () => {}"
+  >
     <DismissButton
       v-if="allowDismiss"
       class="absolute top-4 right-4"
@@ -19,17 +23,22 @@
     </SignUpForm>
     <form
       v-else
-      class="flex flex-col space-y-4 lg:max-w-xl mx-auto"
+      class="flex flex-col lg:max-w-2xl mx-auto"
       @submit.prevent="handleLogin"
     >
-      <LinkButton
+      <BaseButton
         type="button"
-        class="text-sm text-brand-500 mr-auto"
+        size="bare"
+        class="text-blue-700 mr-auto"
         @click="showSignUpForm = true"
       >
         Need an account? Sign up
-      </LinkButton>
-      <div class="flex flex-col mt-6">
+      </BaseButton>
+      <div class="flex justify-center mt-6">
+        <GoogleButton @click="signInWithGoogle" />
+      </div>
+      <p class="text-xs text-slate-700 text-center my-4">OR</p>
+      <div class="flex flex-col">
         <form-label for="email"> Email </form-label>
         <form-input id="email" v-model="email" type="email" required />
       </div>
@@ -40,28 +49,24 @@
       <primary-button :is-loading="loading" class="mt-4">
         Sign in
       </primary-button>
-      <p class="text-xs text-slate-700 text-center my-4">OR</p>
-      <div class="flex justify-center">
-        <GoogleButton @click="signInWithGoogle" />
-      </div>
     </form>
   </BaseModal>
 </template>
 <script setup lang="ts">
-import { toRefs, ref } from "vue";
+import { ref, PropType } from "vue";
 import BaseModal from "./BaseModal.vue";
 import FormLabel from "@/components/Forms/FormLabel.vue";
 import FormInput from "@/components/Forms/FormInput.vue";
 import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
 import SignUpForm from "@/components/SignUpForm.vue";
 import GoogleButton from "@/components/Buttons/GoogleButton.vue";
 import { supabase } from "@/supabase";
-import LinkButton from "@/components/Buttons/LinkButton.vue";
 import useToast from "@/components/Toast/useToast";
 import { log } from "@/util/logger";
 import { store } from "@/store";
 import DismissButton from "../Buttons/DismissButton.vue";
 import { loadProfile } from "@/api/profiles";
+import BaseButton from "../Buttons/BaseButton.vue";
 
 const { showSuccess, showError } = useToast();
 
@@ -74,16 +79,19 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  initialForm: {
+    type: String as PropType<"sign-up" | "sign-in">,
+    default: "sign-up",
+  },
 });
-toRefs(props);
 
 const emit = defineEmits(["signedIn", "cancel"]);
 
 const email = ref("");
 const password = ref("");
 const loading = ref(false);
 
-const showSignUpForm = ref(true);
+const showSignUpForm = ref(props.initialForm === "sign-up");
 
 const handleSignUp = async ({
   email,

diff --git a/src/components/Navigation/MobileNavHeader.vue b/src/components/Navigation/MobileNavHeader.vue
@@ -119,7 +119,7 @@
               to="/login"
               active-class="text-brand-500 border-l border-brand-500 dark:border-brand-300"
             >
-              Sign in
+              Sign up or sign in
             </router-link>
           </menu-item>
           <MenuItem class="px-2 py-1 flex items-center">

diff --git a/src/components/SignUpForm.vue b/src/components/SignUpForm.vue
@@ -1,43 +1,50 @@
 <template>
-  <form
-    class="flex flex-col lg:max-w-xl mx-auto"
-    @submit.prevent="handleSubmit"
-  >
+  <form class="flex flex-col" @submit.prevent="handleSubmit">
     <slot name="heading">
       <Heading level="h1" as="h5" class="mb-3">Sign up</Heading>
     </slot>
-    <p class="text-sm font-medium">
+    <p class="font-medium mt-3">
       Sign up to join or start communities and play in games
     </p>
-    <LinkButton
+    <BaseButton
       type="button"
-      class="mr-auto mt-1 text-sm"
+      class="mr-auto mt-1 text-blue-700"
+      size="bare"
       @click="emit('signIn')"
     >
       Have an account already? Sign in
-    </LinkButton>
-    <form-label class="flex flex-col mt-6"> Email </form-label>
+    </BaseButton>
+    <div class="flex justify-center mt-12 mb-6">
+      <GoogleButton @click="emit('signUpWithGoogle')" />
+    </div>
+    <p class="text-xs text-slate-700 text-center my-4">OR</p>
+    <form-label class="flex flex-col mt-4"> Sign up with email </form-label>
     <form-input v-model="email" type="email" required />
-    <Popover class="relative">
-      <PopoverButton
-        type="button"
-        class="flex items-center gap-1 mr-auto mt-1 rounded-md hover:underline focus-styles"
-      >
-        <InformationCircleIcon class="w-4 h-4" />
-        <p class="text-xs text-slate-700">How will my email be used?</p>
-      </PopoverButton>
-
-      <PopoverPanel
-        class="absolute z-10 mt-2 bg-white p-4 rounded-md shadow-md border border-solid border-gray-100"
-      >
+    <LinkButton
+      type="button"
+      class="flex items-center gap-1 mr-auto mt-2 rounded-md hover:underline focus-styles"
+      @click="showEmailInfo = !showEmailInfo"
+    >
+      <InformationCircleIcon class="w-4 h-4" />
+      <p class="text-xs text-slate-700">How will my email be used?</p>
+    </LinkButton>
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="transform opacity-0"
+      enter-to-class="transform opacity-100"
+      leave-active-class="transition duration-75 ease-out"
+      leave-from-class="transform opacity-100"
+      leave-to-class="transform opacity-0"
+    >
+      <Well v-if="showEmailInfo" class="mt-3">
         <p class="text-sm leading-relaxed">
           Your email is used to notify you when RSVP status for games change,
           and is made available to the game facilitators and community
           administrators you join. You should sign up with a public email.
         </p>
-      </PopoverPanel>
-    </Popover>
-    <div class="mt-4">
+      </Well>
+    </Transition>
+    <div v-if="email.length > 0" class="mt-4">
       <form-label class="flex flex-col"> Password </form-label>
       <div class="flex items-end">
         <form-input
@@ -84,7 +91,10 @@
         {{ passwordError }}
       </p>
     </div>
-    <div class="text-xs text-slate-700 mt-6">
+    <primary-button :is-loading="loading" class="mt-6">
+      Sign up
+    </primary-button>
+    <div class="text-xs text-slate-700 mt-3">
       By signing up, you agree to the Playabl
       <router-link
         class="text-brand-500"
@@ -104,13 +114,6 @@
         Privacy Policy
       </router-link>
     </div>
-    <primary-button :is-loading="loading" class="mt-2">
-      Sign up
-    </primary-button>
-    <p class="text-xs text-slate-700 text-center my-4">OR</p>
-    <div class="flex justify-center">
-      <GoogleButton @click="emit('signUpWithGoogle')" />
-    </div>
   </form>
 </template>
 <script setup lang="ts">
@@ -120,14 +123,15 @@ import {
   EyeSlashIcon,
   InformationCircleIcon,
 } from "@heroicons/vue/24/outline";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import FormLabel from "@/components/Forms/FormLabel.vue";
 import FormInput from "@/components/Forms/FormInput.vue";
 import Heading from "@/components/Heading.vue";
 import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
 import LinkButton from "@/components/Buttons/LinkButton.vue";
 import GhostButton from "@/components/Buttons/GhostButton.vue";
 import GoogleButton from "@/components/Buttons/GoogleButton.vue";
+import BaseButton from "./Buttons/BaseButton.vue";
+import Well from "./Well.vue";
 
 const emit = defineEmits(["signUpWithEmail", "signUpWithGoogle", "signIn"]);
 
@@ -138,6 +142,8 @@ defineProps({
   },
 });
 
+const showEmailInfo = ref(false);
+
 const email = ref("");
 const password = ref("");
 const showPw = ref(false);

diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
@@ -95,10 +95,28 @@
         </MenuItems>
       </transition>
     </Menu>
-    <router-link v-else to="/login" class="whitespace-nowrap hover:underline">
-      Sign in
-    </router-link>
+    <div v-else class="flex gap-3 items-center">
+      <PrimaryButton class="whitespace-nowrap" @click="signUpMode = 'sign-up'"
+        >Sign Up</PrimaryButton
+      >
+      <LinkButton class="whitespace-nowrap" @click="signUpMode = 'sign-in'">
+        Sign in
+      </LinkButton>
+    </div>
   </section>
+  <SignUpModal
+    v-if="signUpMode === 'sign-up'"
+    open
+    @signed-in="signUpMode = 'closed'"
+    @cancel="signUpMode = 'closed'"
+  />
+  <SignUpModal
+    v-if="signUpMode === 'sign-in'"
+    open
+    initial-form="sign-in"
+    @signed-in="signUpMode = 'closed'"
+    @cancel="signUpMode = 'closed'"
+  />
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
@@ -112,8 +130,13 @@ import LoadingSpinner from "./LoadingSpinner.vue";
 import { log } from "@/util/logger";
 import UserAvatar from "./UserAvatar.vue";
 import flags from "@/util/flags";
+import PrimaryButton from "./Buttons/PrimaryButton.vue";
+import SignUpModal from "./Modals/SignUpModal.vue";
+import LinkButton from "./Buttons/LinkButton.vue";
+
 const activeMenuItem = "bg-gray-100 cursor-pointer";
 
+const signUpMode = ref<"sign-up" | "sign-in" | "closed">("closed");
 const isSigningOut = ref(false);
 const router = useRouter();
 

diff --git a/src/pages/Community/CommunityBase.vue b/src/pages/Community/CommunityBase.vue
@@ -44,6 +44,7 @@ import {
 } from "@/api/communities";
 import { isUuid } from "@/util/uuid";
 import { getUpcomingCommunityEvents } from "@/api/communityEvents";
+import { triggerUserAccessLoad } from "@/storeActions";
 
 const currentRoute = useRoute();
 const router = useRouter();
@@ -117,6 +118,9 @@ const communityData = ref<Community>();
 const isLoading = ref(true);
 
 onMounted(async () => {
+  if (store?.user?.id) {
+    triggerUserAccessLoad(store.user.id);
+  }
   if (typeof id !== "string") throw new Error("Unusable community id param");
   if (!isUuid(id)) {
     const data = (await loadCommunityByShortName({

diff --git a/src/pages/Community/CommunityHome.vue b/src/pages/Community/CommunityHome.vue
@@ -89,7 +89,11 @@
             v-else-if="communityStore.community.signup_method === 'REQUEST'"
             :is-loading="isJoining"
             class="w-full"
-            @click="displayRequestToJoinModal = true"
+            @click="
+              store.user
+                ? (displayRequestToJoinModal = true)
+                : (displaySignUp = true)
+            "
           >
             Request to join community
           </PrimaryButton>