Fixed and optimized several issues in the front end of the course settings page

[YiranDuan721]

1. Reset error state upon update of the "New Lecture" panel

Before: If anything failed when creating a new lecture, the alert banner "Something went wrong." will always be shown in the form, which is ambiguous.

Example: After a user fails to upload a VoD, they are returned to the first step of the settings, but the error message does not disappear, causing confusion.

After: The error banner disappears upon each update.

2. Correct the style of the buttons in the create-lecture-form

Before: In light mode, the button looks the same whether it is selected or not, making it difficult to notice changes after altering the options for creating a new lecture.

After: The change of style when selected can be correctly displayed in light mode.

3. On the edit-course page:

Change the style of the "continue" button when disabled to make it more obvious that it is disabled; Provide reasons for why the 'continue' button is disabled.

Before: Hard to distinct whether the "continue" button is disabled or not, in both light and dark mode.

After: When the button is disabled, it is clearly visible; at the same time, display the reason why the button cannot be clicked above it.

4. On edit-course page:

When copying a course, ensure the correct display of yearW for winter semesters.

Before:

After:

5. After course copy:

Add a tooltip to explain that the current page is the setting page of the newly copied course, not the original one.

Before:

After:

6. Search course on the create-course page:

Hide the search result list if the input box is then emptied, and when the input box loses focus.

7. Reset yearW to empty string when year < 2000

Before:
The yearW won't be reset until another valid year (>2000) is input. The following picture shows the case when the user first inputs 2077 and then changed the value to 0.

After:
Problem solved. When the year is invalid, yearW will be emptied. Also, the placeholder "25" will only be shown if "year" is displaying the placeholder "2024".

8. Placeholder of "year" for a semester-selection:

When the input field "year" gets focused when it's empty, set the placeholder as the input. This also allows the value to change from what the placeholder shows instead of 0, when the value is directly adjusted using the number increase/decrease button in the number-input field.

9. On create-course page, mark necessary field with red border if empty

This was not functioning because the line-width of the border had been incorrectly set to 0.

10. Ensure the slug of new courses is url-safe

On create-course page, restrict the characters input to the field "slug" to [a-zA-Z0-9-_.+()~] (Numbers, English characters and 7 special characters). This could prevent the course from having an invalid url.

[github-actions]

Your Testserver will be ready at https://1245.test.live.mm.rbg.tum.de in a few minutes.

Logins

Kurs1	Kurs2	Kurs3	Kurs4
public	public	loggedin	enrolled
prof1	prof1	prof2	prof1 prof2
student1 student2 student3	student1 student2	student2 student3	student1 student2

[alexanderstephan]

Looks very good so far! 👍 I still have to check the code edge cases tomorrow.

[alexanderstephan]

Sorry for the delay. 😓

[YiranDuan721]

No worries at all! Thank you for the review, Merry Christmas & have a nice holiday!