Creation of a public-facing homepage for all 3 systems

[LeScruf]

Design a home page with a login form. All 3 sites can use the same design.

It would be nice to have an SVG version of the NFA logo that can be used on the home page and in the admin menu.

[LeScruf]

Currently https://farmers.stg.envs.utils.nfa.go.ug/ does not lead to a front facing public login page, and perhaps as precursor to the cross-system SSO, a common sign on / landing page needs to be designed and implemented?

[ygoex]

In order to show the user the alternative server we could use a header or footer notification letting them know where are we and a link to the alternative server.

We will also need a short explanation about what they are going to find once they are logged in.

There is a environment indicator module that could help us with this.

We need to convert the current png logo into svg format.

[peacog]

Hi @LeScruf @Rashids2021 I've set up an environment indicator on the 3 sites will help you see at a glance whether you're on the staging or production site. Each environment has a colour that is used to highlight three parts of the site:

1. The vertical toolbar has a coloured stripe down the side and the main drupal icon has the environment's colour.
2. There is an environment switch link in the top-right toolbar that allows you to see the current page on another environment
3. The icon in the browser tab has a small colour indicator

Staging

Production

Switcher

Browser tabs

There's a Development environment link in the switch that allows us developers to switch to our local environments. The link won't work for you because you don't have a dev environment. If it causes problems we can look into hiding the "Open on Dev" link for some roles

[ygoex]

Hi @LeScruf I have created five different designs to choose from for the public-facing homepage of Forests, BRMS and Farmers. You can review them here: https://www.figma.com/file/AYFXO1DOj6KZD37aAUve4U/NFA-Homepage?type=design&node-id=0-1&t=2gRscG82NrTYZTnK-0

Please feel free to suggest any modifications to the style that you think it may work best.

Regarding a guide for users that you suggested at some point, I have found the tour-api for Drupal that may help in those areas with more complex workflows: https://www.drupal.org/docs/8/api/tour-api/overview. You can see an example here: https://www.youtube.com/watch?v=BjoPEisDOrk

[peacog]

Hi @ygoex. We would also like to have an environment indicator on this page that lets the user know if they've landed on the staging or the production environment, and allows them to go from staging to production and vice versa. I don't think it's necessary to have an option to go to the development environment.

[ygoex]

Thanks @peacog for the feedback!

I have updated the designs with a ribbon at the right bottom corner to indicate the environment, and I have also added a bottom bar with a link to the alternative environment (production if we are on staging, and staging if we are on production).

Code for ribbon can be seen here: https://codepen.io/ygoex/pen/vYQBWMp And code for bottom bar here: https://codepen.io/ygoex/pen/bGmXqyw

[LeScruf]

Hi @ygoex - Just to keep things straightforward - let's go with headers 11, 12 & 13 - since these are consistent with the current login page for the BRMS I believe. We can change the imagery on the RHS so that each system front page is different.

I think the current arrangement for tracking which system one is using works well and suggest that we shouldn't spend too much time on it - as this notation will be deprecated on the production versions as we go towards system launch?

The tour api looks interesting - and might be also used for teaching users how to use the systems more generally?

[ygoex]

Excellent @LeScruf! We'll implement headers 11, 12 & 13. Will you provide the RHS different images for the different systems?

Regarding the tour api, we may need to create new tasks and define which parts of each system will require the tour user guide.

cc/ @peacog

[peacog]

Hi @LeScruf . The new landing page has been deployed to the 3 staging website. You will only see the landing page when you are not logged in. Please test and let us know if you would like to change anything. If you want to differentiate the 3 sites each could have a different image. We could also use a different shade of green for each.

[LeScruf]

Hi @peacog - I think this is looking great. Let's stick with this now - pending NFA inputs down the road.

[peacog]

Deployed to all production sites