Auth logic

[sl1ked]

Requirements

Login Button

1. App Bar Integration:

   • Add a Login button to the app bar using Vuetify’s button components for a consistent UI.
   • Button Text:
     • Display "Login" if the user is not logged in.
     • Change to "Logout" when the user is logged in.

2. Functionality:

   • Login:
     • When clicked, set the user as logged in using localStorage (e.g., localStorage.setItem('isLoggedIn', true)).
     • Update the app's state (use Vue’s reactive state management, such as data or Vuex).
   • Logout:
     • When clicked, log the user out by removing the login state from localStorage (e.g., localStorage.removeItem('isLoggedIn')).
     • Update the app's state to reflect the logged-out status.

Restrict Add Pets Functionality

1. Login Restriction:
   • Ensure the "Add" button in the pets form is only visible and functional for logged-in users.
   • If a user is not logged in:
     • Disable or hide the form.
     • Optionally, display a message prompting the user to log in to add pets.

Local Storage Integration

1. Persistence:
   • Use localStorage to store the login state (isLoggedIn key).
   • On page load, check the login state from localStorage (e.g., localStorage.getItem('isLoggedIn')).
   • If the user was logged in, update the app state to reflect this.