feat: oauth landing page [SQSERVICES-1775] by tlebon · Pull Request #14793 · wireapp/wire-webapp

tlebon · 2023-03-07T15:17:31Z

SQSERVICES-1775 [WEB] [OAUTH] OAuth Authorization Prompt

PR Submission Checklist for internal contributors

The PR Title
- conforms to the style of semantic commits messages¹ supported in Wire's Github Workflow²
- contains a reference JIRA issue number like SQPIT-764
- answers the question: If merged, this PR will: ... ³
The PR Description
- is free of optional paragraphs and you have filled the relevant parts to the best of your ability

What's new in this PR?

Issues

oauth landing page inside of the authorization flow for webapp

Solutions

Briefly describe the solutions you have implemented for the issues explained above.

Dependencies (Optional)

oauth backend needs to be released first.

Needs releases with:
wireapp/wire-server#2901

GitHub link to other pull request

Testing

Test Coverage (Optional)

I have added automated test to this contribution

How to Test

Briefly describe how this change was tested and if applicable the exact steps taken to verify that it works as expected.

Notes (Optional)

Specify here any other facts that you think are important for this issue.

Attachments (Optional)

Attachments like images, videos, etc. (drag and drop in the text box)

PR Post Submission Checklist for internal contributors (Optional)

Wire's Github Workflow has automatically linked the PR to a JIRA issue

PR Post Merge Checklist for internal contributors

If any soft of configuration variable was introduced by this PR, it has been added to the relevant documents and the CI jobs have been updated.

References

https://sparkbox.com/foundry/semantic_commit_messages
https://github.com/wireapp/.github#usage
E.g. feat(conversation-list): Sort conversations by most emojis in the title #SQPIT-764.

codecov · 2023-03-15T13:50:46Z

Codecov Report

Merging #14793 (0b1d886) into dev (54f33f2) will decrease coverage by 0.06%.
The diff coverage is 25.66%.

@@            Coverage Diff             @@
##              dev   #14793      +/-   ##
==========================================
- Coverage   42.94%   42.88%   -0.06%     
==========================================
  Files         626      630       +4     
  Lines       21320    21439     +119     
  Branches     4897     4920      +23     
==========================================
+ Hits         9155     9194      +39     
- Misses      10998    11078      +80     
  Partials     1167     1167

PatrykBuniX · 2023-03-24T09:20:09Z

src/script/auth/module/action/AuthAction.test.ts

    const mockedActions = {
      clientAction: {
-        generateClientPayload: spies.generateClientPayload,
+        generateClientPayload: jasmine.createSpy().and.returnValue({}),


Let's use jest instead of jasmine if possible: jest.fn().mockReturnValue({})

makes sense

PatrykBuniX · 2023-03-24T09:25:28Z

src/script/auth/module/action/AuthAction.ts

+    return async (dispatch, getState, {apiClient}) => {
+      dispatch(AuthActionCreator.startFetchTeam());
+      try {
+        const teamData = await apiClient.api.teams.team.getTeam(teamId ?? getState().selfState.self.team ?? '');


Empty string as teamId doesn't make too much sense to me. Should teamId be a required prop?

PatrykBuniX · 2023-03-24T09:32:11Z

src/script/auth/page/OAuthPermissions.tsx

+  const oauthParams = decodeURIComponent(window.location.search.slice(1))
+    .split('&')
+    .reduce((acc, param) => {
+      const [key, value] = param.split('=');
+      if (key === 'scope') {
+        return {...acc, [key]: value.replaceAll('+', ' ')};
+      }
+      return {...acc, [key]: value};
+    }, {} as OAuthBody);
+  const [oAuthApp, setOAuthApp] = useState<OAuthClient | null>(null);
+  const oAuthScope = oauthParams.scope
+    .split(/\+|%20|\s/)
+    .filter(scope => Object.values(Scope).includes(scope as Scope)) as Scope[];


What about moving the logic of these two oauthParams and oAuthScope to some kind of OAuthUtil file?

PatrykBuniX · 2023-03-24T09:35:56Z

src/script/auth/page/OAuthPermissions.tsx

+                        >
+                          {chunks}
+                        </a>
+                      )) as any,


This as any is not needed, TS seems to be happy without it 😄

the same thing with this eslint ignore

PatrykBuniX · 2023-03-24T09:37:33Z

src/script/auth/page/OAuthPermissions.tsx

+                  if (event.key === KEY.ENTER) {
+                    onContinue();
+                  }


I think we can use handleKeyDown from KeyboardUtil here (unless we dont want it to react on space key also)

atomrc · 2023-03-28T14:11:28Z

src/script/auth/component/AccountForm.tsx

            <FormattedMessage
              {...accountFormStrings.termsAndPrivacyPolicy}
              values={{
-                // eslint-disable-next-line react/display-name


what was this one for 🤔 ?
Good that we could get rid of it 👍

no clue, i guess our linter changed a while ago. maybe we turned off this rule where components need to be named?

atomrc · 2023-03-28T14:13:30Z

src/script/auth/module/action/ClientAction.ts

  };

-  generateClientPayload = (clientType: ClientType): ClientInfo | undefined => {
+  private generateClientPayload = (clientType: ClientType): ClientInfo | undefined => {


atomrc · 2023-03-28T14:16:07Z

src/script/auth/page/OAuthPermissions.tsx

+                  style={{
+                    fontSize: '12px',
+                    lineHeight: '16px',
+                    display: 'block',
+                  }}


Let's extract all those styles to a OAuthPermissions.styles.ts and put it to the css={} attributes (not style)

atomrc · 2023-03-28T14:20:45Z

src/script/auth/util/oauthUtil.ts

+ */
+export const oAuthParams = (location: Location) =>
+  decodeURIComponent(location.search.slice(1))
+    .split('&')


can't we use URLSearchParam instead of doing the parsing ourselves?
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

i tried this as well but it didn't seem to work very well.

i dont recall the specifics but ill test it again to see what the issue is.

i believe i found it less than ideal because it became a special object that I would have to then turn into a regular object. Anyway I have implemented that solution now.

the internet is split on the best way to handle this: https://stackoverflow.com/questions/8648892/how-to-convert-url-parameters-to-a-javascript-object

for our use-case, URLSearchParams should be fine.

atomrc · 2023-03-29T07:34:00Z

src/script/auth/page/OauthPermissions.styles.ts

+
+import {COLOR_V2} from '@wireapp/react-ui-kit';
+
+export const getTeamImageCSS = (): CSSObject => ({


is there any particular motivation in using functions instead of plain objects here.
There doesn't seem to be any dynamic values in none of those. Just wondering if you see a particular benefit in having functions?

ah no sorry i just looked at another file and copied the syntax since i haven't done this in a while. lets make them objects

aweiss-dev · 2023-03-30T12:25:31Z

src/script/auth/page/OAuthPermissions.tsx

+  return (
+    <Page>
+      <ContainerXS centerText verticalCenter css={containerCSS}>
+        {!oAuthApp ? (


Wouldn't it be better to use a isLoading variable? When we fail to get the oAuthApp for whatever reason, we show the loader indefinitely

i tried just now with the redux isFetching state for the auth Selector. Unfortunately because multiple fetching calls are going off in sequence it creates a bit of a jump.

Since the oAuthApp is the last thing we are loading this works slightly nicer.

i have added a logout if the function errors to prevent an infinite loading case.

tlebon added 12 commits February 22, 2023 17:19

feat: basic UI structure

cd1701a

chore: add some validation for the params

da4d9c7

chore: remove errors

7b3e1c2

chore: more structure added

6c667af

chore: update redux to add getTeam action

02e54a2

fix: get redux working correctly with auth

419021c

feat: improve routing

6baeb80

feat: display team image, improved styling

d4a84ac

chore: get application name from BE

eed53b8

chore: add oauth calls

a492a6f

chore: merge dev

f9579ae

chore: update api client

728ed3e

otto-the-bot added type: feature / request ✨ 👕 size: XL labels Mar 15, 2023

tlebon added 5 commits March 15, 2023 17:12

chore: add redirect for 2manyClients case

5176729

chore: update copy for 2manyclients case

b245105

chore: add back initial redirect

0276e94

feat: pass redirect url

08c7899

chore: fix scope parsing

0f4fc94

tlebon force-pushed the feat/oauth-landing branch from 04c2dd2 to 0f4fc94 Compare March 21, 2023 08:28

chore: update for loading icon

de0172c

tlebon force-pushed the feat/oauth-landing branch from a4b3183 to de0172c Compare March 22, 2023 11:37

tlebon added 3 commits March 22, 2023 13:01

chore: remove client device name

67cf9f1

runfix: issue with missing team icon

e4067de

runfix: issue with client page

3f0bd47

tlebon marked this pull request as ready for review March 23, 2023 09:54

tlebon requested review from a team and otto-the-bot as code owners March 23, 2023 09:54

feat: improve styling

b9de86c

chore: styling

fe862aa

tlebon force-pushed the feat/oauth-landing branch from 21b0748 to fe862aa Compare March 23, 2023 16:51

tlebon added 2 commits March 23, 2023 17:55

chore: merge dev

7773e81

chore: add translations

9cbcf6d

PatrykBuniX reviewed Mar 24, 2023

View reviewed changes

tlebon added 3 commits March 27, 2023 17:52

chore: update core

5291e2a

chore: resolve comments

cd585b0

chore: merge dev

cdabad4

tlebon force-pushed the feat/oauth-landing branch 2 times, most recently from ccf4387 to 0dce794 Compare March 28, 2023 07:35

fix: other instances of formatted message cleanup

a8b48c4

tlebon force-pushed the feat/oauth-landing branch from 0dce794 to a8b48c4 Compare March 28, 2023 08:16

atomrc reviewed Mar 28, 2023

View reviewed changes

chore: move styles to individual file

b8a7c5b

atomrc reviewed Mar 29, 2023

View reviewed changes

tlebon added 3 commits March 29, 2023 12:04

styles: fixing styling issues

dee8034

chore: merge dev

550279e

chore: switch to URLSearchParams

20c19a8

aweiss-dev reviewed Mar 30, 2023

View reviewed changes

atomrc approved these changes Mar 30, 2023

View reviewed changes

chore: handle logout for error cases

0b1d886

tlebon merged commit 314696a into dev Mar 30, 2023

tlebon deleted the feat/oauth-landing branch March 30, 2023 13:46


		import {COLOR_V2} from '@wireapp/react-ui-kit';

		export const getTeamImageCSS = (): CSSObject => ({

Comments

Conversation

tlebon commented Mar 7, 2023 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Submission Checklist for internal contributors

What's new in this PR?

Issues

Solutions

Dependencies (Optional)

Testing

Test Coverage (Optional)

How to Test

Notes (Optional)

Attachments (Optional)

PR Post Submission Checklist for internal contributors (Optional)

PR Post Merge Checklist for internal contributors

References

Uh oh!

codecov bot commented Mar 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tlebon Mar 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

tlebon commented Mar 7, 2023 •

edited by github-actions bot

Loading

codecov bot commented Mar 15, 2023 •

edited

Loading

tlebon Mar 27, 2023 •

edited

Loading