35 Commits

Author SHA1 Message Date
Bastian Masanek
04f2e29403 Refactor Layout and Styling in UserMenu, AppHeader, and Product Pages
- Adjusted button margin in UserMenu.vue for better alignment.
- Updated container classes in AppHeader.vue to use max-width for improved responsiveness.
- Modified max-width settings in product detail page to enhance layout consistency across different states (loading, error, product display).
2025-11-25 08:53:39 +01:00
Bastian Masanek
46d03a0e4a Refactor Tailwind Configuration and Update Checkout Form UI
- Renamed the 'red' color to 'experimenta-red' in tailwind.config.ts for better clarity.
- Replaced SVG error icons with the AlertCircle component in CheckoutForm.vue for improved visual consistency.
- Streamlined Input component structure in CheckoutForm.vue for cleaner code.
- Updated styleguide.vue to reflect changes in color representation for better documentation.
2025-11-24 08:43:26 +01:00
Bastian Masanek
1ea445bbfb Add AlertCircle Icon to Authentication Page 2025-11-21 11:55:36 +01:00
Bastian Masanek
68395951dc Refactor Select Component Variants and Styles for Improved Consistency
- Updated SelectTrigger and SelectItem components to use variant props for error handling, enhancing visual feedback.
- Refactored styles in SelectContent and SelectItem for better alignment and responsiveness.
- Added new variant handling in the SelectTrigger component to streamline class management.
- Updated styleguide.vue to include examples of the Select component with error and disabled states for better documentation.
2025-11-06 10:25:35 +01:00
Bastian Masanek
5899988d60 Enhance Checkout Page UI with Edit Icon and Button Refactor
- Added an Edit3 icon from 'lucide-vue-next' to the "Warenkorb bearbeiten" button for improved visual clarity.
- Refactored button structure for better alignment and responsiveness, consolidating button attributes into a single line for cleaner code.
2025-11-05 03:48:11 +01:00
Bastian Masanek
a9df444145 Update Back Link in Order Confirmation Page
- Changed the back link from "/warenkorb" to "/checkout" in the order confirmation page to improve navigation consistency and user experience.
2025-11-05 03:19:45 +01:00
Bastian Masanek
dcd96ffb68 Enhance Role-Based Visibility and Navigation Logic
- Introduced role visibility checks in AreaTabs.vue to filter displayed areas based on the user's active role, improving user experience and accessibility.
- Updated RoleSwitcher.vue to enhance accessibility with a high-contrast checkmark for better visibility.
- Modified useActiveRole.ts to streamline role initialization and refresh logic for role-based product visibility.
- Added explicit keys for role-based data fetching in product-related pages to ensure accurate data refresh.
- Enhanced API endpoint for product retrieval to return 404 if a product is not accessible based on the user's role, ensuring security and clarity.
2025-11-05 01:33:46 +01:00
Bastian Masanek
f9125e744b Implement Role Management Features and UI Enhancements
- Introduced a new composable `useActiveRole` for managing user roles, including fetching role status and switching roles with server validation.
- Updated `RoleSwitcher.vue` to utilize the new composable, enhancing role selection with improved error handling and UI feedback.
- Added new API endpoints for role management, including fetching user role status and switching active roles.
- Enhanced product visibility logic to filter based on the user's active role, ensuring a tailored experience.
- Updated database schema to support last active role tracking for users, improving session management.
- Refined UI components across the application to reflect role-based changes and improve user experience.
2025-11-05 01:04:26 +01:00
Bastian Masanek
0e450684c6 Enhance Product Page with Improved Icon Integration and UI Elements
- Added ArrowLeftIcon and ShoppingCartIcon from 'lucide-vue-next' for better visual representation in the product page.
- Updated the "Add to Cart" button to include an icon, enhancing user experience and clarity.
- Improved navigation link with an icon for a more cohesive design.
2025-11-04 14:57:40 +01:00
Bastian Masanek
f80e80009d Refactor Order Success Page to improve icon usage and code consistency
- Imported HouseIcon and HandbagIcon from 'lucide-vue-next' for better visual representation.
- Simplified SVG elements by removing unnecessary line breaks and ensuring consistent formatting.
- Enhanced loading and success states with improved icon integration for a more cohesive user experience.
2025-11-04 13:40:33 +01:00
Bastian Masanek
a22e4b42ca Refactor navigation components for improved layout and functionality
- Updated UserMenu.vue to enhance button styling and spacing for a more modern look.
- Simplified CartFAB.vue to always show the cart button when items are present, regardless of the route.
- Adjusted AppHeader.vue for better alignment of elements.
- Enhanced AreaTabs.vue to enable the educator tab and improve badge styling.
- Refined BottomNav.vue to handle cart visibility and navigation more effectively.

These changes aim to enhance user navigation and overall experience within the application.
2025-11-03 19:20:10 +01:00
Bastian Masanek
860cd3ec9d Refactor AppHeader and AreaTabs components for improved layout and functionality
- Adjusted AppHeader.vue for better spacing and alignment of elements, enhancing the overall visual appeal.
- Updated AreaTabs.vue to include a new 'Start' tab with a home icon, improving navigation options.
- Modified route handling in AreaTabs.vue to dynamically determine the current area based on the route.
- Changed default redirect destination in useAuth.ts to the root path for a more intuitive user experience.
- Enhanced index.vue to provide a more welcoming message and improved content presentation.

These changes aim to enhance user navigation and overall experience within the application.
2025-11-03 17:36:54 +01:00
Bastian Masanek
f6f09ca147 Refactor UI components for improved styling and user experience
- Updated UserMenu.vue to enhance button and avatar styles for a more modern look.
- Adjusted alert component styles in index.ts for consistent rounded corners.
- Simplified loading state markup in order confirmation page for cleaner code.
- Enhanced button and link text for better clarity and user navigation.

These changes aim to improve the overall aesthetic and usability of the application, ensuring a more cohesive user experience.
2025-11-03 17:17:40 +01:00
Bastian Masanek
782bd6cdd7 Enhance CheckoutForm and Order components with user data integration
- Refactored CheckoutForm.vue to utilize an extended user type, incorporating additional address fields for improved user data handling.
- Updated OrderSummary.vue to conditionally display salutation based on user input.
- Standardized error alert styling across multiple pages, changing variant from 'destructive' to 'error' for consistency.
- Adjusted button styles in various components to align with the new 'experimenta' variant.

These changes aim to improve user experience by ensuring accurate data representation and consistent UI elements across the checkout and order processes.
2025-11-03 17:00:22 +01:00
Bastian Masanek
b302411626 Implement checkout and payment flow with new components
- Added Checkout and Payment pages to handle user authentication and order processing.
- Introduced MockPayPalButton for simulating payment during development.
- Updated CartSheet and CartSidebar components to navigate to the new checkout page.
- Enhanced Cart UI with responsive design for mobile and desktop views.
- Implemented order confirmation and success pages to provide feedback after payment completion.

These changes complete the checkout and payment functionality, improving the overall user experience and ensuring a seamless transition from cart to order confirmation.
2025-11-03 16:24:00 +01:00
Bastian Masanek
527379a2cd Enhance checkout flow with new components and validation
- Added AddressForm and CheckoutForm components for user input during checkout.
- Implemented validation using Zod and VeeValidate for billing address fields.
- Created OrderSummary and MockPayPalButton components for order confirmation and payment simulation.
- Updated CartSheet and CartSidebar to navigate to the new checkout page at '/kasse'.
- Introduced new API endpoints for validating checkout data and creating orders.
- Enhanced user experience with responsive design and error handling.

These changes complete the checkout functionality, allowing users to enter billing information, simulate payment, and confirm orders.
2025-11-03 15:38:16 +01:00
Bastian Masanek
4a3ef037ab Update AreaTabs and experimenta page for educator annual pass visibility
- Disabled the educator tab in AreaTabs and added a 'Demnächst' badge for future visibility.
- Updated the experimenta page header to singular form for consistency and improved layout of ProductCard components for better readability.

These changes enhance the user experience by clarifying product availability and improving the overall presentation of the educator annual pass.
2025-11-03 14:17:58 +01:00
Bastian Masanek
e252d68f0c Add educator annual pass functionality and update product listings
- Introduced a new page for educator annual passes, displaying relevant products with a dedicated layout and loading/error states.
- Updated AreaTabs component to include the educator tab and adjusted routing logic.
- Modified useAuth to redirect users to the products page after login.
- Adjusted mock product prices and stock quantities in the database seeding script to reflect new pricing strategy.

These changes enhance the user experience for educators and improve product visibility in the application.
2025-11-03 14:03:29 +01:00
Bastian Masanek
b372e2cf78 Implement shopping cart functionality with UI components and API integration
- Added CartItem, CartSummary, CartEmpty, CartSidebar, and CartSheet components for managing cart display and interactions.
- Integrated useCart and useCartUI composables for cart state management and UI control.
- Implemented API endpoints for cart operations, including fetching, adding, updating, and removing items.
- Enhanced user experience with loading states and notifications using vue-sonner for cart actions.
- Configured session management for guest and authenticated users, ensuring cart persistence across sessions.

This commit completes the shopping cart feature, enabling users to add items, view their cart, and proceed to checkout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2025-11-03 12:43:13 +01:00
Bastian Masanek
d6bed8fb50 Import CheckCircle icon from lucide-vue-next in product detail demo page for enhanced visual representation 2025-11-02 09:31:07 +01:00
Bastian Masanek
e55c7613cd Add Role Switcher component to styleguide with detailed usage instructions
- Introduced RoleSwitcher component to the styleguide, allowing users to switch between different roles (individual, educator, company).
- Enhanced the styleguide with a live example, design features, and component usage instructions for better clarity and usability.
- Updated layout to include a new section for the Role Switcher, improving overall navigation and user experience.
2025-11-02 09:24:36 +01:00
Bastian Masanek
a826ea1344 Implement experimenta product listing page and enhance navigation components
- Added a new page for displaying experimenta annual passes, integrating ProductCard and ProductGrid components for product presentation.
- Updated API to filter products by category, allowing for specific product queries.
- Enhanced navigation components, including AreaTabs and RoleSwitcher, to improve user experience and accessibility.
- Refactored existing components for better styling consistency and responsiveness.
- Improved dropdown menu components with updated styles and hover effects for better usability.
2025-11-01 20:08:28 +01:00
Bastian Masanek
81495d5e17 Enhance navigation and UI components for improved user experience
- Added new AppHeader and BottomNav components for better navigation across the application.
- Introduced AreaTabs for product area navigation and integrated RoleSwitcher for user role management.
- Created CartButton component to display cart status and item count.
- Implemented UserMenu with login/logout functionality and user greeting.
- Added Badge component for notifications and status indicators.
- Updated layout to accommodate new navigation components and ensure mobile responsiveness.
- Created product detail demo page to showcase design patterns and features.
- Enhanced existing components with improved styling and functionality.
2025-11-01 19:51:02 +01:00
Bastian Masanek
7ab80a6635 Add product detail and listing pages with API integration
- Created a new product detail page to display individual product information, including images, descriptions, and pricing.
- Implemented a product listing page to showcase all available products using the ProductCard and ProductGrid components.
- Added API endpoints for fetching product data, ensuring only active products are returned.
- Introduced a database seed script to populate the database with initial mock product data for development and testing.
- Updated settings to include new database seeding command and adjusted routing for product links.
2025-11-01 19:07:59 +01:00
Bastian Masanek
5115a4db82 Add ProductCard and ProductGrid components for mobile-optimized product listings
- Introduced ProductCard component to display individual product details, including image, title, description, price, and optional badges.
- Added ProductGrid component to create a flexible grid layout for displaying multiple ProductCard components, supporting 1-4 columns.
- Created a demo page to showcase the ProductCard and ProductGrid components in action, highlighting their responsive design and features.
- Updated styleguide to include links and descriptions for the new components.
2025-11-01 18:19:31 +01:00
Bastian Masanek
cc35636d1a Implement Password Grant Flow for Authentication and Enhance User Experience
- Introduced Password Grant Flow for user authentication, allowing direct login with email and password.
- Updated `useAuth` composable to manage login and logout processes, including Single Sign-Out from Cidaas.
- Enhanced user interface with a new `UserMenu` component displaying user information and logout functionality.
- Updated homepage to show personalized greetings for logged-in users and a login prompt for guests.
- Added logout confirmation page with a countdown redirect to the homepage.
- Documented the implementation details and future enhancements for OAuth2 flows in CLAUDE.md and other relevant documentation.
- Added test credentials and guidelines for automated testing in the new TESTING.md file.
2025-11-01 15:23:08 +01:00
Bastian Masanek
c385779221 Enhance FormMessage and styleguide for improved accessibility and user feedback
- Add orange AlertCircle icon to FormMessage component for better visibility of validation errors.
- Update styleguide to demonstrate new alert components with icons for error, success, and warning messages.
- Refactor CSS for status messages and form error messages to improve layout and accessibility compliance.
2025-10-31 17:40:10 +01:00
Bastian Masanek
d9f08bbef2 Enhance user communication and improve UI components
- Update CLAUDE.md to mandate informal "Du" form for user communication in all UI text and emails.
- Modify LoginForm and RegisterForm components to reflect informal language in validation messages and placeholders.
- Add secure connection indicators in LoginForm for user awareness.
- Update alert component styles for better visual feedback.
- Introduce experimenta company information document for user reference.
2025-10-31 17:28:07 +01:00
Bastian Masanek
7c7c4fcb6f Implement direct login functionality with email and password
- Update login API to support direct authentication via email and password, removing the OAuth2 redirect flow.
- Modify LoginForm component to include password field and validation.
- Refactor useAuth composable to handle login with both email and password.
- Remove unnecessary OAuth2 callback handler and PKCE utilities.
- Update relevant documentation and error handling for the new login method.
2025-10-31 14:27:38 +01:00
Bastian Masanek
f8572c3386 Implement authentication phase with Cidaas OAuth2 integration
- Add authentication middleware to protect routes
- Create API endpoints for login, logout, registration, and user info
- Develop UI components for login and registration forms
- Integrate VeeValidate for form validation
- Update environment configuration for Cidaas settings
- Add i18n support for English and German languages
- Enhance Tailwind CSS for improved styling of auth components
- Document authentication flow and testing procedures
2025-10-31 11:44:48 +01:00
Bastian Masanek
38056e04d8 Enhance styling with updated Tailwind config and CSS
- Extend Tailwind config with experimenta brand colors
- Improve CSS base styles and component formatting
- Update index page with refined typography
2025-10-30 14:34:21 +01:00
Bastian Masanek
e2e36ad7ae Add internal styleguide page with HTTP Basic Auth
- Create /internal/styleguide route with protected layout
- Add styleguide.vue layout with auth protection
- Configure internal pages auth credentials in .env.example
- Update nuxt.config for internal routes handling
2025-10-30 14:34:17 +01:00
Bastian Masanek
9102dab881 Enhance index page styling with accent borders and updated typography, and improve CSS formatting for better readability. 2025-10-30 14:33:55 +01:00
Bastian Masanek
aea87ccc5f Add critical CSS styles for layout and typography, enhance button styles with rounded corners, and introduce a progress card component with Safrangold accent border. 2025-10-30 14:33:41 +01:00
Bastian Masanek
6e50ec7034 Init 2025-10-30 08:24:44 +01:00