add on-registration callback passing... (#946)

Author: NiloCK

packages/common-ui/src/components/auth/UserLoginAndRegistrationContainer.vue

@@ -7,7 +7,11 @@
           <template #activator="{ props }">
             <v-btn class="mr-2" size="small" color="success" v-bind="props">Sign Up</v-btn>
           </template>
-          <UserRegistration @toggle="toggle" />
+          <UserRegistration
+            @toggle="toggle"
+            @signup-success="handleSignupSuccess"
+            :on-signup-success="handleSignupSuccess"
+          />
         </v-dialog>
 
         <!-- Login button: always show in guest mode -->
@@ -46,6 +50,12 @@ const props = defineProps<{
   showLoginButton?: boolean;
   redirectToPath?: string;
   showRegistration?: boolean;
+  onSignupSuccess?: (payload: { username: string }) => void;
+}>();
+
+// Define emits (keeping for backward compatibility if needed)
+const emit = defineEmits<{
+  'signup-success': [payload: { username: string }]
 }>();
 
 const route = useRoute();
@@ -126,6 +136,21 @@ const openResetDialog = () => {
 const closeResetDialog = () => {
   resetDialog.value = false;
 };
+
+const handleSignupSuccess = (payload: { username: string }) => {
+  console.log('[UserLoginAndRegistrationContainer] Received signup-success:', payload);
+  // Close the registration dialog
+  regDialog.value = false;
+
+  // Call the callback prop if provided (preferred method)
+  if (props.onSignupSuccess) {
+    console.log('[UserLoginAndRegistrationContainer] Calling onSignupSuccess callback');
+    props.onSignupSuccess(payload);
+  }
+
+  // Also emit event for backward compatibility
+  emit('signup-success', payload);
+};
 </script>
 
 <style scoped>

packages/common-ui/src/components/auth/UserRegistration.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { UserDBInterface } from '@vue-skuilder/db';
 import { alertUser } from '../SnackbarService';
 import { Status, log } from '@vue-skuilder/common';
@@ -88,6 +88,13 @@ import { validatePassword } from '../../utils/passwordValidation';
 export default defineComponent({
   name: 'UserRegistration',
 
+  props: {
+    onSignupSuccess: {
+      type: Function as PropType<(payload: { username: string }) => void>,
+      required: false,
+    },
+  },
+
   emits: ['toggle', 'signup-success'],
 
   data() {
@@ -184,10 +191,13 @@ Author: ${this.author}
           return;
         }
 
+        console.log('[UserRegistration] About to call createAccount for:', this.username);
         this.user
           .createAccount(this.username, this.password)
           .then(async (resp: any) => {
+            console.log('[UserRegistration] .then() called, resp:', resp);
             if (resp.status === Status.ok) {
+              console.log('[UserRegistration] resp.status === Status.ok, proceeding...');
               // Account created successfully via PouchDB
               this.authStore.loginAndRegistration.loggedIn = true;
               this.authStore.loginAndRegistration.init = false;
@@ -219,8 +229,18 @@ Author: ${this.author}
               }
 
               // Emit signup success event for parent to handle
-              const username = (await getCurrentUser()).getUsername();
-              this.$emit('signup-success', { username });
+              // Use the username we just created rather than calling getCurrentUser() again
+              // which can fail if the auth state hasn't fully synchronized
+              console.log('[UserRegistration] Emitting signup-success event for:', this.username);
+
+              // Call callback prop if provided (preferred method)
+              if (this.onSignupSuccess) {
+                console.log('[UserRegistration] Calling onSignupSuccess callback');
+                this.onSignupSuccess({ username: this.username });
+              }
+
+              // Also emit for backward compatibility
+              this.$emit('signup-success', { username: this.username });
             } else {
               if (resp.error === 'This username is taken!') {
                 this.usernameError = true;
@@ -239,7 +259,7 @@ Author: ${this.author}
             }
           })
           .catch((e) => {
-            console.error('createAccount error:', e);
+            console.error('[UserRegistration] .catch() called with error:', e);
             if (e) {
               const errorText = e?.message || e?.error || e?.toString() || 'Account creation failed';
               alertUser({

packages/platform-ui/cypress/e2e/user-registration.cy.js

@@ -20,7 +20,7 @@ describe('User Registration', () => {
 
   it('should prevent registration with an existing username', () => {
     cy.visit('/');
-    cy.contains('Sign Up').click();
+    cy.contains('Sign Up').click({ force: true });
 
     // Use a username that you know already exists
     const existingUsername = 'Colin'; // Replace with a username that exists in your system
@@ -43,7 +43,7 @@ describe('User Registration', () => {
 
   it('should validate that passwords match', () => {
     cy.visit('/');
-    cy.contains('Sign Up').click();
+    cy.contains('Sign Up').click({ force: true });
 
     const username = `testuser${Date.now()}`;
     const password = 'password123';

packages/platform-ui/cypress/support/commands.js

@@ -20,7 +20,9 @@ Cypress.Commands.add('registerUser', (username = null, password = 'securePasswor
 
   // Visit the signup page
   cy.visit('/');
-  cy.contains('Sign Up').click();
+
+  // Click Sign Up button (using force: true to bypass drawer overlay if present)
+  cy.contains('Sign Up').click({ force: true });
 
   // Fill out the registration form
   cy.get('input[name="username"]').type(finalUsername);

packages/platform-ui/src/App.vue

@@ -44,8 +44,12 @@
       <SkMouseTrapToolTip hotkey="m" command="Toggle Menu" highlight-effect="none" position="right">
         <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
       </SkMouseTrapToolTip>
+      <v-chip color="red" class="mr-2">TESTING123</v-chip>
       <v-spacer></v-spacer>
-      <user-login-and-registration-container :show-registration="isRegistrationEnabled()" />
+      <user-login-and-registration-container
+        :show-registration="isRegistrationEnabled()"
+        :on-signup-success="handleSignupSuccess"
+      />
     </v-app-bar>
 
     <v-main>
@@ -80,6 +84,7 @@
 <script lang="ts" setup>
 import { ref, computed, onBeforeMount, onMounted, watch } from 'vue';
 import { useTheme } from 'vuetify';
+import { useRouter } from 'vue-router';
 import {
   UserLoginAndRegistrationContainer,
   SnackbarService,
@@ -101,10 +106,16 @@ const drawer = ref(true);
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 const theme = useTheme();
+const router = useRouter();
 const rail = ref(false);
 
 const ready = ref(false);
 
+const handleSignupSuccess = ({ username }: { username: string }) => {
+  console.log('Signup successful, redirecting to:', `/u/${username}/new`);
+  router.push(`/u/${username}/new`);
+};
+
 const toggleDrawer = () => {
   drawer.value = !drawer.value;
   // Optional: reset rail when drawer is toggled