#### **Context**

The goal is to modernise the login screen.

#### **Acceptance criteria**

* There is new a sign in module that is used

* in the non logged-in home page

* the dropdown when you click on Begin of the insertion'Log in'End of the insertion Begin of the deletion 'Log in'End of the deletion in the top bar

* The module consists of:

* A first section for basic password-based login:

* A Subhead Begin of the insertionwith title: 'Sign in to $instance\_name'

End of the insertion Begin of the deletion with,

End of the deletion * Begin of the deletion Title: 'Log in'

* Trailing action (invisible button): 'Create an account'

* End of the deletion A username field with label "Username or email"

* A password field with label: "Password" Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the deletion With trailing action to view password: by default `eye` (when password is hidden, on hover show tooltip with text: "Show password"), `eye-closed` (when password is visible, on hover show tooltip with text: "Show password")

* End of the deletion Primary button with label: Begin of the insertion"SignEnd of the insertion Begin of the deletion "LogEnd of the deletion in"

* Begin of the insertionCheckbox (optional): "Stay logged in for x days"
End of the insertion Link: "Forgot password?"

* A divider Begin of the insertion(if SSO available)End of the insertion

* A Begin of the deletion secondEnd of the deletion section for SSO login:

* Text (style _Title/Small_): Begin of the insertion"SignEnd of the insertion Begin of the deletion "LogEnd of the deletion in with an external account"

* A list of configured SSO providers presented as Begin of the insertionbuttons "ContinueEnd of the insertion Begin of the deletion invisible buttons,End of the deletion with Begin of the insertion$SSO", withEnd of the insertion icons Begin of the insertion

* A divider (if create an account activated)

* A section for create an account

* A label "You don’t have an account yet?"

* A link to the account creation "Create a new account"End of the insertion


#### **Technical notes**

* \[open\] Do we really need the Begin of the insertion'RememberEnd of the insertion Begin of the deletion 'RememberEnd of the deletion me for 60 Begin of the insertiondays'End of the insertion Begin of the deletion days'End of the deletion option?

* What are the benefits? Why Begin of the insertiondoesn'tEnd of the insertion Begin of the deletion doesn'tEnd of the deletion GitHub offer it?


#### **Mockup**

workPackageValue:Mockups

#### **Permissions and visibility considerations**

* _No changes_


#### Begin of the deletion **Translation considerations**

* Change the value of the source key `button_login` to "Log in" (from "Sign in")


####

####End of the deletion **Out of scope**

* \[open\] The Begin of the insertion'CreateEnd of the insertion Begin of the deletion 'CreateEnd of the deletion an Begin of the insertionaccount'End of the insertion Begin of the deletion account'End of the deletion flow

* \[open\] The Begin of the insertion'Forgot password?'End of the insertion Begin of the deletion 'Forgot password?'End of the deletion flow

* Automatically adapting to Light and Dark mode when the user is not logged in will be handled Begin of the insertionby&nbsp;<mentionEnd of the insertion Begin of the deletion by <mentionEnd of the deletion class="mention" data-id="66594" data-type="work_package" Begin of the insertiondata-text="##66594" data-display-id="66594">##66594</mention>End of the insertion Begin of the deletion data-text="##66594">##66594</mention>&nbsp;End of the deletion


Begin of the deletion ####

####

#### **Visuals**

**Log in screen (home)**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/606185/content">

End of the deletion <br> Begin of the deletion

**Login dropdown (topbar)**

**<img class="image_resized op-uc-image op-uc-image_inline" style="width:337px;" src="/api/v3/attachments/529671/content">**End of the deletion