Login - hackforla/tdm-calculator GitHub Wiki
Login Form
- This functionality helps new user to Register as well as existing user to Sign in into the TDM calculator website. For more details, please visit: Registration and Login.
- Allow user to update password if they forgot their password. For more details, please visit: Forgot Password.
- Once user is logged in it will allow user to work on projects and save projects.
- It helps user in modify account detail. For more details, please visit: Update Account.
URLs
- Dev URL: https://tdm-dev.azurewebsites.net/login
- Prod URL: https://tdm.ladot.lacity.org/login
- Figma Design:
- Wiki: TDM Calculator Figma Pages and Structure
- Design Figma: Login page mockup
- Handoff Figma: Login page mockup
Issue label
- Issue Label on Issue tab: p-feature: Registration Page
- Issue label on Project Board: p-feature: Registration Page
Screen shots of page
Technical Details
Application Structure
-
The overall Application, controls routing App.js
-
In index.jsx loginEvent is a placeholder, intended to be triggered later in the application's code to track successful or attempted logins.
-
In roles.jsx if the user isn't logged in (gets a "not authorized" error), they are sent to the login page.
Authorization
-
This is Login form component Login.jsx. This provides a login form for users to access the application.
-
In confirmemail.jsx - L36 confirmemail.jsx - L45 after a user confirms their email via a link, it automatically redirects them to the login page, pre-filling their email address.
-
logout.jsx redirects to the "/login" page after the logout
-
register.jsx refers to a link that, when clicked, will navigate the user to the “/login” route, allowing them to access the login form.
-
resetpassword.jsx redirects to the login page
Login in Layout
-
NavBar.jsx imports NavBarLogin, It refers to the functionality and display elements handled by the separate NavBarLogin component, which is included in this navigation bar.
-
NavBarLogin.jsx handles user login status in the navigation bar by showing a "Login" link for logged-out users (with a tooltip on the calculation page) and a greeting with a "Logout" link for logged-in users.
LoginId
-
ProjectsDropdown.jsx loginId refers to the unique identifier of the user who created or is associated with a specific project.
-
ProjectList.jsx loginId represents the unique identifier of the user associated with each listed project
-
PdfFooter.jsx refers to the unique identifier of the user who is associated with the specific project being displayed in the PDF footer.
-
MultiProjectToolbarMenu.jsx loginId refers to the unique identifier of the user who created a specific project, used to determine if the currently logged-in user is the owner of that project.
-
ProjectContextMenu.jsx loginId refers to the unique identifier of the user who created the specific project, used to determine if the currently logged-in user (account?.id) is the owner of that project and therefore has permission to perform certain actions (like renaming or deleting the snapshot).
-
SubmitSnapshotPage.jsx "Login" here is used to retrieve the logged-in user's email for error handling and to filter the displayed projects to only those associated with that user's loginId.
ProjectWizard(mainly uses loginId)
-
TdmCalculationContainer.jsx when User's session has expired, to let React know they are logged out and redirect to the login page This code redirects the user to the login page if it tries to fetch a project and gets a "not found" error, suggesting they might not be logged in or authorized.
-
TdmCalculationWizard.jsx If a user tries to access a specific project without being logged in, this code sends them to the login page first.
-
WizardFooter.jsx "Login" here provides the ID of the currently logged-in user to determine how to display the project's snapshot status.
-
ProjectSummary.jsx but it does not exist in this path on github. On my local machine code ”Login" refers to loginId, which is the identification number of the user who created this project, used as a property passed to this summary component.
Hooks
-
useCheckedProjectsStatusData.js “login" refers to retrieving and checking if the loginId (the ID of the user who created the project) is the same across all the currently selected projects.
-
useErrorHandler.js If your session has expired, log in again.
Client Services
-
account.service.js "login" refers to the function that makes an HTTP POST request to the /api/accounts/login endpoint on the server, sending the user's email and password to authenticate them and receive a response containing their login status and user information.
-
project.service.js "login" refers to loginId, which is sent as part of the request body when updating a project's DRO ID.
Documentation
- local-database.md documentation file To connect with Azure Data Studio mentions Authentication Type: SQL Login
Reports
-
report.html "logins" is part of the description "sample project and logins", indicating that the associated SQL script manages data related to both a sample project and user logins.
-
report.json "logins" is part of the string value "sample project and logins" assigned to the "description" key, indicating that the described database migration (version 0002) pertains to both a sample project and user logins.
Tests
-
email.test.js (LoginId) Even though this is a test about sending emails, the loginId is included with the feedback data to identify which logged-in user sent the feedback, so the system knows who to attribute it to.
-
account.test.js "login" functionality is crucial for simulating user authentication against the application's /api/accounts/login endpoint. These tests verify both successful logins (for regular users and security admins) and unsuccessful attempts due to incorrect credentials or non-existent accounts, ensuring the login mechanism functions as expected.
Login acts similar in project.text.js and faqCategory.test.js:
-
faqCategory.test.js "login" in this test file refers to the action of authenticating users (regular user, admin, and security admin) to obtain JWT tokens which are then used to authorize subsequent API requests made during the tests.
-
project.test.js the
.post("/api/accounts/login").send({...})calls simulate the process of a user or admin providing their email and password to gain access. If the credentials are correct, the server responds with a token that acts as proof of their logged-in status, allowing them to perform actions that require authentication.
App Controllers, Routes, Schemas
-
account.controller.js The login function handles user authentication by receiving credentials, verifying them with the accountService, and then either passing the authenticated user to the next stage or returning an error. This process is a crucial entry point, securing the application by ensuring only verified users can proceed to access protected resources and functionality.
-
project.controller.js (LoginId)The login process authenticates users externally and makes their data available; this code uses that data from req.user to authorize project access. It ensures that users can only view or modify projects they are permitted to, maintaining data security and access control.
-
account.routes.js Essentially, accountController.login checks who the user is, and jwtSession.login establishes how the user will be authenticated for future requests.
-
project.js (LoginId)it represents the ID of the user who is associated with a particular entity (in this case, an object with properties like name, address, etc.). It's used to link this data to a specific user in the system.
Server Services
-
account.service.js This code manages the storage of user data necessary for login, specifically retrieving user information by email and storing newly registered user details (including a hashed password). Functions like selectByEmail fetch data needed for authentication, while register prepares and stores that data.
-
feedback.service.js (LoginId)loginId is used to link the submitted feedback to the user who provided it, although the database insert doesn't directly use it.
-
project.service.js (LoginId)loginId is primarily used to control data access and enforce user permissions when querying or modifying project data, ensuring that users only interact with projects related to them.
-
sendgrid-service.js (LoginId)The loginId is used to figure out which projects the person sending feedback was working on, so that information can be included in the email that gets sent.
JWT
- jwt-session.js The login function is responsible for creating a user session upon successful authentication. It takes the user's information (email, ID, roles) from the request, generates a JSON Web Token (JWT) containing that information, and then sends that token back to the client as both a cookie and a JSON response.
Other
- privacypolicy.jsx, unauthorized.jsx, updateaccount.jsx, tdmauthprovider.jsx, app.scss, forgot-password.md, and register.md mention login information in their text/comments.
Here are the SQL files related to Login:
- V0001__setup_db_baseline.sql
- V0002__sample_project_and_logins.sql
- V20230909.2141__archives_and_deletes_users_and_projects.sql
- V20231102.0946__modify_project_snpshot_sproc_1437.sql
- V20240104.1705__add-project-rename-sproc.sql
- V20240626.1243__add_datesubmitted_col_to_project_select_sprocs_1759.sql
- V20240822.1446__add_project_submit-sproc.sql
- V20240922.1421__update_project_selectall.sql
- V20240922.1422__update_project_select_by_id.sql
- V20240922.1423__update_droId_and_dateModifiedAdmin_in_project.sql
- V20240922.1424__update_admin_notes_and_dateModifiedAdmin_in_project.sql
- V20241107.1155__add_cols_to_project_table.sql
- V20241107.1631__fix_project_submit-sproc.sql
- V20241112.1450__add_project_select_by_id_with_shared_email.sql
- V20250330.1839__allow_users_to_see_shared_snapshots_on_myprojects_2257.sql