Skip to content

web/admin: improve user email button labels#7233

Merged
kensternberg-authentik merged 8 commits intomainfrom
web/improve-email-button-labels
Oct 20, 2023
Merged

web/admin: improve user email button labels#7233
kensternberg-authentik merged 8 commits intomainfrom
web/improve-email-button-labels

Conversation

@kensternberg-authentik
Copy link
Contributor

@kensternberg-authentik kensternberg-authentik commented Oct 19, 2023

Details

Label consistency:

UserViewPage and UserLinkPage have the same functionality to request to view a link with which a user may access an account recovery flow. The language and error messages were different on both of those pages. This commit harmonizes the language by making the request a standalone function. It also exploits the breakout of the “write to clipboard” commit to write the link to the clipboard, and to inform the user that the clipboard has been written to, when possible.

  • “Set Password”
  • “View Recovery Link”
  • “Email Recovery Link”

Functionality:

Since the UserListPage’s “accordion” view has an offer to “Email the recovery link” to the user, it seemed appropriate to grant the same capability to the UserListPage.

Visual consistency:

After a bit of messing around, I have also ensured that the gap between the buttons is the same in all cases, that in the columnar display the buttons are of uniform width.

Remove or undefined clauses on this.user, as they shouldn’t be needed

Every ...render() method in the UserViewPage class has a preamble guard clause:

    if (!this.user) {
        return html``;
    }

With this clause, it should not be necessary to repeatedly check the type of this.user throughout the rest of the method, but the nominal type is User?, which means that functions called from within the method need to be protected against undefined failure. By creating a new variable with the type after the guard clause, we ensure the type is User (no question!) and can safely use it without those checks.

Along the way, I replaced the empty html with nothing and corrected (mostly by removing) the return types.

References:

Caveats

NOTE: This commit is contingent upon the PR for isolate clipboard handling to be accepted, as it relies on the clipboard handler for the “write link to clipboard” feature.

Checklist

  • Local tests pass (ak test authentik/)
  • The code has been formatted (make lint-fix)

If an API change has been made

  • The API schema has been updated (make gen-build)

If changes to the frontend have been made

  • The code has been formatted (make web)
  • The translation files have been updated (make i18n-extract)

If applicable

  • The documentation has been updated
  • The documentation has been formatted (make website)

We would like to use the clipboard for more than just the token copy button.  This commit
enables that by separating the "Write to Clipboard" and "Write to Notifications" routines
into separate functions, putting "writeToClipboard" into the utilities collection, and
clarifying what happens when a custom presses the TokenCopy button.
UserViewPage and UserLinkPage have the same functionality to request to view a
link with which a user may access an account recovery flow.  The language and
error messages were different on both of those pages.  This commit harmonizes
the language by making the request a standalone function.  It also exploits the
breakout of the "write to clipboard" commit to write the link to the clipboard,
and to inform the user that the clipboard has been written to, when possible.
Since the UserListPage's "accordion" view has an offer to "Email
the recovery link" to the user, it seemed appropriate to grant the
same capability to the UserListPage.
After a bit of messing around, I have also ensured that the gap between the buttons is
the same in all cases, that in the columnar display the buttons are of uniform width,
and that the buttons have the same next:

- "Set Password"
- "View Recovery Link"
- "Email Recovery Link"

NOTE: This commit is contingent upon the PR for [isolate clipboard
handling](#7229) to
be accepted, as it relies on the clipboard handler for the "write
link to clipboard" feature.
Every `...render()` method in the UserViewPage class has a preamble
guard clause:

```
    if (!this.user) {
        return html``;
    }
```

With this clause, it should not be necessary to repeatedly check
the type of `this.user` throughout the rest of the method, but the
nominal type is `User?`, which means that functions called from
within the method need to be protected against `undefined` failure.
By creating a new variable with the type after the guard clause,
we ensure the type is `User` (no question!) and can safely use it
without those checks.

Along the way, I replaced the empty html with `nothing` and corrected
(mostly by removing) the return types.

References:

- [Lit-HTML: Prefer `nothing` over empty html or other falsey walues](https://lit.dev/docs/api/templates/#nothing)
- [TypeScript: Type annotations on return types are rarely
necessary](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#:~:text=Return%20Type%20Annotations&text=Much%20like%20variable%20type%20annotations,example%20doesn't%20change%20anything.)
@netlify
Copy link

netlify bot commented Oct 19, 2023

Deploy Preview for authentik-storybook ready!

Name Link
🔨 Latest commit 9143683
🔍 Latest deploy log https://app.netlify.com/sites/authentik-storybook/deploys/65329db73894f60008c15008
😎 Deploy Preview https://deploy-preview-7233--authentik-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@kensternberg-authentik kensternberg-authentik changed the base branch from main to web/isolate-clipboard-handling October 19, 2023 22:56
UserPath,
} from "@goauthentik/api";

export const requestRecoveryLink = (user: User) =>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Breaking these two bits of functionality out so that they can be consistent between the two pages.

@kensternberg-authentik kensternberg-authentik marked this pull request as ready for review October 19, 2023 22:58
@kensternberg-authentik kensternberg-authentik requested a review from a team as a code owner October 19, 2023 22:58
@codecov
Copy link

codecov bot commented Oct 19, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (cbbb638) 52.59% compared to head (9143683) 51.78%.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7233      +/-   ##
==========================================
- Coverage   52.59%   51.78%   -0.81%     
==========================================
  Files         587      587              
  Lines       28853    28853              
==========================================
- Hits        15175    14942     -233     
- Misses      13678    13911     +233     
Flag Coverage Δ
e2e 50.17% <ø> (-0.81%) ⬇️
integration 26.03% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 27 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 19, 2023

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-web-improve-email-button-labels-1697759259-98c886b
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

For arm64, use these values:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-web-improve-email-button-labels-1697759259-98c886b-arm64
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-web-improve-email-button-labels-1697759259-98c886b

For arm64, use these values:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-web-improve-email-button-labels-1697759259-98c886b-arm64

Afterwards, run the upgrade commands from the latest release notes.

Base automatically changed from web/isolate-clipboard-handling to main October 19, 2023 23:26
* main:
  web: isolate clipboard handling (#7229)
  web/flows: update flow background (#7232)
  web/admin: fix prompt form and codemirror mode (#7231)
@BeryJu BeryJu changed the title Web/improve email button labels web/admin: improve user email button labels Oct 20, 2023
* main:
  web: bump API Client version (#7246)
  sources/oauth: include default JWKS URLs for OAuth sources (#6992)
  sources/oauth: periodically update OAuth sources' OIDC configuration (#7245)
  website/blogs: Fix sso blog to remove 3rd reason (#7230)
  lifecycle: fix otp_merge migration again (#7244)
  web: bump core-js from 3.33.0 to 3.33.1 in /web (#7243)
  core: bump node from 20 to 21 (#7237)
  web: fix bad comment that was confusing lit-analyze (#7234)
  translate: Updates for file web/xliff/en.xlf in zh_CN (#7235)
  core: bump ruff from 0.1.0 to 0.1.1 (#7238)
  core: bump twilio from 8.9.1 to 8.10.0 (#7239)
  web: bump the storybook group in /web with 5 updates (#7240)
  web: bump the wdio group in /tests/wdio with 4 updates (#7241)
  translate: Updates for file web/xliff/en.xlf in zh-Hans (#7236)
@kensternberg-authentik kensternberg-authentik merged commit cc781ca into main Oct 20, 2023
@kensternberg-authentik kensternberg-authentik deleted the web/improve-email-button-labels branch October 20, 2023 17:01
kensternberg-authentik added a commit that referenced this pull request Oct 20, 2023
* main:
  sources/oauth: fix oidc well-known parsing (#7248)
  web/admin: improve user email button labels (#7233)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants