V13: New login screen

[iOvergaard]

Prerequisites

• I have added steps to test this contribution in the description below

Description

Move the login screen built for Bellissima into v13 to replace the existing one.

Breaking changes

• The login screen now has its own URL (/umbraco/login by default) which is served through login/index.cshtml
• BackofficeController will now redirect to the URL of the new login screen when not authorized
• If timed out, the UmbLoginDirective will still be shown, but it has been rewritten and slimmed down to show the new login screen, which is a self-encapsulated custom element called <umb-auth />.
• Any custom views for either external login or two-factor login depending on AngularJS will no longer work (the recommendation is to supply a JavaScript module containing a custom element)

Other changes

• The Umbraco UI Library is now built and shipped along with the login screen build to ensure it is only built once but can be used by any entrypoint to Umbraco.
• A new custom element called <umb-localize /> is available to use, which mirrors the API of the existing Angular <localize /> directive. This element can be used in its place and is necessary if building custom views for the login screen.

Motivation

We want to remove legacy JavaScript tech from the most public-facing side of the backoffice: the login screen. The new login screen is built with Lit & TypeScript (tech from Bellissima) and will thus remove angular and jquery from the browser at least when you access the login screen.

Screenshots

[bjarnef]

@iOvergaard not specific related to this, but I wonder if the installer should remove angular and jquery as well?
https://github.com/umbraco/Umbraco-CMS/tree/contrib/src/Umbraco.Web.UI.Client/src/installer

or should it wait for the new backoffice?

[iOvergaard]

@iOvergaard not specific related to this, but I wonder if the installer should remove angular and jquery as well? https://github.com/umbraco/Umbraco-CMS/tree/contrib/src/Umbraco.Web.UI.Client/src/installer

or should it wait for the new backoffice?

Hi @bjarnef, the installer will follow Bellissima. The new installer, that we already built for Bellissima, works only with the management API and would be too cumbersome to backport to V13 as well. We suspect the impact is much larger for the login screen over the installer, since you will ever only see the installer as a developer.