./src/App.tsx

The App.tsx file serves as the main entry point for the application. It sets up the necessary providers and routes for the application, ensuring that different components are rendered based on the current URL path. It ensures that users and admins can navigate to different parts of the application securely and that the application is properly localized and authenticated.

Informations regarding Wrappers, Providers and Toast.

Questions regarding App component: @cwsyth, @MysterionAutotronic

./src/pages/Login

The useAuthenticatedContext hook is utilized to manage the authentication state across the application. This context provides two values:

• authenticated: Indicates if a user is currently authenticated. It is used for role based routing in the following section.
• setAuthenticated: A function to update the authenticated state.

Upon component mount, the useEffect hook triggers an asynchronous route, which uses serviceHelper.routeBasedOnRole to navigate the user to different routes based on their role (if signed in else stay on the page).

The handleSubmit function includes a try-catch block to handle login attempts and displays the result inside the Toaster. The response status codes are managed as follows:

• StatusCodes.OK: Successful login and navigates to role-based routes
• StatusCodes.FORBIDDEN: Displays an error toast indicating invalid email or password
• StatusCodes.TOO_MANY_REQUESTS: Displays an error toast indicating too many login attempts
• Default: Handles other status codes with a generic error message
• Catch Block: For Network errors

Questions regarding Login page: @cwsyth

./src/pages/ProjectStart

Upon component mount, the useEffect hook triggers an asynchronous fetch for the submission status of the project. This status determines whether the project has expired, started, or is still in progress:

• expired && !isStarted: Stay on page and render welcome container
• expired: Display expired container
• isStarted: Route to commit page

Questions regarding ProjectStart page: @cwsyth, @samuelhertrich

./src/pages/Admin

./src/pages/Admin/components/AdminWelcome The Admin Welcome Page greets administrators with a personalized message confirming their login status and displaying their email address to ensure each admin has a clear and personalized confirmation of their successful login.

Questions regarding Welcome page: @samuelhertrich, @MysterionAutotronic

./src/pages/Admin/components/Users The Users page displays the user management. It shows all existing users with their respective email address, status, admin status and their invite token expiration date in a AG Grid table and offers the functionality to reinvite users, delete them or add new users.

Adding a new user is achieved using the Add User form. The new users email address in the input field is checked for validity using /^[^\s@]+@[^\s@]+\.[^\s@]+$/ and an Error is displayed if the email is invalid. The admin checkbox is used to specify if the new user should be a contestant or an admin. Clicking the Add User button asks for confirmation and sends a request to the backend. As soon as the backend returns a success the new user received an email containing his personal invite link and is rendered in the table.

Deleting a user with the Delete button requests the backend to delete the user after confirming the action(ConfirmationModal). When the backend returns success, the table is updated and the entry for the deleted user is no longer displayed.

A custom cell renderer for a Reinvite button is conditionally rendered when canBeReinvited from the API is true for the user. Clicking this button sends a new invitation email to the corresponding users email address.

./src/pages/Admin/components/ConfirmationModal The ConfirmationModal is shown whenever a user is added, deleted or reinvited. It features a close button, a message text and yes and no buttons. The message text is assembled based on the users email address, his admin status and the action performed on the user.

Questions regarding User page: @MysterionAutotronic

./src/pages/Admin/components/Challenges The challenges page contains all the exercises that are deployed to the users. It shows the id, description and title of the challenge. It offers the functionality to set a challenge active or delete a challenge.

Challenges can be added by using the Add Challenge form. The title can be added in an input field. The description can be edited inside a TinyCME instance. After checking whether the title or description are not empty the the Add Challenge button becomes enabled and the challenge can be added to the challenge pool as initially inactive.

Deleting a challenge with the Delete button requests the backend to delete the user. When the backend returns success, the table is updated and the entry for the deleted challenge is no longer displayed.

Questions regarding Challenges page: @Edgarianom1212, @cwsyth

./src/pages/Admin/components/Submissions

The submission page contains all the submissions that are made or initialized by the users. It shows the email of the user alongside the result, state, turn-in-date, expiration-date and ID. The result leads to the github repository of the user and is only visible if the state of the submission is set to SUBMITTED. If the state is set to SUBMITTED the admin can set the the state to REVIEWED. It uses the useInterval() hook for polling.

Questions regarding Submissions page: @Edgarianom1212, @MysterionAutotronic

./src/pages/Commit

The Commit Page displays the project description and a form for submitting his submission. It uses the custom form components LocalizedFileInput and Error

Upon component mount, the useEffect hook triggers an asynchronous fetch for the submission status of the project. The status determines whether the project has expired, is already submitted or still in progress:

• expired: Display expired container
• submissionStates is (SUBMITTED or REVIEWED): Redirection to ProjectState
• Other: Render the commit form.

After getting the expiration status, the useEffect hook triggers also an asynchronous fetch for getting the project information. The response status codes are managed as follows:

• StatusCodes.OK: Successful request containing the project details.
• StatusCodes.NOT_FOUND: Displays an error toast indicating that no project is assigned to current user.
• StatusCodes.UNPROCESSABLE_ENTITY: Displays an error toast indicating given email is not an email.
• Catch Block: For Network errors.

During submission and before sending the information to backend the given information will be checked. The following cases will add the missing input to a string containing the error message displayed via Toast:

• language input empty: No input value for language.
• version input empty: No input value for version.
• filePath input empty: No file selected.
• filePath not ending with .zip: No valid file selected.

The file upload form field has its own custom errors. Note that these use a key consisting of the locale context and a unique string. This is done so every key is unique and React is forced to refresh all form error messages on language change.

The handleSubmit function includes a try-catch block to handle login attempts and displays the result inside the Toaster. The response status codes are managed as follows:

• StatusCodes.OK: Successful request and navigates to ProjectState page.
• StatusCodes.FORBIDDEN: Displays an error toast indicating a zip file that is too large when decompressed or detection of a zip bomb.
• StatusCodes.CONFLICT: Displays an error toast indicating an already submitted project.
• StatusCodes.GONE: Displays an error toast indicating an expired submission.
• StatusCodes.REQUEST_TOO_LONG: Displays an error toast indicating a too large zip file.
• StatusCodes.UNPROCESSABLE_ENTITY: Displays an error toast indicating a containing README.md file.
• StatusCodes.SERVICE_UNAVAILABLE: Displays an error toast indicating there is a problem with the server configuration. This might occur due to the GitHub PAT token not being properly set in the backends GitHubApiClientConfig.kt.
• Default: Handles other status codes with a generic error message
• Catch Block: For Network errors.

Questions regarding Commit page: @ImpyKid, @MysterionAutotronic

./src/pages/Logout

This page is reached by clicking ones username in the Navigation component. It provides a single Logout button that is used to end the current session by using SpringBoots default logout endpoint.

Questions regarding Logout page: @MysterionAutotronic

./src/pages/ProjectState

This page is displayed after the user has submitted his challenge. If the user is still in INIT or IN_IMPLEMENTATION state he will be redirected to the according pages. Otherwise he will be shown a message that his Project is in review or has been reviewed. If theres a linter result available, he will be shown a collapsible (<summary) with his linting result. This uses the <code> tag to use the Browsers default monospace font and the <pre> tag to display the linters result string from the backend with the correct formatting.

Questions regarding ProjectState page: @samuelhertrich, @MysterionAutotronic

./src/pages/ResetPassword

After getting a email with reset password hyperlink containing the token the user can set a new password. While input the new password, the requirements must be fullfilled (like special characters, length, etc.). The two input fields for password input have to be equal. About checking the strength of a password, please see Password Service.

The handleSubmit function includes a try-catch block to handle the password request and displays the result inside the Toaster. The response status codes are managed as follows:

• StatusCodes.OK: Successful request and navigates to Login page.
• StatusCodes.BAD_REQUEST: Displays an error toast indicating a not valid token.
• StatusCodes.FORBIDDEN: Displays an error toast indicating a expired token.
• StatusCodes.CONFLICT: Displays an error toast indicating an already used token.
• StatusCodes.PRECONDITION_FAILED: Displays an error toast indicating a given password with not fulfilled requirements.
• Internal conflict with token: Displays an error toast while setting new password.
• Catch Block: For Network errors.

Questions regarding ResetPassword page: @ImpyKid, @MysterionAutotronic

./src/pages/ResetPasswordRequest

This page is reached in the Login page clicking on "forgot password?" (language may differ) hyperlink. It provides a input for submit the email address, a button for sumbit the request and a cancel button for redirect back to Login.

The handleSubmit function includes a try-catch block to handle the password request and displays the result inside the Toaster. The response status codes are managed as follows:

• StatusCodes.OK: Successful request and navigates to Login page.
• StatusCodes.UNPROCESSABLE_ENTITY: Displays an error toast indicating a not valid email address.
• StatusCodes.NOT_FOUND: Displays an error toast indicating a not existant user.
• Catch Block: For Network errors.

Questions regarding ResetPassword page: @ImpyKid

./src/pages/Invite On page load the provided token in the url is checked on validity. If the token is invalid the user will forwarded to the login page. On successful register the user will be forwarded to the project start page.

Questions regarding Invite component: @cwsyth