a27267e5d3
* implement interface * add build targets for login screen * package lock * move components to pages folder * load logo and background from property * styling * move mocks around * remove unused vars * add backoffice handlers * install rxjs * add mock data * add element and context for localization * mock data * use umb-localize * remove the extra logic with check for section_ * change key for login button * add base to vite environment * login styling * cleanup and button styling * use correct reset url * change body of reset request * validate password reset code * redirect to /login/new on reset password code verify * add obsolete messages * remove inline scripts for old backoffice * remove shadowdom from localize element * Revert "remove shadowdom from localize element" This reverts commit 46ae282f7ce9235c15f160d57d54acd5d3378668. * hook up reset password to api * rename pages to state as it is not actually used as different pages * reset password styling * more styling * add confirmation page to new password * set router to firstUpdated to avoid rAF * set a custom baseUrl on the router to make sure it works without trailing slash * use route parameters to redirect on the login page to ensure correct escaping * add server variables * make sure auth layout uses the provided properties for images * format * redirect to code expired page * add missing properties * use allowPasswordReset and allowInvite properties in routing and layout * make ts happy * cleanup * init invite page * hook up usernameIsEmail * init external login providers * add mock provider * add padding to buttons * replace uui button with normal button * add external login providers as slot * add disableLocalLogin property * add form to external login providers * remove unused method * fix build errors * add attributes for external login * add custom view to external login * add new custom icon registry * attach two icon registries * use relative paths * use relative paths * use main registry instead of providing directly * add look and color to external login * implement getIcons() method * use getIcons() to request icons * install remixicon to supplement backoffice icons (replacing font-awesome eventually) * move icon registries to auth element * Revert "install remixicon to supplement backoffice icons (replacing font-awesome eventually)" This reverts commit 0c6659d8d9dfe0664314ec6a3acaa8e20cb606ed. * add icons for common external providers * add more icons * remove resetCode hack as it is no longer needed * add validation to new password * get gretting from translation file * add hack to get text left aligned in uui-button * add custom router * WIP Use router * also change the URL during an action * update login action to redirect to /new when needed * redirect to login from reset and new if not allowed * fix new password button href * use property on login element instead of context * check for redirect on invite-user * move fake external login providers to index.html for use in dev server * allow password reset on dev server * add look and color * only set styles for default view buttons * suppress vite import warning * check and inform for errors and show 'nothing' if a custom view fails to load * fix mock path for localizedtext * fix build errors * ensure that msw (and all its dependencies) do not end up in the production bundle (saved ~500 KB) * Revert AngularValueExternalLoginInfoScriptAsync removal * forward the providerName to custom views * change default icon * add button look and color to external login provider options * add obsolete to ButtonStyle and add a mapper to new values * add required xml comments * map external login providers to <umb-login-external /> * fix typo * only show external login layout if there are slotted children * pass on name as "provider" * send externalLoginUrl to custom views * cleanup * global import * hide external logins completely when empty * cleanup * setup redirect to invite * rename pages to name-page * fix names and paths * use new password layout for invite and new password * add comments * cleanup and use confirmation element * set parameters after successful verifyinvite * map display-name and provider-name to the external element * map display-name * set up external login to handle correct display- and provider-name with documentation * add support for disabling local login * update path to handlers * add more localization * add handlers for 2fa * router should support a factory for component * push login to ?flow=mfa on 402 codes * add page to handle 2fa/mfa * add support for custom routing * add fallback for welcome greeting * handle AngularJS silliness * fix typo * fix router and replace custom umbroute:statechange event with native pushState * simplify code and cleanup * a11y improvements * you can now navigate to anywhere from anywhere with pushState * access the "twoFactorView" from the backend * set the default implemented twoFactorView to NULL * add initial logic to handle a custom mfa view * roll back custom pushState changes * add mocks for 2fa custom view * use router redirect * re-enable click url change * cleanup * remove debug buttons * add unsafeHTML to localize element * load mfa custom views * load custom view * improve external login custom views * using optimisation * add current culture * only show mfa page if 402 code has been encountered in same session * format * remove unnesesary action * add new user invite password * remove console log * fix getting stuck at new password page if you've triggered custom validity * unify layouts * add styling to buttons in error layout * remove unused css * add error message to new password page * add error message to reset password * add error message to invite page * fix invite page not being rendered * cleanup * add obsolete notice to PostSetInvitedUserPassword * add request model to set a new password for an invited user * add new method to handle invited user password * add get password config api call * fix password config parameters and add invite call * get invited user * get password config * assign unique guid to login project * add userId to get password config and use the config as validation * fix * add alerts * fix the new password layout * auth redirects invite error to error page * use password config on new password page * remove console log * move file and remove unused extension * make ts happy * file structure * rename login-extern to external-login-provider * update element name * update dependencies * export custom-view.element.ts * remove debug * use umb-custom-view to load custom views * build types * move @umbraco/uui to the login app and import from there in backoffice * make the ui library and icon registry generally available as exports from the login app * add mock handler for icons * cleanup package * use uui for external login providers in the backoffice * add imports and enable the backoffice icon registry globally * disable shadowdom * default background image * use undefined * revert angular values * remove legacy sys variables * add logic to handle mfa in an overlay scenario without routing * add new login screen to replace the overlay when logged in to the backoffice * update spec to work with locators * cleanup of legacy context * ViewData is not always required * add method to solely return the default view of the backoffice to simply BackofficeController as well as unit tests * add test for the login view * cleanup usings * Apply suggestions from code review Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com> * remove 'remember me' * add more contrast to external login divider * update dependencies * set "lang" attribute to lowercase * remove default headline * localize the "Or" divider and add aria-hidden * remove Umbraco reference from logo and add aria-hidden * add aria-hidden to uui-icon inside external login buttons * format code * update dependencies * update dependencies * add translations to invite user page * use back to login button * update localization-context.ts to match api from old LocalizeService in Angular * add tsc to watch * formatting * add missing localizations * fix a11y issues with muted text * refresh current user after login * remove unused variable * add localization * add localization for error messages * remove unused var * return user after login and set successful auth * retry request queue after login * add language keys for failed login * add language keys for failed login * render the views without a router so that it works inside a modal in the backoffice * add autocomplete to reset password fields * add autocomplete to login screen * add generic error layout to new-password-page * new-password-layout should be able to handle with and without username * update language keys * check for userId before trying to request invited user * show error when no invited user is found * place back-to-login button on all error layouts * update lockfile --------- Co-authored-by: Jesper Møller Jensen <26099018+JesmoDev@users.noreply.github.com> Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>
Umbraco Acceptance Tests
You can watch a video following these instructions here and a longer UmbraCollab recording here. Make sure to use the latest recommended contribution branch rather than v10 that's mentioned in the video. Alternatively, follow along the instructions below.
Prerequisites
- NodeJS 16+
- A running installed Umbraco on url: https://localhost:44331 (Default development port)
- Install using a
SqlServer/LocalDbas the tests execute too fast forSqliteto handle.
- Install using a
Getting started
The tests are located in the project/folder as Umbraco.Tests.AcceptanceTests. Make sure you run npm ci & npx playwright install in that folder, or let your IDE do that.
The script will ask you to enter the username and password for a superadmin user of your Umbraco CMS.
Executing tests
There are two npm scripts that can be used to execute the test:
npm run test- Executes the tests headless.
npm run ui- Executes the tests in a browser handled by a playwright application.
In case of errors it is recommended to use await page.pause() so you can step through your test.
Executing single tests
If you wish to run a single test, which may be helpful when writing tests you can use the following command. As before, you need to run these tests in the 'tests/Umbraco.Tests.AcceptanceTest' folder.
npx playwright test <testname.ts>
For example to run the Login Test,
npx playwright test tests/DefaultConfig/Login/Login.spec.ts
Environment Configuration
The environment configuration is begin setup by the npm installation script.
This results in the creation of this file: .env.
This file is already added to .gitignore and can contain values that are different for each developer machine.
The file has the following content:
UMBRACO_USER_LOGIN=email for superadmin
UMBRACO_USER_PASSWORD=password for superadmin
URL=https://localhost:44331
You can change this if you like or run the config script to reset the values, type "npm run config" in your terminal.
Documentation
For further documentation on Playwright, see the Playwright documentation.