form-scripts

This section of the documentation provides details on the JavaScript files within the form-scripts directory. These scripts are crucial for handling form interactions, user authentication, and profile creation/editing functionalities.

editScript.js

editScript.js plays a crucial role in the user experience by enabling profile editing functionality within the renting website prototype platform. This script allows users to update their profile information, including preferences, profile images, and geographic preferences, through an intuitive and interactive interface. It leverages modular JavaScript by utilizing imported modules for dropdown setup, image upload, and map-based isochrone inputs.

Key Functionalities

  • Form Pre-population: Automatically fills form fields with the user’s existing data, facilitating easy updates.

  • Dropdown Initialization: Utilizes setupDropdowns to populate dropdowns with selections such as age range, rent budget, and user features.

  • Profile Image Upload: Implements image upload and validation logic through setupProfileImageUpload, ensuring that profile pictures meet specified criteria.

  • Geographic Preferences: Enables users to define their preferred living area using map-based isochrone selections via setupIsochroneInput.

  • Responsive Navigation: Manages the side menu improving site navigation with setupSideMenu.

  • Preference Reset Confirmation: Adds a layer of user confirmation before resetting preferences, preventing accidental data loss with setupResetPreferences.

  • Validation and Submission: Validates the move-in date range and form fields before submission to ensure data integrity.

Integration and Usage

This script is integrated within the profile editing form page, where it is executed upon the page’s load to prepare the form for user interaction. Key integrations include:

  • DOMContentLoaded: Waits for the full document to load before initializing form elements and functionalities.

  • jQuery and Select2: Enhances form elements for a better user experience, providing searchable dropdowns and clear visual feedback.

  • MapLibre Integration: Incorporates interactive maps for setting geographic preferences, directly influencing the user’s isochrone inputs.

  • Modular JavaScript: Leverages ES6 module imports to organize code, ensuring maintainability and scalability of the platform’s frontend architecture.

login.js

The login.js script manages user authentication through Google sign-in, configuring Firebase for the project, handling the sign-in process with a popup and Google provider, and sending the Google ID token to the server for verification and handling post-authentication user redirection.

Key Functionalities

signInWithGoogle()

Initiates the sign-in process with Firebase using a Google provider popup and manages the authentication flow.

Implementation Details

  1. Firebase Configuration: Sets up the Firebase configuration specific to your project, including keys and project identifiers.

  2. Firebase Initialization: Initializes Firebase with the provided configuration, enabling its services for the application.

  3. Google Sign-In Process: - Leverages Firebase Authentication to initiate a Google sign-in process. - Utilizes a popup window for users to select their Google account and authenticate. - On successful sign-in, the user’s ID token is retrieved.

  4. Server Communication: - The Google ID token is sent to the server via a POST request. - This is essential for verifying the user’s identity on the server-side and maintaining session integrity.

  5. Post-Authentication Redirection: - Upon successful authentication and server verification, the user is redirected to a specific route, as dictated by the server response.

  6. Error Handling: Catches and logs any errors that may occur during the sign-in process, ensuring robustness in authentication.

  7. Event Listener on Sign-In Button: Attaches a click event listener to the Google sign-in button, activating the signInWithGoogle function.

userCreation.js

userCreation.js orchestrates the user profile creation process on the renting website prototype platform. This script ensures a streamlined and error-free setup for new users by handling form element initialization, input validation, and submission. It leverages additional modules for dropdown setups, image upload validations, and geographic preference inputs, enhancing the user onboarding experience.

Key Functionalities

  • Form Initialization: Automatically sets up dropdowns, image upload fields, and geographic inputs as soon as the document is ready.

  • Input Validation: Validates user inputs such as the move-in date range and profile image size to comply with platform policies before form submission.

  • Dynamic Dropdowns: Utilizes the setupDropdowns function from the signUp module to populate form dropdowns with options like features, enhancing user interaction.

  • Profile Image Upload: Leverages the setupProfileImageUpload function to implement image upload functionality with validation for file size and type.

  • Geographic Preference Setup: Incorporates the setupIsochroneInput function for users to visually select their geographic preferences on a map.

Integration and Usage

This script is integrated within the user creation form page, where it is executed upon the page’s load to prepare the form for user interaction. Key integrations include:

  • DOMContentLoaded: Waits for the full document to load before initializing form elements and functionalities.

  • jQuery and Select2: For enhancing form elements, such as dropdowns, with advanced features like search and clear options.

  • MapLibre: To provide an interactive map interface for selecting geographic preferences.

  • Form Submission Handling: Includes checks on the client side to ensure all user inputs meet the required criteria before allowing the form to be submitted. This prevents unnecessary server requests and improves the user experience by providing immediate feedback on any errors.

Integration with HTML

Each script is linked to its respective HTML file, where form elements are defined and the script is included at the bottom of the HTML document to ensure the DOM is loaded before the script runs. Interaction with these elements is managed via the document’s event listeners, allowing for real-time, client-side validation and UI updates.

<!-- Example of script inclusion in HTML -->
<script type="module" src="../static/scripts/form-scripts/userCreation.js"></script>

For more detailed instructions on usage and customization, refer to the usage and comments within each script and the associated HTML files for context.

See Also

Note

For a complete overview of all modules, visit the modules overview page.