#306 - Login Page

[dleadbetter]

This pull request refactors the Login page according to the designs in this issue. The login page will allow for the following branding options:

Header bar

An image can be added to recogito-cloud to use as a custom header bar image. The image name must be specified in config.json.

Login logo

An image can be added to recogito-cloud to use as a custom login logo. The image name must be specified in config.json.

Footer component

A custom React component can be added to recogito cloud to replace the default footer. The bottom_logos_enabled option must be set to "true" in config.json. If set to "true" the "powered by Recogito Studio" logo will display below the login buttons.

Banner image

A URL for a custom banner image can be specified as the banner_image option on config.json.

Default

By default, the "Recogito Studio" logo will display in both the header and footer. Username and password login will be the primary method.

Branding - Login Logo

A custom branding logo can be configured to display at the top of the login form.

Branding - Login Logo/SSO First

When SSO is configured as the primary login method, the username and password option will display as an accordion button. Clicking the button will reveal the form.

Branding - Top Logo

Branding - Top Logo/Bottom Logo

Branding - Top Logo/Bottom Logo/SSO First

Forgot Password

The input elements on the forgot password page have also been updated to match the login page.

Reset Password

The input elements on the reset password page have also been updated to match the login page.

Join Public Group

The join public group page uses the same HeaderLayout as the login page, and has been updated accordingly.

[netlify[bot]]

✅ Deploy Preview for vico-design ready!

Name	Link
🔨 Latest commit	7eb334307f15875fc5170d102a0b2ffdfc661cb9
🔍 Latest deploy log	https://app.netlify.com/sites/vico-design/deploys/66ce14b995579c00098f97a0
😎 Deploy Preview	https://deploy-preview-250--vico-design.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for recogito-cloud-staging ready!

Name	Link
🔨 Latest commit	7eb334307f15875fc5170d102a0b2ffdfc661cb9
🔍 Latest deploy log	https://app.netlify.com/sites/recogito-cloud-staging/deploys/66ce14b94d383300085de6b1
😎 Deploy Preview	https://deploy-preview-250--recogito-cloud-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dleadbetter]

Note: I also only added resource strings to /i18n/en.json. Is there a process for adding resource strings for other languages?

[lwjameson]

https://github.com/recogito/recogito-client/pull/250#issuecomment-2312548670

Put english in the matching de file as well. @rsimon will translate.

[rsimon]

@dleadbetter I can do the DE translation file. Currently, if there is no DE file, labels will show blank in the German UI.

P.S.: if we have time available, we should IMO switch to i18next or something similar. (When we started with Astro 2, back in the day, the Astro integration was broken. Hence the hand-rolled workaround. Even today, the astro-i18next integration doesn't exactly inspire confidence...)

[jamiefolsom]

@dleadbetter I can do the DE translation file. Currently, if there is no DE file, labels will show blank in the German UI.

P.S.: if we have time available, we should IMO switch to i18next or something similar. (When we started with Astro 2, back in the day, the Astro integration was broken. Hence the hand-rolled workaround. Even today, the astro-i18next integration doesn't exactly inspire confidence...)

We've used https://inlang.com/m/gerre34r/library-inlang-paraglideJs with Astro on other projects; @ajolipa may have some thoughts to share on how that works.