register page is not redirecting to the homeowner-dashbaord page like it should

[remoteconn-7891]

Hello everyone, on my VueJS register page, I'm not able to navigate to the homeowner-dashboard page after I click on the submit form. It just shows the Homeowner Dashboard is loading and that's it. I will send a few screenshots.

But here are some important files that may help you. RegisterPage.vue

<template>
    <layout-div>
      <div class="row justify-content-md-center mt-5">
        <div class="col-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title mb-4">Register</h5>
              <form>
                <div class="mb-3">
                  <label htmlFor="name" class="form-label">Name</label>
                  <input
                    type="text"
                    class="form-control"
                    id="name"
                    name="name"
                    v-model="name"
                  />
                  <div v-if="validationErrors.name" class="flex flex-col">
                    <small class="text-danger">{{ validationErrors?.name[0] }}</small>
                  </div>
                </div>
                <div class="mb-3">
                  <label htmlFor="email" class="form-label">Email</label>
                  <input
                    type="email"
                    class="form-control"
                    id="email"
                    name="email"
                    v-model="email"
                  />
                  <div v-if="validationErrors.email" class="flex flex-col">
                    <small class="text-danger">{{ validationErrors?.email[0] }}</small>
                  </div>
                </div>
                <div class="mb-3">
                  <label htmlFor="password" class="form-label">Password</label>
                  <input
                    type="password"
                    class="form-control"
                    id="password"
                    name="password"
                    v-model="password"
                  />
                  <div v-if="validationErrors.password" class="flex flex-col">
                    <small class="text-danger">{{ validationErrors?.password[0] }}</small>
                  </div>
                </div>
                <div class="mb-3">
                  <label htmlFor="confirm_password">Confirm password</label>
                  <input
                    type="password"
                    class="form-control"
                    id="confirm_password"
                    name="confirm_password"
                    v-model="confirmPassword"
                  />
                </div>
                <div class="d-grid gap-2">
                   <button
                    :disabled="isSubmitting"
                    type="button"
                    @click="$router.push('/homeowner-dashboard')">click me
                  </button>
                  <p class="text-center">
                    Already have an account
                    <a href="#" @click.prevent="redirectToLogin">Sign in</a>
                  </p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </layout-div>
  </template>
  
  <script>
  import axios from 'axios';
  import LayoutDiv from '../LayoutDiv.vue';
  
  export default {
    name: 'RegisterPage',
    components: {
      LayoutDiv,
    },
    data() {
      return {
        name: '',
        email: '',
        password: '',
        confirmPassword: '',
        validationErrors: {},
        isSubmitting: false,
      };
    },
    created() {
      if (localStorage.getItem('token') && localStorage.getItem('token') !== '') {
        this.$router.push('/homeowner-dashboard');
      }
    },
    methods: {
      registerAction() {
        const payload = {
          name: this.name,
          email: this.email,
          password: this.password,
          password_confirmation: this.confirmPassword,

        };
        console.log(payload);
        console.log("successfully registered");
        //fetch("https://jsonplaceholder.typicode.com/todos/")
        //.then(r => r.json())
        //.then(console.log)
  
        axios
          .post('/api/register', payload)
          .then((response) => {
            localStorage.setItem('token', response.data.token);
            console.log(response);
            console.log(this.$router);
            this.$router.push({name: 'HomeownerDashboard' });
          })
          .catch((error) => {
            this.isSubmitting = false;
            if (error.response && error.response.data.errors) {
              this.validationErrors = error.response.data.errors;
            }
          });
      },
      redirectToLogin() {
        this.$router.push('/login');
      },
    },
  };
  </script>

HomeownerDashboard.vue

<script setup lang="ts">

</script>

<template>
  <LayoutDiv>
    <div class="row justify-content-md-center mt-5">
      <div class="col-10">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title">Homeowner Dashboard</h5>
          </div>
          <div v-if="dashboardData">
            <p><strong>Welcome, {{  dashboardData.name }}!</strong></p>
            <p>Your current location: {{  dashboardData.city }}, {{ dashboardData.state }}, {{ dashboardData.zip }}, {{ dashboardData.profilePic }}</p>
            <div>
              <img
                v-if="dashboardData.profilePic"
                :src="dashboardData.profilePic"
                alt="Profile Picture"
                class="profile-pic"
              />
              <p v-else>No profile picture available.</p>
            </div>
            <h6 class="mt-4">Pending Service Requests</h6>
            <ul v-if="dashboardData.pendingRequests.length"> 
              <li v-for="(request, index) in dashboardData.pendingRequests" :key="index">
                {{  request.description  }} - {{ request.date }}
              </li>
            </ul>
            <p v-else>No pending service requests.</p>

            <h6 class="mt-4">Your Saved Arborists</h6>
            <ul v-if="dashboardData.savedArborists.length">
              <li v-for="(arborist, index) in dashboardData.savedArborists" :key="index">
                {{ arborist.name }} ({{ arborist.companyName }})
              </li>
            </ul>
            <p v-else>No saved arborists yet.</p>

            <button class="btn btn-primary mt-3" @click="viewSearchArborists">Find Arborists</button>
          </div>
          <div v-else>
            <p>Loading Dashboard...</p>
          </div>
        </div>
      </div>
    </div>
  </LayoutDiv>
</template>
  
<script lang="ts">
import axios from 'axios';
import LayoutDiv from '../LayoutDiv.vue';
import { defineComponent, DefineComponent } from 'vue';
import { error } from 'console';

interface DashboardData {
  name: string;
  city: string;
  state: string;
  zip: string;
  profilePic: string;
  pendingRequests: { description: string; date: string }[];
  savedArborists: { name: string; companyName: string }[];
}

export default defineComponent({
  name: 'HomeownerDashboard',
  components: {
    LayoutDiv,
  },
  data() {
    return {
      dashboardData: null as DashboardData | null,
    };
  },
  created() {
    this.fetchDashboardData();
  },
  methods: {
    fetchDashboardData() {
      axios
        .get('/api/homeowner-dashboard', {
          headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
        })
        .then((response) => {
          this.dashboardData = response.data;
        })
        .catch((error) => {
          console.error('Error fetching dashboard data:', error);
        });
    },
    viewSearchArborists() {
      this.$router.push('/search');
    },
  },
});
</script>

<style scoped>
.card-header {
  background-color: #f8f9fa;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 0.5rem;
}

button {
  display: block;
  margin: 0 auto;
}
</style>

maint.ts

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from './router';
import App from './App.vue';
import axios from 'axios';
// axios.defaults.baseURL = 'http://localhost:8000';

// Set up axios default base URL using environment variable
axios.defaults.baseURL = import.meta.env.VITE_APP_API_URL;

 //Optionally, use the API key in headers if needed
axios.interceptors.request.use(function (config) {
    config.headers['X-Binarybox-Api-Key'] = import.meta.env.VITE_APP_API_KEY;
    return config;
});

const pinia = createPinia();;

const app = createApp(App);

app.use(pinia);
app.use(router);
app.mount('#app');

index.ts

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/pages/Home.vue';
import LoginPage from '../components/pages/LoginPage.vue';
import DashboardPage from '../components/pages/DashboardPage.vue';
import RegisterPage from '../components/pages/RegisterPage.vue';
import HomeownerDashboard from '../components/pages/HomeownerDashboard.vue';
import SearchArborists from '../components/pages/SearchArborists.vue';




const routes = [
  { path: '/', component: Home }, // Redirect `/` to `/login`
  { path: '/login', component: LoginPage },
  { path: '/register', component: RegisterPage },
  { path: '/dashboard', component: DashboardPage },
  { path: '/homeowner-dashboard', component: HomeownerDashboard },
  { path: '/search', component: SearchArborists },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});


export default router;

Navbar.vue

<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    
      <router-link class="navbar-brand" to="/">Welcome to Arborhub</router-link>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <router-link class="btn btn-primary" to="/">Home</router-link>
          </li>
          <li v-if="!authStore.isAuthenticated" class="nav-item">
            <router-link class="btn btn-success" to="/login">Sign in</router-link>
          </li>
          <li v-if="!authStore.isAuthenticated" class="nav-item">
            <router-link class="btn btn-success" to="/register">Sign up</router-link>
          </li>
          <li v-if="authStore.isAuthenticated" class="nav-item">
            <router-link class="btn btn-success" to="/homeowner-dashboard">Homeowner Dashboard</router-link>
          </li>
          <li v-if="authStore.isAuthenticated" class="nav-item">
            <router-link class="btn btn-success" to="/search-arborist">Find an arborist for tree services near you</router-link>
          </li>
        </ul>
      </div>
    </nav>
  </template>
  
  <script setup lang="ts">
import { useAuthStore } from '@/stores/auth';  // This should now resolve correctly


  const authStore = useAuthStore();  // Access the auth store
  // You can add Vue-specific logic or imports here later if needed
  </script>
  
  <style scoped>
  /* You can add custom styles here if needed */
  /* Adjust navbar size */
.navbar {
  padding: 10px 20px; /* Shrinks the navbar */
}

/* Adjust the space between navbar and the content */
body {
  padding-top: 20px; /* Adds space above the content */
}

.welcome-message {
  text-align: center;
  font-size: 24px;
  padding: 20px;
}
  </style>

Please, I need some guidance on this problem. Any kind of solutions would be great. Also please let me know if you need anything else from me. I can also share my Github profile link here if it would help. I made the most recent push a few minutes ago.

[gitboyzcf]

The HomeownerDashboard component has been matched and displayed
There is just an issue with the request for the /app/homeowner-dashboard interface. Please check if the network request interface responds with a result

The dashboardData only displays the content of your screenshot when it has no value

[remoteconn-7891]

Are you suggesting to look at my networks tab or a particular file in my directory or both?

[gitboyzcf]

Check if the response result of the interface request in Browser Developer Tools>Network>/app/homeowner-dashboard has any value

[remoteconn-7891]

Okay.

[remoteconn-7891]

[remoteconn-7891]

It shows the request of homeowner-dashboard at the top and I clicked on the response on the right of network

[gitboyzcf]

You can see that there is no response to any results, indicating an interface issue, so this dashboardData is empty

[remoteconn-7891]

Or is this a backend specific issue that I need to rectify?

[remoteconn-7891]

I'm currently using Django as my backend. Not sure if adding data instances would help at all

[gitboyzcf]

This is a backend interface issue. You can take a look at the corresponding interface code response section of the backend, then check the database, add a few, and debug with a debugger

[remoteconn-7891]

Yeah so I'm using Django in particular as the main backend infrastructure. I executed automated testing for both the api endpoints for both the registration/login with no errors.

I'm finishing up the homeowner profile (dashboard) api endpoint right now. So I'll perform some automated tests on this specific api endpoint in my backend and see if there are any issues.

Because it looks like the register api call in VueJS seems to work fine, e.g. email/password was created successfully. Of course, I didn't test the api call for the login page

[remoteconn-7891]

Thanks.