wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-06-27 17:50:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Stream Rebranding (#2926)

Browse Source 
* [CORL-901] Rebrand comment actions and body (#2889)

* [ADR] Use Relay over Apollo (#2881)

* chore: ADR on Relay and Apollo

* chore: typo

* chore: add neg cons

* chore: add another pos

* chore: remove neg, because apollo needed an introspection query as a build step too..

* chore: fix number

* chore: deco

* chore: typo

* chore: clarification

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* chore: bump 6.0.0 (#2891)

* fix: added more checks to migration (#2894)

* Update stream username to new branding variables

CORL-901

* Update badges/tags to use new v2 controls

CORL-901

* Update timestamps to use new branding stream side

CORL-901

* Update stream edit action to new branding

CORL-901

* Update comment html body to new branding

CORL-901

* Update comment action buttons to new branding

CORL-901

* Update responsive styles for action buttons

CORL-901

* Set comment link colors to new branding blue

CORL-901

* Add children prop on ButtonsBar to align with tests

CORL-901

* Make Reported button text bolded and vivid red

CORL-901

* Make reaction buttons stream blue when reacted

CORL-901

* Make user badges bold text

CORL-901

* Set margins on comment action buttons

CORL-901

* Set aria-labels on reaction buttons

Ensures that we always have a usable aria
even when the reaction button is just an icon.

CORL-901

* Set aria-label's on Reply and Share button's

CORL-901

* Update tests to match stream branding changes

CORL-901

* Update color of "Read More of this conversation"

CORL-901

Co-authored-by: Vinh <vinh@vinh.tech>
Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* [CORL-942] In-Stream Mod rebranding (#2902)

* [ADR] Use Relay over Apollo (#2881)

* chore: ADR on Relay and Apollo

* chore: typo

* chore: add neg cons

* chore: add another pos

* chore: remove neg, because apollo needed an introspection query as a build step too..

* chore: fix number

* chore: deco

* chore: typo

* chore: clarification

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* chore: bump 6.0.0 (#2891)

* fix: added more checks to migration (#2894)

* Update stream username to new branding variables

CORL-901

* Update badges/tags to use new v2 controls

CORL-901

* Update timestamps to use new branding stream side

CORL-901

* Update stream edit action to new branding

CORL-901

* Update comment html body to new branding

CORL-901

* Update comment action buttons to new branding

CORL-901

* Update responsive styles for action buttons

CORL-901

* Set comment link colors to new branding blue

CORL-901

* Add children prop on ButtonsBar to align with tests

CORL-901

* Make Reported button text bolded and vivid red

CORL-901

* Make reaction buttons stream blue when reacted

CORL-901

* Make user badges bold text

CORL-901

* Set margins on comment action buttons

CORL-901

* Set aria-labels on reaction buttons

Ensures that we always have a usable aria
even when the reaction button is just an icon.

CORL-901

* Set aria-label's on Reply and Share button's

CORL-901

* Update tests to match stream branding changes

CORL-901

* Update color of "Read More of this conversation"

CORL-901

* Update caret container to new branding

CORL-942

* Update moderation menu buttons to new branding

CORL-942

* Update in-stream ban popover to new branding

CORL-942

* Update reject tombstone to new branding

CORL-942

Co-authored-by: Vinh <vinh@vinh.tech>
Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* [CORL-939] Rebrand RTE and reply (#2904)

* [ADR] Use Relay over Apollo (#2881)

* chore: ADR on Relay and Apollo

* chore: typo

* chore: add neg cons

* chore: add another pos

* chore: remove neg, because apollo needed an introspection query as a build step too..

* chore: fix number

* chore: deco

* chore: typo

* chore: clarification

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* chore: bump 6.0.0 (#2891)

* fix: added more checks to migration (#2894)

* Update stream username to new branding variables

CORL-901

* Update badges/tags to use new v2 controls

CORL-901

* Update timestamps to use new branding stream side

CORL-901

* Update stream edit action to new branding

CORL-901

* Update comment html body to new branding

CORL-901

* Update comment action buttons to new branding

CORL-901

* Update responsive styles for action buttons

CORL-901

* Set comment link colors to new branding blue

CORL-901

* Add children prop on ButtonsBar to align with tests

CORL-901

* Make Reported button text bolded and vivid red

CORL-901

* Make reaction buttons stream blue when reacted

CORL-901

* Make user badges bold text

CORL-901

* Set margins on comment action buttons

CORL-901

* Set aria-labels on reaction buttons

Ensures that we always have a usable aria
even when the reaction button is just an icon.

CORL-901

* Set aria-label's on Reply and Share button's

CORL-901

* Update tests to match stream branding changes

CORL-901

* Update color of "Read More of this conversation"

CORL-901

* Update caret container to new branding

CORL-942

* Update moderation menu buttons to new branding

CORL-942

* Update in-stream ban popover to new branding

CORL-942

* Update reject tombstone to new branding

CORL-942

* Update replyTo and rte to new branding

CORL-939

Co-authored-by: Vinh <vinh@vinh.tech>
Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* Update message box to new branding

CORL-981

* Update user profile comment history to new branding

CORL-983

* Update stream tabs to new branding

CORL-982

* Update my profile tab bar to new branding

CORL-902

* Update download comments to new branding

CORL-902

* The Lord of the Buttons: Return of the Buttons

* Update the notification settings area to new branding

CORL-984

* Update the ignored users area to new branding

CORL-984

* Update change username to new branding

CORL-984

* Fixing snaps after rebase

* Use label instead of div for InputLabel's

Root element is now a label so that axe
will stop complaining that it can't find
the 'for' id on the label elements.

CORL-984

* More spacing tweaks for change username

CORL-903

* Update change email address to new branding

CORL-984

* Update change password to new branding

CORL-984

* Flesh out colour styles for v3 buttons

CORL-984

* Preliminarily update delete account to new branding

CORL-984

* Ensure client CSS style compatibility

CORL-984

* Update delete flow to new branding

CORL-984

* Add client classes to the delete account modal

CORL-984

* Further tweaks to the delete account modal

Modal callouts updated to new branding.
Deletion request callout updated to new
branding.
Fixing up tests that somehow were passing
before?
Fixing some margins and spacing around
deletion section.

* Move the account deletion callout to top

Puts it at the top of the my profile tab
so that it's clearly visible you are
deleting your account.

CORL-998

* Add first-class icon and title support to callouts

CORL-969

* Bold checkbox text when checked

CORL-984

* Finalize v3 buttons to match spec

This should be the last major change to
v3 buttons as the spec seems to have
solidified.

CORL-969

* Add in new stream red to colours

Use it for the negative v3 callouts

CORL-969

* Touch up some spacing on delete account

CORL-984

* Create tombstone component

Use it for ignored and deleted account
tombstones instead of the old callout.

CORL-969

* Use new tombstones in comment stream

CORL-969

* Update banned callout to new branding

CORL-969

* Set callout body text to regular font weight

CORL-969

* Update suspended callout to new branding

CORL-969

* Update closed stream callouts to new branding

CORL-969

* Update in-moderation callouts to new branding

CORL-969

* Update stream validation message to v3

CORL-969

* Improve ignored commenter management

Show "you are no longer ignoring" a
commenter when you choose to no longer
ignore them.

CORL-457

* Prettier cleanup after rebase off master

Somehow this was missed, probably needed to
kill and reload VSCode before I committed the
rebase.

* Switch previous callouts to use icon and title

CORL-969

* Update configure checkboxes to new branding

CORL-903

* Update Config > Q&A to new branding

CORL-903

* Update Config > Open/Close Stream to new branding

CORL-903

* Add validation message to config stream checkboxes

CORL-903

* Remove double list handling for Pref>Ignored

CORL-969

* Show experimental tag beside Q&A config

CORL-1051

* Move live update setting to its own section

CORL-903

* Remove moderation link from config area

CORL-903

* De-capitalize all the labels in configure

CORL-903

* Update message box config to new branding

Also moves it to new location in config.

CORL-903

* Re-brand the sign in/out field on the stream

CORL-1042

* Update tests for add message flow

CORl-903

* Rebrand Sign In/Up modals

CORL-999

* Re-brand SSO sign in/up modals

CORL-999

* Re-brand stream sorting controls

CORL-1043

* Create new stream focused colorFromMeta variant

* Rebrand go to moderation buttons

CORL-799

* Rebrand stream moderation drop-down

CORL-799

* Rebrand the report comment flow

Expands the report comment dialogs under
the comment instead of as a popover.
Also adds in the new branding styles.

CORL-941

* Rebrand the main stream tab bar

CORL-799

* Add new abusive reporting options

CORL-1009

* Rebrand featured comments

CORL-968

* Rebrand the community guidelines

CORL-1041

* Rebrand the share button

CORL-940

* Update style names on buttons

marginSize -> paddingSize
textSize -> fontSize

* Rebrand single conversation view

CORL-904

* Make indented comments grey coloured

CORL-904

* Make indented comment borders thinner

CORL-904

* Tweak colours/margins on single conversation view

CORL-904

* Add show comment on single conversation tombstones

CORL-412

* Rebrand single conversation view title

CORL-904

* Add clean target to package.json

Allows us to direct call gulp clean easily.

* Rebrand client side not found page

CORL-1025

* Rebrand password reset flow

CORL-1025

* Rebrand unsubscribe from notifications flow

CORL-1025

* Rebrand email confirmation flow

CORL-1025

* Rebrand download comments flow

CORL-1025

* Fix up account tests after rebrand

CORL-1025

* Add COMMENT_REPORTED_ABUSIVE to moderate card fragment

* Rebrand user ignore flow

Somehow this slipped through the cracks, fixed
it up now

* [CORL 1010] Collapse comment threads (#2976)

* toggle open and closed comment + replies

* show username and date for collapsed comment

* toggle comments and replies open and closed

* keep collapsed state of comments in reply list

* style collapsed comment toggle

* add css class overrides

* style answered comments when collapsed

* adjust spacing on collapse button:

* add hover styles

* add aria labels and update snapshots

* Fix tests and snaps after rebase

* Make main stream tabs visible on mobile (iPhone 5)

* Remove double horizontal rule under My Comments

Horizontal rule wasn't conditionally showing
when we toggled ability to let users download
comments on and off.

* Add aria labelling to main stream tabs

Can now pass in a localization id to assign
aria-label/title to the tab.

* Add localization to account not found

* Update snapshots

Co-authored-by: Vinh <vinh@vinh.tech>
Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>
Co-authored-by: Tessa Thornton <tessathornton@gmail.com>
This commit is contained in:
Nick Funk
2020-06-12 09:23:28 -06:00
committed by GitHub
parent 8966dad344
commit ebe7731222
470 changed files with 24856 additions and 15481 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+67 -67
View File
@@ -15059,7 +15059,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -21485,28 +21485,28 @@
"dependencies": {
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
"resolved": false,
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
"dev": true,
"optional": true
},
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"resolved": false,
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
"resolved": false,
"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
"dev": true,
"optional": true
},
"are-we-there-yet": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
"resolved": false,
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
"dev": true,
"optional": true,
@@ -21517,14 +21517,14 @@
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"resolved": false,
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"optional": true,
@@ -21535,42 +21535,42 @@
},
"chownr": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
"resolved": false,
"integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
"dev": true,
"optional": true
},
"code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"resolved": false,
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"resolved": false,
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"resolved": false,
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true,
"optional": true
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"resolved": false,
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"optional": true,
@@ -21580,28 +21580,28 @@
},
"deep-extend": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
"resolved": false,
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
"dev": true,
"optional": true
},
"delegates": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"dev": true,
"optional": true
},
"detect-libc": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
"resolved": false,
"integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
"dev": true,
"optional": true
},
"fs-minipass": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
"resolved": false,
"integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
"dev": true,
"optional": true,
@@ -21611,14 +21611,14 @@
},
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true,
"optional": true
},
"gauge": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"resolved": false,
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
"optional": true,
@@ -21635,7 +21635,7 @@
},
"glob": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
"resolved": false,
"integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
"dev": true,
"optional": true,
@@ -21650,14 +21650,14 @@
},
"has-unicode": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"resolved": false,
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
"dev": true,
"optional": true
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"resolved": false,
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"dev": true,
"optional": true,
@@ -21667,7 +21667,7 @@
},
"ignore-walk": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
"resolved": false,
"integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
"dev": true,
"optional": true,
@@ -21677,7 +21677,7 @@
},
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"resolved": false,
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"optional": true,
@@ -21688,21 +21688,21 @@
},
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"resolved": false,
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"resolved": false,
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true,
"optional": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"optional": true,
@@ -21712,14 +21712,14 @@
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true,
"optional": true
},
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"resolved": false,
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"optional": true,
@@ -21729,14 +21729,14 @@
},
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"resolved": false,
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
"resolved": false,
"integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
"dev": true,
"optional": true,
@@ -21747,7 +21747,7 @@
},
"minizlib": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
"resolved": false,
"integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
"dev": true,
"optional": true,
@@ -21757,7 +21757,7 @@
},
"mkdirp": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"resolved": false,
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"optional": true,
@@ -21767,7 +21767,7 @@
},
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"resolved": false,
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true,
"optional": true
@@ -21781,7 +21781,7 @@
},
"needle": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
"resolved": false,
"integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
"dev": true,
"optional": true,
@@ -21793,7 +21793,7 @@
},
"node-pre-gyp": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
"resolved": false,
"integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
"dev": true,
"optional": true,
@@ -21812,7 +21812,7 @@
},
"nopt": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
"resolved": false,
"integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
"dev": true,
"optional": true,
@@ -21823,14 +21823,14 @@
},
"npm-bundled": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
"resolved": false,
"integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
"dev": true,
"optional": true
},
"npm-packlist": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
"resolved": false,
"integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
"dev": true,
"optional": true,
@@ -21841,7 +21841,7 @@
},
"npmlog": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
"resolved": false,
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"dev": true,
"optional": true,
@@ -21854,21 +21854,21 @@
},
"number-is-nan": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"resolved": false,
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"resolved": false,
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true,
"optional": true
},
"once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"resolved": false,
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"optional": true,
@@ -21878,21 +21878,21 @@
},
"os-homedir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true,
"optional": true
},
"os-tmpdir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true,
"optional": true
},
"osenv": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
"resolved": false,
"integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
"dev": true,
"optional": true,
@@ -21903,21 +21903,21 @@
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"resolved": false,
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true,
"optional": true
},
"process-nextick-args": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
"resolved": false,
"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
"dev": true,
"optional": true
},
"rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
"resolved": false,
"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
"dev": true,
"optional": true,
@@ -21930,7 +21930,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": false,
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true,
"optional": true
@@ -21939,7 +21939,7 @@
},
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"resolved": false,
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"dev": true,
"optional": true,
@@ -21955,7 +21955,7 @@
},
"rimraf": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
"resolved": false,
"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
"dev": true,
"optional": true,
@@ -21965,49 +21965,49 @@
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"resolved": false,
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"resolved": false,
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true,
"optional": true
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"resolved": false,
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true,
"optional": true
},
"semver": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
"resolved": false,
"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
"dev": true,
"optional": true
},
"set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"resolved": false,
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"dev": true,
"optional": true
},
"signal-exit": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
"resolved": false,
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
"dev": true,
"optional": true
},
"string-width": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"optional": true,
@@ -22019,7 +22019,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": false,
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"optional": true,
@@ -22029,7 +22029,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": false,
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"optional": true,
@@ -22039,14 +22039,14 @@
},
"strip-json-comments": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"resolved": false,
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true,
"optional": true
},
"tar": {
"version": "4.4.8",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
"resolved": false,
"integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
"dev": true,
"optional": true,
@@ -22062,14 +22062,14 @@
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true,
"optional": true
},
"wide-align": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
"resolved": false,
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
"dev": true,
"optional": true,
@@ -22079,14 +22079,14 @@
},
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
"resolved": false,
"integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
"dev": true,
"optional": true
package.json
+1
View File
@@ -21,6 +21,7 @@
],
"description": "A better commenting experience from Vox Media.",
"scripts": {
"clean": "gulp clean",
"build": "NODE_ENV=production npm-run-all generate-persist --parallel build:client build:server",
"build:development": "NODE_ENV=development npm-run-all generate --parallel build:client build:server",
"build:client": "ts-node --transpile-only ./scripts/build.ts",
src/core/client/account/routes/NotFound.css
+11
View File
@@ -0,0 +1,11 @@
.content {
font-family: var(--v2-font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
color: var(--v2-colors-mono-500);
text-align: center;
}
src/core/client/account/routes/NotFound.tsx
+7 -4
View File
@@ -1,12 +1,15 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { HorizontalGutter, Typography } from "coral-ui/components";
import { HorizontalGutter } from "coral-ui/components/v2";
import styles from "./NotFound.css";
const NotFound: FunctionComponent = () => (
<HorizontalGutter container="main">
<Typography variant="heading3" container="h1">
Not Found
</Typography>
<Localized id="notFound">
<div className={styles.content}>Not Found</div>
</Localized>
</HorizontalGutter>
);
src/core/client/account/routes/download/Download/DownloadDescription.css
+21 -19
View File
@@ -1,40 +1,42 @@
.title {
font-family: var(--font-family-serif);
font-weight: 600;
font-family: var(--v2-font-family-secondary);
font-style: normal;
font-size: calc(48rem / var(--rem-base));
line-height: calc(42em / 48);
text-align: center;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
color: var(--palette-common-black);
color: var(--v2-colors-mono-500);
padding-left: var(--v2-spacing-2);
}
.content {
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3);
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) var(--v2-spacing-3);
}
.section {
margin-bottom: var(--spacing-4);
margin-bottom: var(--v2-spacing-4);
}
.sectionText {
font-family: var(--font-family-sans-serif);
font-weight: normal;
font-family: var(--v2-font-family-primary);
font-style: normal;
font-size: calc(24rem / var(--rem-base));
line-height: calc(34em / 24);
letter-spacing: 0.3px;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--palette-text-primary);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-3);
}
.list {
list-style: none;
margin-left: calc(-1 * var(--spacing-5));
margin-left: calc(-1 * var(--v2-spacing-5));
}
.list li {
margin-bottom: calc(16em / 24);
margin-bottom: 0.75rem;
}
.listContent {
@@ -43,6 +45,6 @@
.bullet {
display: inline-block;
min-width: 24px;
margin-right: var(--spacing-2);
}
min-width: 16px;
margin-right: var(--v2-spacing-2);
}
src/core/client/account/routes/download/Download/DownloadDescription.tsx
+22 -34
View File
@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { Flex, HorizontalGutter, Icon, Typography } from "coral-ui/components";
import { Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
import styles from "./DownloadDescription.css";
@@ -10,84 +10,72 @@ const DownloadDescription: FunctionComponent = () => {
return (
<HorizontalGutter size="double">
<Localized id="download-landingPage-title">
<h1 className={styles.title}>Download Your Comment History</h1>
<h1 className={styles.title}>Download your comment history</h1>
</Localized>
<div className={styles.content}>
<div className={styles.section}>
<Localized id="download-landingPage-description">
<Typography variant="bodyCopy" className={styles.sectionText}>
<div className={styles.sectionText}>
Your comment history will be downloaded into a .zip file. After
your comment history is unzipped you will have a comma separated
value (or .csv) file that you can easily import into your favorite
spreadsheet application.
</Typography>
</div>
</Localized>
</div>
<div className={styles.section}>
<Localized id="download-landingPage-contentsDescription">
<Typography variant="bodyCopy" className={styles.sectionText}>
<div className={styles.sectionText}>
For each of your comments the following information is included:
</Typography>
</div>
</Localized>
<ul className={styles.list}>
<li>
<Flex alignItems="center">
<Icon size="lg" className={styles.bullet}>
<Flex alignItems="flex-start">
<Icon size="md" className={styles.bullet}>
check
</Icon>
<Localized id="download-landingPage-contentsDate">
<Typography
variant="bodyCopy"
className={cn(styles.sectionText, styles.listContent)}
>
<div className={cn(styles.sectionText, styles.listContent)}>
When you wrote the comment
</Typography>
</div>
</Localized>
</Flex>
</li>
<li>
<Flex alignItems="center">
<Icon size="lg" className={styles.bullet}>
<Flex alignItems="flex-start">
<Icon size="md" className={styles.bullet}>
check
</Icon>
<Localized id="download-landingPage-contentsUrl">
<Typography
variant="bodyCopy"
className={cn(styles.sectionText, styles.listContent)}
>
<div className={cn(styles.sectionText, styles.listContent)}>
The permalink URL for the comment
</Typography>
</div>
</Localized>
</Flex>
</li>
<li>
<Flex alignItems="center">
<Icon size="lg" className={styles.bullet}>
<Flex alignItems="flex-start">
<Icon size="md" className={styles.bullet}>
check
</Icon>
<Localized id="download-landingPage-contentsText">
<Typography
variant="bodyCopy"
className={cn(styles.sectionText, styles.listContent)}
>
<div className={cn(styles.sectionText, styles.listContent)}>
The comment text
</Typography>
</div>
</Localized>
</Flex>
</li>
<li>
<Flex alignItems="center">
<Icon size="lg" className={styles.bullet}>
<Flex alignItems="flex-start">
<Icon size="md" className={styles.bullet}>
check
</Icon>
<Localized id="download-landingPage-contentsStoryUrl">
<Typography
variant="bodyCopy"
className={cn(styles.sectionText, styles.listContent)}
>
<div className={cn(styles.sectionText, styles.listContent)}>
The URL on the article or story where the comment appears
</Typography>
</div>
</Localized>
</Flex>
</li>
src/core/client/account/routes/download/Download/DownloadForm.css
-5
View File
@@ -1,8 +1,3 @@
.form {
text-align: center;
}
.downloadButton {
font-size: calc(18rem / var(--rem-base));
line-height: calc(23em / 18);
}
src/core/client/account/routes/download/Download/DownloadForm.tsx
+6 -4
View File
@@ -1,7 +1,8 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent, useCallback, useState } from "react";
import { Button, HorizontalGutter } from "coral-ui/components";
import { HorizontalGutter } from "coral-ui/components/v2";
import { Button } from "coral-ui/components/v3";
import styles from "./DownloadForm.css";
@@ -25,15 +26,16 @@ const DownloadForm: FunctionComponent<Props> = ({ token }) => {
onSubmit={onSubmit}
>
<input name="token" type="hidden" value={token} />
<Localized id="download-landingPage-downloadComments">
<Localized id="download-landingPage-download">
<Button
type="submit"
variant="filled"
color="primary"
paddingSize="medium"
disabled={submitted}
className={styles.downloadButton}
upperCase
>
Download My Comment History
Download
</Button>
</Localized>
</form>
src/core/client/account/routes/download/Download/DownloadRoute.css
+3 -3
View File
@@ -6,11 +6,11 @@
.root {
display: inline-block;
max-width: calc(70 * var(--mini-unit));
max-width: calc(70 * var(--v2-spacing-2));
@media (min-width: $breakpoints-xs) {
max-width: calc(90 * var(--mini-unit));
max-width: calc(60 * var(--v2-spacing-2));
}
text-align: left;
}
}
src/core/client/account/routes/download/Download/Sorry.css
-7
View File
@@ -1,7 +0,0 @@
.icon {
margin-right: var(--spacing-2);
}
.callout {
justify-content: left;
}
src/core/client/account/routes/download/Download/Sorry.tsx
+9 -10
View File
@@ -1,22 +1,21 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { CallOut, Flex, Icon } from "coral-ui/components";
import styles from "./Sorry.css";
import { Icon } from "coral-ui/components/v2";
import { CallOut } from "coral-ui/components/v3";
const Sorry: FunctionComponent = () => {
return (
<CallOut color="error" fullWidth className={styles.callout}>
<Flex>
<Icon size="md" className={styles.icon}>
error
</Icon>
<CallOut
color="negative"
icon={<Icon>error</Icon>}
titleWeight="semiBold"
title={
<Localized id="download-landingPage-sorry">
Your download link is invalid.
</Localized>
</Flex>
</CallOut>
}
/>
);
};
src/core/client/account/routes/email/Confirm/Confirm.css
+52
View File
@@ -0,0 +1,52 @@
.title {
font-family: var(--v2-font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-2);
}
.description {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-3);
}
.label {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-1);
}
.labelDescription {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
color: var(--v2-colors-mono-100);
margin-bottom: var(--v2-spacing-2);
}
.submit {
margin-top: var(--v2-spacing-5);
margin-bottom: var(--v2-spacing-1);
}
src/core/client/account/routes/email/Confirm/ConfirmForm.tsx
+15 -11
View File
@@ -5,10 +5,12 @@ import { Form } from "react-final-form";
import { InvalidRequestError } from "coral-framework/lib/errors";
import { useMutation } from "coral-framework/lib/relay";
import { Button, HorizontalGutter, Typography } from "coral-ui/components";
import { Button } from "coral-ui/components/v3";
import ConfirmMutation from "./ConfirmMutation";
import styles from "./Confirm.css";
interface Props {
token: string;
disabled?: boolean;
@@ -33,18 +35,18 @@ const ConfirmForm: React.FunctionComponent<Props> = ({ onSuccess, token }) => {
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="double">
<HorizontalGutter>
<Localized id="confirmEmail-emailConfirmation">
<Typography variant="heading1">Email Confirmation</Typography>
<div>
<div>
<Localized id="confirmEmail-confirmYourEmailAddress">
<div className={styles.title}>Confirm your email address</div>
</Localized>
<Localized id="confirmEmail-pleaseClickToConfirm">
<Typography variant="bodyCopy">
<div className={styles.description}>
Click below to confirm your email address.
</Typography>
</div>
</Localized>
</HorizontalGutter>
<HorizontalGutter>
</div>
<div>
<Localized id="confirmEmail-confirmEmail">
<Button
type="submit"
@@ -52,12 +54,14 @@ const ConfirmForm: React.FunctionComponent<Props> = ({ onSuccess, token }) => {
color="primary"
disabled={submitting}
fullWidth
upperCase
className={styles.submit}
>
Confirm email
</Button>
</Localized>
</HorizontalGutter>
</HorizontalGutter>
</div>
</div>
</form>
)}
</Form>
src/core/client/account/routes/email/Confirm/Sorry.tsx
+22 -16
View File
@@ -1,7 +1,9 @@
import { Localized } from "@fluent/react/compat";
import React from "react";
import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
import { CallOut } from "coral-ui/components/v3";
import styles from "./Confirm.css";
interface Props {
reason: React.ReactNode;
@@ -9,23 +11,27 @@ interface Props {
const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
return (
<HorizontalGutter size="double">
<div>
<Localized id="confirmEmail-oopsSorry">
<Typography variant="heading1">Oops Sorry!</Typography>
<div className={styles.title}>Oops Sorry!</div>
</Localized>
<CallOut color="error" fullWidth>
{reason ? (
reason
) : (
<Localized id="account-tokenNotFound">
<span data-testid="invalid-link">
The specified link is invalid, check to see if it was copied
correctly.
</span>
</Localized>
)}
</CallOut>
</HorizontalGutter>
<CallOut
color="negative"
titleWeight="semiBold"
title={
reason ? (
reason
) : (
<Localized id="account-tokenNotFound">
<span data-testid="invalid-link">
The specified link is invalid, check to see if it was copied
correctly.
</span>
</Localized>
)
}
/>
</div>
);
};
src/core/client/account/routes/email/Confirm/Success.tsx
+5 -7
View File
@@ -1,20 +1,18 @@
import { Localized } from "@fluent/react/compat";
import React from "react";
import { HorizontalGutter, Typography } from "coral-ui/components";
import styles from "./Confirm.css";
const Success: React.FunctionComponent = () => {
return (
<HorizontalGutter size="double">
<div>
<Localized id="confirmEmail-successfullyConfirmed">
<Typography variant="heading1">Email successfully confirmed</Typography>
<div className={styles.title}>Email successfully confirmed</div>
</Localized>
<Localized id="confirmEmail-youMayClose">
<Typography variant="bodyCopy">
You may now close this window.
</Typography>
<div className={styles.description}>You may now close this window.</div>
</Localized>
</HorizontalGutter>
</div>
);
};
src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx
+22 -16
View File
@@ -1,7 +1,9 @@
import { Localized } from "@fluent/react/compat";
import React from "react";
import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
import { CallOut } from "coral-ui/components/v3";
import styles from "./Unsubscribe.css";
interface Props {
reason: React.ReactNode;
@@ -9,23 +11,27 @@ interface Props {
const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
return (
<HorizontalGutter size="double">
<div>
<Localized id="unsubscribe-oopsSorry">
<Typography variant="heading1">Oops Sorry!</Typography>
<div className={styles.title}>Oops Sorry!</div>
</Localized>
<CallOut color="error" fullWidth>
{reason ? (
reason
) : (
<Localized id="account-tokenNotFound">
<span data-testid="invalid-link">
The specified link is invalid, check to see if it was copied
correctly.
</span>
</Localized>
)}
</CallOut>
</HorizontalGutter>
<CallOut
color="negative"
titleWeight="semiBold"
title={
reason ? (
reason
) : (
<Localized id="account-tokenNotFound">
<span data-testid="invalid-link">
The specified link is invalid, check to see if it was copied
correctly.
</span>
</Localized>
)
}
/>
</div>
);
};
src/core/client/account/routes/notifications/Unsubscribe/Success.tsx
+10 -7
View File
@@ -1,17 +1,20 @@
import { Localized } from "@fluent/react/compat";
import React from "react";
import { HorizontalGutter, Typography } from "coral-ui/components";
import styles from "./Unsubscribe.css";
const Success: React.FunctionComponent = () => {
return (
<HorizontalGutter data-testid="success" size="double">
<Localized id="unsubscribe-successfullyUnsubscribed">
<Typography variant="heading1">
You are now unsubscribed from all notifications
</Typography>
<div data-testid="success">
<Localized id="unsubscribe-unsubscribedSuccessfully">
<div className={styles.title}>
Unsubscribed successfully from email notifications
</div>
</Localized>
</HorizontalGutter>
<Localized id="unsubscribe-youMayNowClose">
<div className={styles.description}>You may now close this window</div>
</Localized>
</div>
);
};
src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css
+52
View File
@@ -0,0 +1,52 @@
.title {
font-family: var(--v2-font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-2);
}
.description {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-3);
}
.label {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-1);
}
.labelDescription {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
color: var(--v2-colors-mono-100);
margin-bottom: var(--v2-spacing-2);
}
.submit {
margin-top: var(--v2-spacing-5);
margin-bottom: var(--v2-spacing-1);
}
src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx
+18 -17
View File
@@ -5,15 +5,12 @@ import { Form } from "react-final-form";
import { InvalidRequestError } from "coral-framework/lib/errors";
import { useMutation } from "coral-framework/lib/relay";
import {
Button,
CallOut,
HorizontalGutter,
Typography,
} from "coral-ui/components";
import { Button, CallOut } from "coral-ui/components/v3";
import UnsubscribeNotificationsMutation from "./UnsubscribeNotificationsMutation";
import styles from "./Unsubscribe.css";
interface Props {
token: string;
disabled?: boolean;
@@ -42,30 +39,34 @@ const UnsubscribeForm: React.FunctionComponent<Props> = ({
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form onSubmit={handleSubmit}>
<HorizontalGutter>
<div>
<Localized id="unsubscribe-unsubscribeFromEmails">
<div className={styles.title}>
Unsubscribe from email notifications
</div>
</Localized>
<Localized id="unsubscribe-clickToConfirm">
<Typography variant="heading1">
<div className={styles.description}>
Click below to confirm that you want to unsubscribe from all
notifications.
</Typography>
</div>
</Localized>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
<Localized id="unsubscribe-confirm">
{submitError && <CallOut color="negative" title={submitError} />}
<Localized id="unsubscribe-submit-unsubscribe">
<Button
type="submit"
variant="filled"
paddingSize="medium"
color="primary"
disabled={submitting}
upperCase
fullWidth
className={styles.submit}
>
Confirm
Unsubscribe
</Button>
</Localized>
</HorizontalGutter>
</div>
</form>
)}
</Form>
src/core/client/account/routes/password/Reset/Reset.css
+52
View File
@@ -0,0 +1,52 @@
.title {
font-family: var(--v2-font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-2);
}
.description {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-3);
}
.label {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-1);
}
.labelDescription {
font-family: var(--v2-font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
color: var(--v2-colors-mono-100);
margin-bottom: var(--v2-spacing-2);
}
.submit {
margin-top: var(--v2-spacing-5);
margin-bottom: var(--v2-spacing-1);
}
src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx
+24 -29
View File
@@ -4,26 +4,20 @@ import React, { useCallback } from "react";
import { Field, Form } from "react-final-form";
import { InvalidRequestError } from "coral-framework/lib/errors";
import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
import { colorFromMeta } from "coral-framework/lib/form";
import { useMutation } from "coral-framework/lib/relay";
import {
composeValidators,
required,
validatePassword,
} from "coral-framework/lib/validation";
import {
Button,
CallOut,
FormField,
HorizontalGutter,
InputDescription,
InputLabel,
PasswordField,
Typography,
} from "coral-ui/components";
import { FormField, PasswordField } from "coral-ui/components/v2";
import { Button, CallOut, ValidationMessage } from "coral-ui/components/v3";
import ResetPasswordMutation from "./ResetPasswordMutation";
import styles from "./Reset.css";
interface Props {
token: string;
disabled?: boolean;
@@ -60,22 +54,20 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="double">
<HorizontalGutter>
<div>
<div>
<Localized id="resetPassword-resetYourPassword">
<Typography variant="heading1">
Reset your password
</Typography>
<div className={styles.title}>Reset your password</div>
</Localized>
<Localized id="resetPassword-pleaseEnterNewPassword">
<Typography variant="bodyCopy">
<div className={styles.description}>
Please enter a new password to use to sign in to your
account. Make sure it is unique and be sure to keep it
secure.
</Typography>
</div>
</Localized>
</HorizontalGutter>
<HorizontalGutter>
</div>
<div>
<Field
name="password"
validate={composeValidators(required, validatePassword)}
@@ -83,15 +75,17 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({
{({ input, meta }) => (
<FormField>
<Localized id="resetPassword-passwordLabel">
<InputLabel htmlFor={input.name}>Password</InputLabel>
<label className={styles.label} htmlFor={input.name}>
Password
</label>
</Localized>
<Localized
id="resetPassword-passwordDescription"
$minLength={8}
>
<InputDescription>
<div className={styles.labelDescription}>
{"Must be at least {$minLength} characters"}
</InputDescription>
</div>
</Localized>
<Localized
id="resetPassword-passwordTextField"
@@ -107,28 +101,29 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({
{...input}
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
<ValidationMessage meta={meta} />
</FormField>
)}
</Field>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
<CallOut color="negative" title={submitError} />
)}
<Localized id="resetPassword-resetPassword">
<Button
type="submit"
variant="filled"
color="primary"
paddingSize="medium"
disabled={submitting}
upperCase
fullWidth
className={styles.submit}
>
Reset Password
</Button>
</Localized>
</HorizontalGutter>
</HorizontalGutter>
</div>
</div>
</form>
)}
</Form>
src/core/client/account/routes/password/Reset/Sorry.tsx
+22 -16
View File
@@ -1,7 +1,9 @@
import { Localized } from "@fluent/react/compat";
import React from "react";
import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
import { CallOut } from "coral-ui/components/v3";
import styles from "./Reset.css";
interface Props {
reason: React.ReactNode;
@@ -9,23 +11,27 @@ interface Props {
const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
return (
<HorizontalGutter size="double">
<div>
<Localized id="resetPassword-oopsSorry">
<Typography variant="heading1">Oops Sorry!</Typography>
<div className={styles.title}>Oops Sorry!</div>
</Localized>
<CallOut color="error" fullWidth>
{reason ? (
reason
) : (
<Localized id="account-tokenNotFound">
<span data-testid="invalid-link">
The specified link is invalid, check to see if it was copied
correctly.
</span>
</Localized>
)}
</CallOut>
</HorizontalGutter>
<CallOut
color="negative"
titleWeight="semiBold"
title={
reason ? (
reason
) : (
<Localized id="account-tokenNotFound">
<span data-testid="invalid-link">
The specified link is invalid, check to see if it was copied
correctly.
</span>
</Localized>
)
}
/>
</div>
);
};
src/core/client/account/routes/password/Reset/Success.tsx
+6 -6
View File
@@ -1,21 +1,21 @@
import { Localized } from "@fluent/react/compat";
import React from "react";
import { HorizontalGutter, Typography } from "coral-ui/components";
import styles from "./Reset.css";
const Success: React.FunctionComponent = () => {
return (
<HorizontalGutter size="double">
<div>
<Localized id="resetPassword-successfullyReset">
<Typography variant="heading1">Password successfully reset</Typography>
<div className={styles.title}>Password successfully reset</div>
</Localized>
<Localized id="resetPassword-youMayClose">
<Typography variant="bodyCopy">
<div className={styles.description}>
You may now close this window and sign in to your account with your
new password.
</Typography>
</div>
</Localized>
</HorizontalGutter>
</div>
);
};
src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
+32 -31
View File
@@ -20,30 +20,22 @@ exports[`renders form 1`] = `
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
<div>
<div>
<div
className="Confirm-title"
>
Email Confirmation
</h1>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
Confirm your email address
</div>
<div
className="Confirm-description"
>
Click below to confirm your email address.
</p>
</div>
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorPrimary Button-upperCase Button-fullWidth Confirm-submit"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -79,25 +71,34 @@ exports[`renders missing confirm token 1`] = `
<div
className="ConfirmRoute-root"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
<div>
<div
className="Confirm-title"
>
Oops Sorry!
</h1>
</div>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
className="CallOut-root CallOut-negative CallOut-leftBorder"
>
<div
className="CallOut-inner"
className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
>
<span
data-testid="invalid-link"
<div
className="CallOut-content"
>
The specified link is invalid, check to see if it was copied correctly.
</span>
<div
className="CallOut-title CallOut-titleSemiBold"
>
<span
data-testid="invalid-link"
>
The specified link is invalid, check to see if it was copied correctly.
</span>
</div>
<div
className="CallOut-body"
/>
</div>
</div>
</div>
</div>
src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+37 -35
View File
@@ -21,41 +21,35 @@ exports[`renders form 1`] = `
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
<div>
<div>
<div
className="Reset-title"
>
Reset your password
</h1>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
</div>
<div
className="Reset-description"
>
Please enter a new password to use to sign in to your account.
Make sure it is unique and be sure to keep it secure.
</p>
</div>
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Reset-label"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="Reset-labelDescription"
>
Must be at least 8 characters
</p>
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -67,6 +61,7 @@ Make sure it is unique and be sure to keep it secure.
autoComplete="new-password"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
@@ -97,9 +92,7 @@ Make sure it is unique and be sure to keep it secure.
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth Reset-submit"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -136,25 +129,34 @@ exports[`renders missing reset token 1`] = `
<div
className="ResetRoute-root"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
<div>
<div
className="Reset-title"
>
Oops Sorry!
</h1>
</div>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
className="CallOut-root CallOut-negative CallOut-leftBorder"
>
<div
className="CallOut-inner"
className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
>
<span
data-testid="invalid-link"
<div
className="CallOut-content"
>
The specified link is invalid, check to see if it was copied correctly.
</span>
<div
className="CallOut-title CallOut-titleSemiBold"
>
<span
data-testid="invalid-link"
>
The specified link is invalid, check to see if it was copied correctly.
</span>
</div>
<div
className="CallOut-body"
/>
</div>
</div>
</div>
</div>
src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap
+32 -22
View File
@@ -22,18 +22,19 @@ exports[`renders form 1`] = `
<form
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
<div>
<div
className="Unsubscribe-title"
>
Unsubscribe from email notifications
</div>
<div
className="Unsubscribe-description"
>
Click below to confirm that you want to unsubscribe from all notifications.
</h1>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth Unsubscribe-submit"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -42,7 +43,7 @@ exports[`renders form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
Confirm
Unsubscribe
</button>
</div>
</form>
@@ -69,25 +70,34 @@ exports[`renders missing confirm token 1`] = `
<div
className="UnsubscribeRoute-root"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
<div>
<div
className="Unsubscribe-title"
>
Oops Sorry!
</h1>
</div>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
className="CallOut-root CallOut-negative CallOut-leftBorder"
>
<div
className="CallOut-inner"
className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
>
<span
data-testid="invalid-link"
<div
className="CallOut-content"
>
The specified link is invalid, check to see if it was copied correctly.
</span>
<div
className="CallOut-title CallOut-titleSemiBold"
>
<span
data-testid="invalid-link"
>
The specified link is invalid, check to see if it was copied correctly.
</span>
</div>
<div
className="CallOut-body"
/>
</div>
</div>
</div>
</div>
src/core/client/account/test/confirmEmail.spec.tsx
+2 -6
View File
@@ -53,9 +53,7 @@ it("renders form", async () => {
await act(async () => {
await waitForElement(() =>
within(root).getByText("Email Confirmation", {
exact: false,
})
within(root).getByText("Confirm your email address")
);
});
expect(within(root).toJSON()).toMatchSnapshot();
@@ -130,9 +128,7 @@ it("submits form", async () => {
await act(async () => {
await waitForElement(() =>
within(root).getByText("Email Confirmation", {
exact: false,
})
within(root).getByText("Confirm your email address")
);
});
const form = within(root).getByType("form");
src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx
+23
View File
@@ -32,6 +32,9 @@ const FlagDetailsContainer: FunctionComponent<Props> = ({
const offensive = nodes.filter(
({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_OFFENSIVE
);
const abusive = nodes.filter(
({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_ABUSIVE
);
const spam = nodes.filter(
({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_SPAM
);
@@ -75,6 +78,26 @@ const FlagDetailsContainer: FunctionComponent<Props> = ({
))}
</FlagDetailsCategory>
)}
{abusive.length > 0 && (
<FlagDetailsCategory
category={
<Localized id="moderate-flagDetails-abusive">
<span>Abusive</span>
</Localized>
}
>
{offensive.map((flag, i) => (
<FlagDetailsEntry
key={i}
onClick={() =>
flag.flagger ? onUsernameClick(flag.flagger.id) : null
}
user={flag.flagger ? flag.flagger.username : <NotAvailable />}
details={flag.additionalDetails}
/>
))}
</FlagDetailsCategory>
)}
{spam.length > 0 && (
<FlagDetailsCategory
category={
src/core/client/admin/components/ModerateCard/MarkersContainer.spec.tsx
+2
View File
@@ -24,6 +24,7 @@ it("renders all markers", () => {
COMMENT_DETECTED_BANNED_WORD: 1,
COMMENT_DETECTED_SUSPECT_WORD: 1,
COMMENT_REPORTED_OFFENSIVE: 2,
COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_REPORTED_SPAM: 3,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_REPEAT_POST: 1,
@@ -61,6 +62,7 @@ it("renders some markers", () => {
COMMENT_DETECTED_BANNED_WORD: 1,
COMMENT_DETECTED_SUSPECT_WORD: 0,
COMMENT_REPORTED_OFFENSIVE: 2,
COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_REPORTED_SPAM: 0,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_REPEAT_POST: 0,
src/core/client/admin/components/ModerateCard/MarkersContainer.tsx
+14
View File
@@ -97,6 +97,19 @@ const markers: Array<(
</Marker>
)) ||
null,
(c) =>
(c.revision &&
c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_ABUSIVE && (
<Marker key={keyCounter++} color="reported">
<Localized id="moderate-marker-abusive">
<span>Abusive</span>
</Localized>{" "}
<MarkerCount>
{c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_ABUSIVE}
</MarkerCount>
</Marker>
)) ||
null,
(c) =>
(c.revision &&
c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM && (
@@ -159,6 +172,7 @@ const enhanced = withFragmentContainer<MarkersContainerProps>({
COMMENT_DETECTED_BANNED_WORD
COMMENT_DETECTED_SUSPECT_WORD
COMMENT_REPORTED_OFFENSIVE
COMMENT_REPORTED_ABUSIVE
COMMENT_REPORTED_SPAM
COMMENT_DETECTED_NEW_COMMENTER
COMMENT_DETECTED_REPEAT_POST
src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
+2
View File
@@ -36,6 +36,7 @@ type DetailsTabs = "INFO" | "HISTORY";
function hasFlagDetails(c: ModerateCardDetailsContainer_comment) {
return c.revision
? c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_OFFENSIVE +
c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_ABUSIVE +
c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM >
0 || c.revision.metadata.perspective
: false;
@@ -110,6 +111,7 @@ const enhanced = withFragmentContainer<Props>({
flag {
reasons {
COMMENT_REPORTED_OFFENSIVE
COMMENT_REPORTED_ABUSIVE
COMMENT_REPORTED_SPAM
}
}
src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap
+2
View File
@@ -18,6 +18,7 @@ exports[`renders all markers 1`] = `
"COMMENT_DETECTED_SPAM": 1,
"COMMENT_DETECTED_SUSPECT_WORD": 1,
"COMMENT_DETECTED_TOXIC": 1,
"COMMENT_REPORTED_ABUSIVE": 0,
"COMMENT_REPORTED_OFFENSIVE": 2,
"COMMENT_REPORTED_SPAM": 3,
},
@@ -163,6 +164,7 @@ exports[`renders some markers 1`] = `
"COMMENT_DETECTED_SPAM": 0,
"COMMENT_DETECTED_SUSPECT_WORD": 0,
"COMMENT_DETECTED_TOXIC": 1,
"COMMENT_REPORTED_ABUSIVE": 0,
"COMMENT_REPORTED_OFFENSIVE": 2,
"COMMENT_REPORTED_SPAM": 0,
},
src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+24 -24
View File
@@ -14,12 +14,12 @@ exports[`accepts correct password 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="email"
>
Email Address
</div>
</label>
<div
className="TextField-root TextField-fullWidth"
>
@@ -58,12 +58,12 @@ exports[`accepts correct password 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</div>
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -157,12 +157,12 @@ exports[`accepts valid email 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="email"
>
Email Address
</div>
</label>
<div
className="TextField-root TextField-fullWidth"
>
@@ -188,12 +188,12 @@ exports[`accepts valid email 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</div>
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -300,12 +300,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="email"
>
Email Address
</div>
</label>
<div
className="TextField-root TextField-fullWidth"
>
@@ -344,12 +344,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</div>
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -491,12 +491,12 @@ exports[`renders sign in form 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="email"
>
Email Address
</div>
</label>
<div
className="TextField-root TextField-fullWidth"
>
@@ -522,12 +522,12 @@ exports[`renders sign in form 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</div>
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -635,12 +635,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="email"
>
Email Address
</div>
</label>
<div
className="TextField-root TextField-fullWidth"
>
@@ -679,12 +679,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</div>
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -800,12 +800,12 @@ exports[`shows server error 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="email"
>
Email Address
</div>
</label>
<div
className="TextField-root TextField-fullWidth"
>
@@ -831,12 +831,12 @@ exports[`shows server error 1`] = `
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</div>
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+4 -4
View File
@@ -90,7 +90,7 @@ exports[`renders community 1`] = `
>
<select
aria-label="Search by role"
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -147,7 +147,7 @@ exports[`renders community 1`] = `
>
<select
aria-label="Search by user status"
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -750,7 +750,7 @@ exports[`renders empty community 1`] = `
>
<select
aria-label="Search by role"
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -807,7 +807,7 @@ exports[`renders empty community 1`] = `
>
<select
aria-label="Search by user status"
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+61 -61
View File
@@ -461,7 +461,7 @@ address from the site and the database.
>
<select
aria-label="unit"
className="SelectField-select DurationField-select"
className="SelectField-select DurationField-select SelectField-selectFont SelectField-selectColor"
disabled={false}
name="auth.sessionDuration-unit"
onBlur={[Function]}
@@ -524,11 +524,11 @@ address from the site and the database.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.local.enabled"
name="auth.integrations.local.enabled"
@@ -539,7 +539,7 @@ address from the site and the database.
value={true}
/>
<label
className="CheckBox-label CheckBox-labelLight"
className="CheckBox-label CheckBox-labelLight CheckBox-default"
htmlFor="auth.integrations.local.enabled"
>
<span
@@ -572,11 +572,11 @@ address from the site and the database.
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.local.targetFilter.admin"
name="auth.integrations.local.targetFilter.admin"
@@ -587,7 +587,7 @@ address from the site and the database.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.local.targetFilter.admin"
>
<span
@@ -598,11 +598,11 @@ address from the site and the database.
</label>
</div>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.local.targetFilter.stream"
name="auth.integrations.local.targetFilter.stream"
@@ -613,7 +613,7 @@ address from the site and the database.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.local.targetFilter.stream"
>
<span
@@ -647,11 +647,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.local.allowRegistration"
name="auth.integrations.local.allowRegistration"
@@ -662,7 +662,7 @@ integration to register for a new account.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.local.allowRegistration"
>
<span
@@ -696,11 +696,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={false}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.oidc.enabled"
name="auth.integrations.oidc.enabled"
@@ -711,7 +711,7 @@ integration to register for a new account.
value={false}
/>
<label
className="CheckBox-label CheckBox-labelLight"
className="CheckBox-label CheckBox-labelLight CheckBox-default"
htmlFor="auth.integrations.oidc.enabled"
>
<span
@@ -1093,11 +1093,11 @@ the remaining fields. You may also enter the information manually.
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.oidc.targetFilter.admin"
name="auth.integrations.oidc.targetFilter.admin"
@@ -1108,7 +1108,7 @@ the remaining fields. You may also enter the information manually.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.oidc.targetFilter.admin"
>
<span
@@ -1119,11 +1119,11 @@ the remaining fields. You may also enter the information manually.
</label>
</div>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.oidc.targetFilter.stream"
name="auth.integrations.oidc.targetFilter.stream"
@@ -1134,7 +1134,7 @@ the remaining fields. You may also enter the information manually.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.oidc.targetFilter.stream"
>
<span
@@ -1168,11 +1168,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={false}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.oidc.allowRegistration"
name="auth.integrations.oidc.allowRegistration"
@@ -1183,7 +1183,7 @@ integration to register for a new account.
value={false}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.oidc.allowRegistration"
>
<span
@@ -1217,11 +1217,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={false}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.sso.enabled"
name="auth.integrations.sso.enabled"
@@ -1232,7 +1232,7 @@ integration to register for a new account.
value={false}
/>
<label
className="CheckBox-label CheckBox-labelLight"
className="CheckBox-label CheckBox-labelLight CheckBox-default"
htmlFor="auth.integrations.sso.enabled"
>
<span
@@ -1493,11 +1493,11 @@ more about creating a JWT Token with
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.sso.targetFilter.admin"
name="auth.integrations.sso.targetFilter.admin"
@@ -1508,7 +1508,7 @@ more about creating a JWT Token with
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.sso.targetFilter.admin"
>
<span
@@ -1519,11 +1519,11 @@ more about creating a JWT Token with
</label>
</div>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.sso.targetFilter.stream"
name="auth.integrations.sso.targetFilter.stream"
@@ -1534,7 +1534,7 @@ more about creating a JWT Token with
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.sso.targetFilter.stream"
>
<span
@@ -1568,11 +1568,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.sso.allowRegistration"
name="auth.integrations.sso.allowRegistration"
@@ -1583,7 +1583,7 @@ integration to register for a new account.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.sso.allowRegistration"
>
<span
@@ -1617,11 +1617,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={false}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.google.enabled"
name="auth.integrations.google.enabled"
@@ -1632,7 +1632,7 @@ integration to register for a new account.
value={false}
/>
<label
className="CheckBox-label CheckBox-labelLight"
className="CheckBox-label CheckBox-labelLight CheckBox-default"
htmlFor="auth.integrations.google.enabled"
>
<span
@@ -1814,11 +1814,11 @@ to create and set up a web application. For more information visit:
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.google.targetFilter.admin"
name="auth.integrations.google.targetFilter.admin"
@@ -1829,7 +1829,7 @@ to create and set up a web application. For more information visit:
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.google.targetFilter.admin"
>
<span
@@ -1840,11 +1840,11 @@ to create and set up a web application. For more information visit:
</label>
</div>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.google.targetFilter.stream"
name="auth.integrations.google.targetFilter.stream"
@@ -1855,7 +1855,7 @@ to create and set up a web application. For more information visit:
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.google.targetFilter.stream"
>
<span
@@ -1889,11 +1889,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.google.allowRegistration"
name="auth.integrations.google.allowRegistration"
@@ -1904,7 +1904,7 @@ integration to register for a new account.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.google.allowRegistration"
>
<span
@@ -1938,11 +1938,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={false}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="auth.integrations.facebook.enabled"
name="auth.integrations.facebook.enabled"
@@ -1953,7 +1953,7 @@ integration to register for a new account.
value={false}
/>
<label
className="CheckBox-label CheckBox-labelLight"
className="CheckBox-label CheckBox-labelLight CheckBox-default"
htmlFor="auth.integrations.facebook.enabled"
>
<span
@@ -2135,11 +2135,11 @@ For more information visit:
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.facebook.targetFilter.admin"
name="auth.integrations.facebook.targetFilter.admin"
@@ -2150,7 +2150,7 @@ For more information visit:
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.facebook.targetFilter.admin"
>
<span
@@ -2161,11 +2161,11 @@ For more information visit:
</label>
</div>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.facebook.targetFilter.stream"
name="auth.integrations.facebook.targetFilter.stream"
@@ -2176,7 +2176,7 @@ For more information visit:
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.facebook.targetFilter.stream"
>
<span
@@ -2210,11 +2210,11 @@ integration to register for a new account.
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={true}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={true}
id="auth.integrations.facebook.allowRegistration"
name="auth.integrations.facebook.allowRegistration"
@@ -2225,7 +2225,7 @@ integration to register for a new account.
value={true}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="auth.integrations.facebook.allowRegistration"
>
<span
src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+32 -22
View File
@@ -179,7 +179,7 @@ exports[`renders configure general 1`] = `
className="SelectField-root"
>
<select
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
disabled={false}
id="configure-locale-locale"
name="locale"
@@ -645,11 +645,11 @@ here:
Additional rich-text options
</label>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={false}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="rte.strikethrough"
name="rte.strikethrough"
@@ -660,7 +660,7 @@ here:
value={false}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="rte.strikethrough"
>
<span
@@ -672,11 +672,11 @@ here:
</div>
<div>
<div
className="CheckBox-root"
className="CheckBox-root CheckBox-default"
>
<input
checked={false}
className="CheckBox-input"
className="CheckBox-input CheckBox-default"
disabled={false}
id="rte.spoiler"
name="rte.spoiler"
@@ -687,7 +687,7 @@ here:
value={false}
/>
<label
className="CheckBox-label"
className="CheckBox-label CheckBox-default"
htmlFor="rte.spoiler"
>
<span
@@ -945,7 +945,7 @@ moderation panel.
>
<select
aria-label="unit"
className="SelectField-select DurationField-select"
className="SelectField-select DurationField-select SelectField-selectFont SelectField-selectColor"
disabled={false}
name="editCommentWindowLength-unit"
onBlur={[Function]}
@@ -1105,7 +1105,7 @@ moderation panel.
>
<select
aria-label="unit"
className="SelectField-select DurationField-select"
className="SelectField-select DurationField-select SelectField-selectFont SelectField-selectColor"
disabled={false}
name="closeCommenting.timeout-unit"
onBlur={[Function]}
@@ -1257,9 +1257,11 @@ each other's comments.
Preview
</p>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
data-color="primary"
data-variant="textUnderlined"
aria-label="Reaction"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
data-color="mono"
data-testid="comment-reaction-button"
data-variant="text"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -1269,9 +1271,12 @@ each other's comments.
onTouchEnd={[Function]}
type="button"
>
<span>
Reaction
</span>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
icon
</i>
</button>
</div>
</div>
@@ -1316,9 +1321,11 @@ each other's comments.
Preview
</p>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
data-color="primary"
data-variant="textUnderlined"
aria-label="reacted"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
data-color="mono"
data-testid="comment-reaction-button"
data-variant="text"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -1328,9 +1335,12 @@ each other's comments.
onTouchEnd={[Function]}
type="button"
>
<span>
reacted
</span>
<i
aria-hidden="true"
className="Icon-root Icon-sm ReactionButton-reacted"
>
icon
</i>
</button>
</div>
</div>
@@ -1386,7 +1396,7 @@ each other's comments.
className="SelectField-root"
>
<select
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
onBlur={[Function]}
onFocus={[Function]}
>
src/core/client/admin/test/fixtures.ts
+1
View File
@@ -643,6 +643,7 @@ export const baseComment = createFixture<GQLComment>({
COMMENT_DETECTED_BANNED_WORD: 0,
COMMENT_DETECTED_SUSPECT_WORD: 0,
COMMENT_REPORTED_OFFENSIVE: 0,
COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_REPORTED_SPAM: 0,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_REPEAT_POST: 0,
src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+2 -2
View File
@@ -87,7 +87,7 @@ exports[`renders empty stories 1`] = `
>
<select
aria-label="Search by status"
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -472,7 +472,7 @@ exports[`renders stories 1`] = `
>
<select
aria-label="Search by status"
className="SelectField-select"
className="SelectField-select SelectField-selectFont SelectField-selectColor"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
src/core/client/auth/components/ConfirmEmailField.tsx
+5 -4
View File
@@ -2,13 +2,14 @@ import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
import { streamColorFromMeta } from "coral-framework/lib/form";
import {
composeValidators,
required,
validateEqualEmails,
} from "coral-framework/lib/validation";
import { FormField, InputLabel, TextField } from "coral-ui/components";
import { FormField, InputLabel, TextField } from "coral-ui/components/v2";
import { ValidationMessage } from "coral-ui/components/v3";
interface Props {
disabled: boolean;
@@ -32,12 +33,12 @@ const ConfirmEmailField: FunctionComponent<Props> = (props) => (
{...input}
id={input.name}
placeholder="Confirm Email Address"
color={colorFromMeta(meta)}
color={streamColorFromMeta(meta)}
disabled={props.disabled}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
<ValidationMessage meta={meta} />
</FormField>
)}
</Field>
src/core/client/auth/components/EmailField.tsx
+5 -4
View File
@@ -2,13 +2,14 @@ import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
import { streamColorFromMeta } from "coral-framework/lib/form";
import {
composeValidators,
required,
validateEmail,
} from "coral-framework/lib/validation";
import { FormField, InputLabel, TextField } from "coral-ui/components";
import { FormField, InputLabel, TextField } from "coral-ui/components/v2";
import { ValidationMessage } from "coral-ui/components/v3";
interface Props {
disabled: boolean;
@@ -30,12 +31,12 @@ const EmailField: FunctionComponent<Props> = (props) => (
id={input.name}
placeholder="Email Address"
type="email"
color={colorFromMeta(meta)}
color={streamColorFromMeta(meta)}
disabled={props.disabled}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
<ValidationMessage meta={meta} />
</FormField>
)}
</Field>
src/core/client/auth/components/Main.tsx
+1
View File
@@ -6,6 +6,7 @@ import styles from "./Main.css";
export interface MainProps {
className?: string;
children: React.ReactNode;
id?: string;
}
const Main: FunctionComponent<MainProps> = ({
src/core/client/auth/components/OrSeparator.css
+14
View File
@@ -0,0 +1,14 @@
.or {
font-family: var(--v2-font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
color: var(--v2-colors-mono-500);
margin-top: var(--v2-spacing-3);
margin-bottom: var(--v2-spacing-3);
text-align: center;
}
src/core/client/auth/components/OrSeparator.tsx
+5 -2
View File
@@ -1,11 +1,14 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import HorizontalSeparator from "./HorizontalSeparator";
import styles from "./OrSeparator.css";
import CLASSES from "coral-stream/classes";
const OrSeparator: FunctionComponent = () => (
<Localized id="general-orSeparator">
<HorizontalSeparator>Or</HorizontalSeparator>
<div className={cn(CLASSES.login.orSeparator, styles.or)}>Or</div>
</Localized>
);
src/core/client/auth/components/SetPasswordField.css
+8
View File
@@ -0,0 +1,8 @@
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-family-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
color: var(--v2-colors-mono-100);
}
src/core/client/auth/components/SetPasswordField.tsx
+9 -11
View File
@@ -2,18 +2,16 @@ import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import { PasswordField } from "coral-framework/components";
import {
colorFromMeta,
parseString,
ValidationMessage,
} from "coral-framework/lib/form";
import { parseString, streamColorFromMeta } from "coral-framework/lib/form";
import {
composeValidators,
required,
validatePassword,
} from "coral-framework/lib/validation";
import { FormField, InputDescription, InputLabel } from "coral-ui/components";
import { FormField, InputLabel, PasswordField } from "coral-ui/components/v2";
import { ValidationMessage } from "coral-ui/components/v3";
import styles from "./SetPasswordField.css";
interface Props {
disabled: boolean;
@@ -31,21 +29,21 @@ const SetPasswordField: FunctionComponent<Props> = (props) => (
<InputLabel htmlFor={input.name}>Password</InputLabel>
</Localized>
<Localized id="general-passwordDescription" $minLength={8}>
<InputDescription>
<div className={styles.description}>
{"Must be at least {$minLength} characters"}
</InputDescription>
</div>
</Localized>
<Localized id="general-passwordTextField" attrs={{ placeholder: true }}>
<PasswordField
{...input}
id={input.name}
placeholder="Password"
color={colorFromMeta(meta)}
color={streamColorFromMeta(meta)}
disabled={props.disabled}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
<ValidationMessage meta={meta} />
</FormField>
)}
</Field>
src/core/client/auth/components/UsernameField.css
+8
View File
@@ -0,0 +1,8 @@
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-family-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
color: var(--v2-colors-mono-100);
}
src/core/client/auth/components/UsernameField.tsx
+8 -10
View File
@@ -2,18 +2,16 @@ import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
import { streamColorFromMeta } from "coral-framework/lib/form";
import {
composeValidators,
required,
validateUsername,
} from "coral-framework/lib/validation";
import {
FormField,
InputDescription,
InputLabel,
TextField,
} from "coral-ui/components";
import { FormField, InputLabel, TextField } from "coral-ui/components/v2";
import { ValidationMessage } from "coral-ui/components/v3";
import styles from "./UsernameField.css";
interface Props {
disabled: boolean;
@@ -30,19 +28,19 @@ const CreateUsernameField: FunctionComponent<Props> = (props) => (
<InputLabel htmlFor={input.name}>Username</InputLabel>
</Localized>
<Localized id="general-usernameDescription">
<InputDescription>You may use “_” and “.”</InputDescription>
<div className={styles.description}>You may use “_” and “.”</div>
</Localized>
<Localized id="general-usernameTextField" attrs={{ placeholder: true }}>
<TextField
{...input}
id={input.name}
placeholder="Username"
color={colorFromMeta(meta)}
color={streamColorFromMeta(meta)}
disabled={props.disabled}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
<ValidationMessage meta={meta} />
</FormField>
)}
</Field>
src/core/client/auth/dom/resizePopup.ts
+4 -1
View File
@@ -2,7 +2,10 @@ function resizePopup() {
const innerHeight = window.document.body.offsetHeight;
try {
window.resizeTo(350, innerHeight + window.outerHeight - window.innerHeight);
window.resizeTo(
350,
innerHeight + window.outerHeight - window.innerHeight + 10
);
} catch {
// Ignore occasional errors in IE11.
}
src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+523 -448
View File
File diff suppressed because it is too large Load Diff
src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+155 -112
View File
@@ -6,28 +6,28 @@ exports[`checks for invalid password 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreatePassword-description"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
</div>
<div
className="coral coral-login-field CreatePassword-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="SetPasswordField-description"
>
Must be at least 8 characters
</p>
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -57,7 +57,7 @@ we require users to create a password.
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
title="Hide password"
>
<i
aria-hidden="true"
@@ -69,23 +69,29 @@ we require users to create a password.
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
className="ValidationMessage-root"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
warning
</i>
<span>
Password must contain at least 8 characters.
</span>
<i
aria-hidden="true"
className="Icon-root Icon-sm ValidationMessage-icon"
>
error
</i>
<span>
Password must contain at least 8 characters.
</span>
</div>
</div>
</div>
</div>
<div
className="CreatePassword-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -94,7 +100,7 @@ we require users to create a password.
onTouchEnd={[Function]}
type="submit"
>
Create Password
Create password
</button>
</div>
</form>
@@ -107,47 +113,47 @@ exports[`renders createPassword view 1`] = `
data-testid="createPassword-container"
>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="coral coral-login-bar CreatePassword-bar"
role="banner"
>
<header>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Password
</h1>
</header>
<div
className="coral coral-login-title CreatePassword-title"
>
Create a password
</div>
</div>
<main
className="Main-root"
data-testid="createPassword-main"
id="create-password-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreatePassword-description"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
</div>
<div
className="coral coral-login-field CreatePassword-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="SetPasswordField-description"
>
Must be at least 8 characters
</p>
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -158,7 +164,7 @@ we require users to create a password.
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
@@ -177,7 +183,7 @@ we require users to create a password.
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
title="Hide password"
>
<i
aria-hidden="true"
@@ -189,10 +195,12 @@ we require users to create a password.
</div>
</div>
</div>
</div>
<div
className="CreatePassword-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -201,7 +209,7 @@ we require users to create a password.
onTouchEnd={[Function]}
type="submit"
>
Create Password
Create password
</button>
</div>
</form>
@@ -217,28 +225,28 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreatePassword-description"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
</div>
<div
className="coral coral-login-field CreatePassword-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="SetPasswordField-description"
>
Must be at least 8 characters
</p>
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -268,7 +276,7 @@ we require users to create a password.
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
title="Hide password"
>
<i
aria-hidden="true"
@@ -280,23 +288,29 @@ we require users to create a password.
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
className="ValidationMessage-root"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
warning
</i>
<span>
This field is required.
</span>
<i
aria-hidden="true"
className="Icon-root Icon-sm ValidationMessage-icon"
>
error
</i>
<span>
This field is required.
</span>
</div>
</div>
</div>
</div>
<div
className="CreatePassword-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -305,7 +319,7 @@ we require users to create a password.
onTouchEnd={[Function]}
type="submit"
>
Create Password
Create password
</button>
</div>
</form>
@@ -317,43 +331,68 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreatePassword-description"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
</div>
<div
className="coral coral-login-errorContainer CreatePassword-error"
>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
className="CallOut-root CallOut-negative CallOut-leftBorder coral coral-login-error"
>
<div
className="CallOut-inner"
className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
>
server error
<div
className="CallOut-icon CallOut-negative CallOut-leftIcon"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
error
</i>
</div>
<div
className="CallOut-content"
>
<div
className="CallOut-title CallOut-titleBold"
>
server error
GraphQL request:4:3
3 | ) {
4 | setPassword(input: $input) {
| ^
5 | user {
</div>
<div
className="CallOut-body"
/>
</div>
</div>
</div>
</div>
<div
className="coral coral-login-field CreatePassword-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="SetPasswordField-description"
>
Must be at least 8 characters
</p>
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -364,7 +403,7 @@ GraphQL request:4:3
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
@@ -383,7 +422,7 @@ GraphQL request:4:3
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
title="Hide password"
>
<i
aria-hidden="true"
@@ -395,10 +434,12 @@ GraphQL request:4:3
</div>
</div>
</div>
</div>
<div
className="CreatePassword-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -407,7 +448,7 @@ GraphQL request:4:3
onTouchEnd={[Function]}
type="submit"
>
Create Password
Create password
</button>
</div>
</form>
@@ -419,28 +460,28 @@ exports[`successfully sets password 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreatePassword-description"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
</div>
<div
className="coral coral-login-field CreatePassword-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="SetPasswordField-description"
>
Must be at least 8 characters
</p>
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
@@ -451,7 +492,7 @@ we require users to create a password.
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
@@ -470,7 +511,7 @@ we require users to create a password.
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
title="Hide password"
>
<i
aria-hidden="true"
@@ -482,10 +523,12 @@ we require users to create a password.
</div>
</div>
</div>
</div>
<div
className="CreatePassword-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -494,7 +537,7 @@ we require users to create a password.
onTouchEnd={[Function]}
type="submit"
>
Create Password
Create password
</button>
</div>
</form>
src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+150 -107
View File
@@ -6,27 +6,27 @@ exports[`checks for invalid username 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreateUsername-description"
>
Your username is an identifier that will appear on all of your comments.
</div>
<div
className="coral coral-login-field CreateUsername-field"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="UsernameField-description"
>
You may use “_” and “.” Spaces not permitted.
</p>
</div>
<div
className="TextField-root TextField-fullWidth"
>
@@ -44,23 +44,29 @@ exports[`checks for invalid username 1`] = `
/>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
className="ValidationMessage-root"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
warning
</i>
<span>
Username must contain at least 3 characters.
</span>
<i
aria-hidden="true"
className="Icon-root Icon-sm ValidationMessage-icon"
>
error
</i>
<span>
Username must contain at least 3 characters.
</span>
</div>
</div>
</div>
</div>
<div
className="CreateUsername-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -69,7 +75,7 @@ exports[`checks for invalid username 1`] = `
onTouchEnd={[Function]}
type="submit"
>
Create Username
Create username
</button>
</div>
</form>
@@ -82,51 +88,51 @@ exports[`renders createUsername view 1`] = `
data-testid="createUsername-container"
>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="coral coral-login-bar CreateUsername-bar"
role="banner"
>
<header>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Username
</h1>
</header>
<div
className="coral coral-login-title CreateUsername-title"
>
Create a username
</div>
</div>
<main
className="Main-root"
data-testid="createUsername-main"
id="create-username-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreateUsername-description"
>
Your username is an identifier that will appear on all of your comments.
</div>
<div
className="coral coral-login-field CreateUsername-field"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="UsernameField-description"
>
You may use “_” and “.” Spaces not permitted.
</p>
</div>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="username"
name="username"
@@ -139,10 +145,12 @@ exports[`renders createUsername view 1`] = `
/>
</div>
</div>
</div>
<div
className="CreateUsername-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -151,7 +159,7 @@ exports[`renders createUsername view 1`] = `
onTouchEnd={[Function]}
type="submit"
>
Create Username
Create username
</button>
</div>
</form>
@@ -167,27 +175,27 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreateUsername-description"
>
Your username is an identifier that will appear on all of your comments.
</div>
<div
className="coral coral-login-field CreateUsername-field"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="UsernameField-description"
>
You may use “_” and “.” Spaces not permitted.
</p>
</div>
<div
className="TextField-root TextField-fullWidth"
>
@@ -205,23 +213,29 @@ exports[`shows error when submitting empty form 1`] = `
/>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
className="ValidationMessage-root"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
warning
</i>
<span>
This field is required.
</span>
<i
aria-hidden="true"
className="Icon-root Icon-sm ValidationMessage-icon"
>
error
</i>
<span>
This field is required.
</span>
</div>
</div>
</div>
</div>
<div
className="CreateUsername-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -230,7 +244,7 @@ exports[`shows error when submitting empty form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
Create Username
Create username
</button>
</div>
</form>
@@ -242,47 +256,72 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreateUsername-description"
>
Your username is an identifier that will appear on all of your comments.
</div>
<div
className="coral coral-login-errorContainer CreateUsername-error"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
className="CallOut-root CallOut-negative CallOut-leftBorder coral coral-login-error"
>
<div
className="CallOut-inner"
className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
>
server error
<div
className="CallOut-icon CallOut-negative CallOut-leftIcon"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
error
</i>
</div>
<div
className="CallOut-content"
>
<div
className="CallOut-title CallOut-titleBold"
>
server error
GraphQL request:4:3
3 | ) {
4 | setUsername(input: $input) {
| ^
5 | user {
</div>
<div
className="CallOut-body"
/>
</div>
</div>
</div>
</div>
<div
className="coral coral-login-field CreateUsername-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="UsernameField-description"
>
You may use “_” and “.” Spaces not permitted.
</p>
</div>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="username"
name="username"
@@ -295,10 +334,12 @@ GraphQL request:4:3
/>
</div>
</div>
</div>
<div
className="CreateUsername-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -307,7 +348,7 @@ GraphQL request:4:3
onTouchEnd={[Function]}
type="submit"
>
Create Username
Create username
</button>
</div>
</form>
@@ -319,32 +360,32 @@ exports[`successfully sets username 1`] = `
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="CreateUsername-description"
>
Your username is an identifier that will appear on all of your comments.
</div>
<div
className="coral coral-login-field CreateUsername-field"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
<div
className="UsernameField-description"
>
You may use “_” and “.” Spaces not permitted.
</p>
</div>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="username"
name="username"
@@ -357,10 +398,12 @@ exports[`successfully sets username 1`] = `
/>
</div>
</div>
</div>
<div
className="CreateUsername-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -369,7 +412,7 @@ exports[`successfully sets username 1`] = `
onTouchEnd={[Function]}
type="submit"
>
Create Username
Create username
</button>
</div>
</form>
src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
+44 -36
View File
@@ -7,80 +7,88 @@ exports[`renders forgot password view 1`] = `
data-testid="forgotPassword-container"
>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="coral coral-login-bar ForgotPasswordForm-bar"
role="banner"
>
<header>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Forgot Password?
</h1>
</header>
<div
className="coral coral-login-title ForgotPasswordForm-title"
>
Forgot password?
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="coral coral-login-subBar ForgotPasswordForm-subBar"
role="region"
>
<nav>
<div
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<a
className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-colorPrimary Button-underline"
disabled={false}
href="http://localhost/?view=SIGN_IN"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_IN"
onClick={[Function]}
>
Go back to sign in page
</a>
</div>
</nav>
Go back to sign in page
</a>
</div>
</div>
<main
className="Main-root"
data-testid="forgotPassword-main"
id="forgot-password-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
className="ForgotPasswordForm-description"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Enter your email address below and we will send you a link to
Enter your email address below and we will send you a link to
reset your password.
</p>
</div>
<div
className="coral coral-login-field ForgotPasswordForm-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="InputLabel-root"
htmlFor="email"
>
Email Address
Email address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
placeholder="Email address"
type="text"
value=""
/>
</div>
</div>
</div>
<div
className="ForgotPasswordForm-actions"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
@@ -89,7 +97,7 @@ reset your password.
onTouchEnd={[Function]}
type="submit"
>
Send Email
Send email
</button>
</div>
</form>
src/core/client/auth/test/__snapshots__/linkAccount.spec.tsx.snap
+84 -95
View File
@@ -7,133 +7,122 @@ exports[`renders link account view 1`] = `
data-testid="linkAccount-container"
>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="coral coral-login-bar LinkAccountContainer-bar"
role="banner"
>
<header>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Link Account
</h1>
</header>
<div
className="coral coral-login-title LinkAccountContainer-title"
>
Link account
</div>
</div>
<main
className="Main-root"
data-testid="linkAccount-main"
id="link-account-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
<form
autoComplete="off"
onSubmit={[Function]}
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="coral coral-login-description LinkAccountContainer-description"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
The email
<span
className="LinkAccountContainer-strong"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
The email
<strong>
my@email.com
</strong>
is
my@email.com
</span>
is
already associated with an account. If you would like to
link these enter your password.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
</div>
<div
className="coral coral-login-field LinkAccountContainer-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
className="PasswordField-wrapper"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-wrapper"
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Hide password"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Hide password"
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</i>
</div>
visibility
</i>
</div>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
data-color="primary"
data-variant="filled"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Link Account
</button>
</div>
</form>
<div
className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<hr
className="HorizontalSeparator-hr"
/>
<div
className="HorizontalSeparator-text"
>
Or
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular Button-variantFilled Button-fullWidth"
data-color="regular"
data-variant="filled"
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Use a different email address
Link account
</button>
</form>
<div
className="coral coral-login-orSeparator OrSeparator-or"
>
Or
</div>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorSecondary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Use a different email address
</button>
</main>
</div>
</div>
src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+390 -342
View File
@@ -5,219 +5,238 @@ exports[`auth configuration renders all auth enabled 1`] = `
className="Main-root"
data-testid="signIn-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
<form
autoComplete="off"
onSubmit={[Function]}
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="coral coral-login-field SignInWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
<label
className="InputLabel-root"
htmlFor="email"
>
Email address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email address"
type="email"
value=""
/>
</div>
</div>
</div>
<div
className="coral coral-login-field SignInWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
className="PasswordField-wrapper"
>
<input
className="TextField-input TextField-colorRegular"
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="email"
name="email"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Hide password"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</i>
</div>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
className="coral coral-login-signInWithEmail-forgotPassword SignInWithEmail-forgotPassword"
>
<div
className="PasswordField-wrapper"
<a
className="BaseButton-root Button-base Button-flat Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-colorPrimary Button-underline"
disabled={false}
href="http://localhost/?view=FORGOT_PASSWORD"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</i>
</div>
</div>
</div>
<div
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
href="http://localhost/?view=FORGOT_PASSWORD"
onClick={[Function]}
>
Forgot your password?
</a>
</p>
Forgot your password?
</a>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
data-color="brand"
data-variant="filled"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
</div>
</div>
<div
className="SignInWithEmail-actions"
>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
className="Icon-root Icon-md SignInWithEmail-icon"
>
email
</i>
<span>
Sign in with Email
</span>
</button>
</div>
</form>
<div
className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<hr
className="HorizontalSeparator-hr"
/>
<div
className="HorizontalSeparator-text"
>
Or
</div>
</div>
</button>
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
</form>
<div
className="coral coral-login-orSeparator OrSeparator-or"
>
Or
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-facebookButton FacebookButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
<div
className="FacebookButton-icon"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
</div>
<span>
Sign in with Facebook
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
</div>
</button>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-googleButton GoogleButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="18"
viewBox="0 0 18 18"
width="18"
xmlns="http://www.w3.org/2000/svg"
<div
className="GoogleButton-icon"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="14"
viewBox="0 0 18 18"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
</div>
<span>
Sign in with Google
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled Button-fullWidth"
data-color="regular"
data-variant="filled"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Sign in with OIDC
</span>
</button>
</div>
</div>
</button>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-oidcButton OIDCButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Sign in with OIDC
</span>
</button>
</div>
</main>
`;
@@ -228,68 +247,78 @@ exports[`auth configuration renders only some social login enabled 1`] = `
data-testid="signIn-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-facebookButton FacebookButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
<div
className="FacebookButton-icon"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
</div>
<span>
Sign in with Facebook
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
</div>
</button>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-googleButton GoogleButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="18"
viewBox="0 0 18 18"
width="18"
xmlns="http://www.w3.org/2000/svg"
<div
className="GoogleButton-icon"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="14"
viewBox="0 0 18 18"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
</div>
<span>
Sign in with Google
</span>
</button>
</div>
</div>
</button>
</div>
</main>
`;
@@ -301,174 +330,193 @@ exports[`renders sign in view 1`] = `
data-testid="signIn-container"
>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
role="banner"
>
<header>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
<div
className="coral coral-login-bar SignIn-bar"
>
<div
className="coral coral-login-title SignIn-title"
>
Sign In
</h1>
<h1
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
Sign in
</div>
<div
className="coral coral-login-header SignIn-header"
>
to join the conversation
</h1>
</header>
</div>
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="coral coral-login-subBar SignIn-subBar"
role="contentinfo"
>
<nav>
<div
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
<div
className="coral coral-login-signIn-noAccount SignIn-noAccount"
>
Don't have an account?
<a
className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilySecondary Button-fontWeightSecondarySemiBold Button-colorPrimary Button-underline SignIn-signUp"
disabled={false}
href="http://localhost/?view=SIGN_UP"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Don't have an account? 
</span>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_UP"
onClick={[Function]}
>
Sign Up
</a>
</div>
</nav>
Sign up
</a>
</div>
</div>
<main
className="Main-root"
data-testid="signIn-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
<form
autoComplete="off"
onSubmit={[Function]}
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="coral coral-login-field SignInWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
<label
className="InputLabel-root"
htmlFor="email"
>
Email address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email address"
type="email"
value=""
/>
</div>
</div>
</div>
<div
className="coral coral-login-field SignInWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
className="PasswordField-wrapper"
>
<input
className="TextField-input TextField-colorRegular"
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="email"
name="email"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Hide password"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</i>
</div>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
className="coral coral-login-signInWithEmail-forgotPassword SignInWithEmail-forgotPassword"
>
<div
className="PasswordField-wrapper"
<a
className="BaseButton-root Button-base Button-flat Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-colorPrimary Button-underline"
disabled={false}
href="http://localhost/?view=FORGOT_PASSWORD"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</i>
</div>
</div>
</div>
<div
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
href="http://localhost/?view=FORGOT_PASSWORD"
onClick={[Function]}
>
Forgot your password?
</a>
</p>
Forgot your password?
</a>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
data-color="brand"
data-variant="filled"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
</div>
</div>
<div
className="SignInWithEmail-actions"
>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
className="Icon-root Icon-md SignInWithEmail-icon"
>
email
</i>
<span>
Sign in with Email
</span>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</main>
</div>
</div>
src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+432 -390
View File
@@ -5,240 +5,256 @@ exports[`auth configuration renders all auth enabled 1`] = `
className="Main-root"
data-testid="signUp-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
<form
autoComplete="off"
onSubmit={[Function]}
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="SignUpWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
<label
className="InputLabel-root"
htmlFor="email"
>
Email address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email address"
type="email"
value=""
/>
</div>
</div>
</div>
<div
className="SignUpWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="InputLabel-root"
htmlFor="username"
>
Username
</label>
<div
className="UsernameField-description"
>
You may use “_” and “.” Spaces not permitted.
</div>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
</div>
<div
className="SignUpWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="SetPasswordField-description"
>
Must be at least 8 characters
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
className="PasswordField-wrapper"
>
<input
className="TextField-input TextField-colorRegular"
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="email"
name="email"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<div
className="PasswordField-wrapper"
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Hide password"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</i>
</div>
visibility
</i>
</div>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
data-color="brand"
data-variant="filled"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
</div>
</div>
<div
className="SignUpWithEmail-actions"
>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
className="Icon-root Icon-md SignUpWithEmail-icon"
>
email
</i>
<span>
Sign up with Email
</span>
</button>
</div>
</form>
<div
className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<hr
className="HorizontalSeparator-hr"
/>
<div
className="HorizontalSeparator-text"
>
Or
</div>
</div>
</button>
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
</form>
<div
className="coral coral-login-orSeparator OrSeparator-or"
>
Or
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-facebookButton FacebookButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
<div
className="FacebookButton-icon"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
</div>
<span>
Sign up with Facebook
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
</div>
</button>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-googleButton GoogleButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="18"
viewBox="0 0 18 18"
width="18"
xmlns="http://www.w3.org/2000/svg"
<div
className="GoogleButton-icon"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="14"
viewBox="0 0 18 18"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
</div>
<span>
Sign up with Google
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled Button-fullWidth"
data-color="regular"
data-variant="filled"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Sign up with OIDC
</span>
</button>
</div>
</div>
</button>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-oidcButton OIDCButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Sign up with OIDC
</span>
</button>
</div>
</main>
`;
@@ -249,68 +265,78 @@ exports[`auth configuration renders only some social login enabled 1`] = `
data-testid="signUp-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-facebookButton FacebookButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
<div
className="FacebookButton-icon"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
</div>
<span>
Sign up with Facebook
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
</div>
</button>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-upperCase Button-fullWidth coral coral-login-googleButton GoogleButton-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<svg
fill="none"
height="18"
viewBox="0 0 18 18"
width="18"
xmlns="http://www.w3.org/2000/svg"
<div
className="GoogleButton-icon"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
<svg
fill="none"
height="14"
viewBox="0 0 18 18"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
</div>
<span>
Sign up with Google
</span>
</button>
</div>
</div>
</button>
</div>
</main>
`;
@@ -322,195 +348,211 @@ exports[`renders sign up form 1`] = `
data-testid="signUp-container"
>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
role="banner"
>
<header>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
<div
className="coral coral-login-bar SignUp-bar"
>
<div
className="coral coral-login-title SignUp-title"
>
Sign Up
</h1>
<h1
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
Sign up
</div>
<div
className="coral coral-login-header SignUp-header"
>
to join the conversation
</h1>
</header>
</div>
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="coral coral-login-subBar SignUp-subBar"
role="contentinfo"
>
<nav>
<div
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
<div
className="coral coral-login-signUp-alreadyHaveAccount SignUp-alreadyHaveAccount"
>
Already have an account?
<a
className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilySecondary Button-fontWeightSecondarySemiBold Button-colorPrimary Button-underline SignUp-signIn"
disabled={false}
href="http://localhost/?view=SIGN_IN"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Already have an account? 
</span>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_IN"
onClick={[Function]}
>
Sign In
</a>
</div>
</nav>
Sign in
</a>
</div>
</div>
<main
className="Main-root"
data-testid="signUp-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
<form
autoComplete="off"
onSubmit={[Function]}
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="SignUpWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
<label
className="InputLabel-root"
htmlFor="email"
>
Email address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email address"
type="email"
value=""
/>
</div>
</div>
</div>
<div
className="SignUpWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="InputLabel-root"
htmlFor="username"
>
Username
</label>
<div
className="UsernameField-description"
>
You may use “_” and “.” Spaces not permitted.
</div>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorStreamBlue"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
</div>
<div
className="SignUpWithEmail-field"
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
>
<label
className="InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="SetPasswordField-description"
>
Must be at least 8 characters
</div>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
className="PasswordField-wrapper"
>
<input
className="TextField-input TextField-colorRegular"
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="email"
name="email"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<div
className="PasswordField-wrapper"
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Hide password"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Show password"
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</i>
</div>
visibility
</i>
</div>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
data-color="brand"
data-variant="filled"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
</div>
</div>
<div
className="SignUpWithEmail-actions"
>
<button
className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorPrimary Button-upperCase Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
className="Icon-root Icon-md SignUpWithEmail-icon"
>
email
</i>
<span>
Sign up with Email
</span>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</main>
</div>
</div>
src/core/client/auth/test/addEmailAddress.spec.tsx
+2 -2
View File
@@ -46,9 +46,9 @@ async function createTestRenderer(
);
const main = within(testRenderer.root).getByTestID(/.*-main/);
const form = within(main).getByType("form");
const emailAddressField = within(form).getByLabelText("Email Address");
const emailAddressField = within(form).getByLabelText("Email address");
const confirmEmailAddressField = within(form).getByLabelText(
"Confirm Email Address"
"Confirm email address"
);
return {
src/core/client/auth/test/forgotPassword.spec.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ async function createTestRenderer(
);
const main = within(testRenderer.root).getByTestID(/.*-main/);
const form = within(main).queryByType("form")!;
const emailField = within(form).getByLabelText("Email Address");
const emailField = within(form).getByLabelText("Email address");
return {
context,
src/core/client/auth/test/navigation.spec.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ it("navigates to sign up form", async () => {
const container = await waitForElement(() =>
within(testRenderer.root).getByTestID("signIn-container")
);
act(() => within(container).getByText("Sign Up").props.onClick({}));
act(() => within(container).getByText("Sign up").props.onClick({}));
await waitForElement(() =>
within(testRenderer.root).getByTestID("signUp-container")
);
@@ -48,7 +48,7 @@ it("navigates to sign in form", async () => {
const container = await waitForElement(() =>
within(testRenderer.root).getByTestID("signUp-container")
);
act(() => within(container).getByText("Sign In").props.onClick({}));
act(() => within(container).getByText("Sign in").props.onClick({}));
await waitForElement(() =>
within(testRenderer.root).getByTestID("signIn-container")
);
src/core/client/auth/test/signIn.spec.tsx
+6 -6
View File
@@ -66,10 +66,10 @@ it("renders sign in view with error", async () => {
const { testRenderer, container } = await createTestRenderer({}, error);
within(container).getByText(error);
act(() => {
within(testRenderer.root).getByText("Sign Up").props.onClick({});
within(testRenderer.root).getByText("Sign up").props.onClick({});
});
act(() => {
within(testRenderer.root).getByText("Sign In").props.onClick({});
within(testRenderer.root).getByText("Sign in").props.onClick({});
});
const container2 = await waitForElement(() =>
within(testRenderer.root).getByTestID("signIn-container")
@@ -90,7 +90,7 @@ it("shows error when submitting empty form", async () => {
it("checks for invalid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "invalid-email" } });
});
@@ -105,7 +105,7 @@ it("checks for invalid email", async () => {
it("accepts valid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "hans@test.com" } });
});
@@ -122,7 +122,7 @@ it("accepts valid email", async () => {
it("shows server error", async () => {
const { form, main, context } = await createTestRenderer();
const { getByLabelText } = within(form!);
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
(i) => i.type === "button" && i.props.type === "submit"
@@ -167,7 +167,7 @@ it("submits form successfully", async () => {
const { form, context } = await createTestRenderer();
const { getByLabelText } = within(form!);
const accessToken = createAccessToken();
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
(i) => i.type === "button" && i.props.type === "submit"
src/core/client/auth/test/signUp.spec.tsx
+4 -4
View File
@@ -67,7 +67,7 @@ it("shows error when submitting empty form", async () => {
it("checks for invalid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "invalid-email" } });
});
@@ -82,7 +82,7 @@ it("checks for invalid email", async () => {
it("accepts valid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "hans@test.com" } });
});
@@ -196,7 +196,7 @@ it("accepts correct password", async () => {
it("shows server error", async () => {
const { context, main, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
const usernameField = getByLabelText("Username");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
@@ -246,7 +246,7 @@ it("submits form successfully", async () => {
const { context, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
const accessToken = createAccessToken();
const emailAddressField = getByLabelText("Email Address");
const emailAddressField = getByLabelText("Email address");
const usernameField = getByLabelText("Username");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css
+58
View File
@@ -0,0 +1,58 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.header {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-4);
line-height: var(--v2-line-height-6);
color: var(--v2-colors-pure-white);
}
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-4);
}
.error {
margin-bottom: var(--v2-spacing-4);
}
.strong {
display: inline;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
}
.field {
margin-bottom: var(--v2-spacing-3);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
+62 -52
View File
@@ -1,9 +1,9 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import { FORM_ERROR } from "final-form";
import React, { FunctionComponent, useCallback } from "react";
import { Form } from "react-final-form";
import { Bar, Title } from "coral-auth/components//Header";
import ConfirmEmailField from "coral-auth/components/ConfirmEmailField";
import EmailField from "coral-auth/components/EmailField";
import Main from "coral-auth/components/Main";
@@ -15,17 +15,15 @@ import {
import { InvalidRequestError } from "coral-framework/lib/errors";
import { FormError, OnSubmit } from "coral-framework/lib/form";
import { useMutation } from "coral-framework/lib/relay";
import {
Button,
CallOut,
HorizontalGutter,
Icon,
Typography,
} from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import { Icon } from "coral-ui/components/v2";
import { Button, CallOut } from "coral-ui/components/v3";
import SetEmailMutation from "./SetEmailMutation";
import { ListItem, UnorderedList } from "./UnorderedList";
import styles from "./AddEmailAddress.css";
interface FormProps {
email: string;
}
@@ -59,60 +57,72 @@ const AddEmailAddressContainer: FunctionComponent = () => {
return (
<div ref={ref} data-testid="addEmailAddress-container">
<Bar>
<div role="banner" className={cn(CLASSES.login.bar, styles.bar)}>
<Localized id="addEmailAddress-addEmailAddressHeader">
<Title>Add Email Address</Title>
<div className={cn(CLASSES.login.title, styles.title)}>
Add Email Address
</div>
</Localized>
</Bar>
<Main data-testid="addEmailAddress-main">
</div>
<Main id="add-email-main" data-testid="addEmailAddress-main">
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="oneAndAHalf">
<Localized id="addEmailAddress-whatItIs">
<Typography variant="bodyCopy">
For your added security, we require users to add an email
address to their accounts. Your email address will be used
to:
</Typography>
</Localized>
<UnorderedList>
<ListItem icon={<Icon>done</Icon>}>
<Localized id="addEmailAddress-receiveUpdates">
<Typography container="div">
Receive updates regarding any changes to your account
(email address, username, password, etc.)
</Typography>
</Localized>
</ListItem>
<ListItem icon={<Icon>done</Icon>}>
<Localized id="addEmailAddress-allowDownload">
<Typography container="div">
Allow you to download your comments.
</Typography>
</Localized>
</ListItem>
<ListItem icon={<Icon>done</Icon>}>
<Localized id="addEmailAddress-sendNotifications">
<Typography container="div">
Send comment notifications that you have chosen to
receive.
</Typography>
</Localized>
</ListItem>
</UnorderedList>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
<Localized id="addEmailAddress-whatItIs">
<div className={styles.description}>
For your added security, we require users to add an email
address to their accounts. Your email address will be used to:
</div>
</Localized>
<UnorderedList>
<ListItem icon={<Icon>done</Icon>}>
<Localized id="addEmailAddress-receiveUpdates">
<div className={styles.description}>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
</div>
</Localized>
</ListItem>
<ListItem icon={<Icon>done</Icon>}>
<Localized id="addEmailAddress-allowDownload">
<div className={styles.description}>
Allow you to download your comments.
</div>
</Localized>
</ListItem>
<ListItem icon={<Icon>done</Icon>}>
<Localized id="addEmailAddress-sendNotifications">
<div className={styles.description}>
Send comment notifications that you have chosen to
receive.
</div>
</Localized>
</ListItem>
</UnorderedList>
{submitError && (
<div className={cn(CLASSES.login.errorContainer, styles.error)}>
<CallOut
className={CLASSES.login.error}
color="negative"
icon={<Icon size="sm">error</Icon>}
title={submitError}
/>
</div>
)}
<div className={cn(CLASSES.login.field, styles.field)}>
<EmailField disabled={submitting} />
</div>
<div className={cn(CLASSES.login.field, styles.field)}>
<ConfirmEmailField disabled={submitting} />
</div>
<div className={styles.actions}>
<Localized id="addEmailAddress-addEmailAddressButton">
<Button
variant="filled"
color="primary"
size="large"
fontSize="medium"
paddingSize="medium"
upperCase
type="submit"
fullWidth
disabled={submitting}
@@ -120,7 +130,7 @@ const AddEmailAddressContainer: FunctionComponent = () => {
Add Email Address
</Button>
</Localized>
</HorizontalGutter>
</div>
</form>
)}
</Form>
src/core/client/auth/views/CreatePassword/CreatePassword.css
+38
View File
@@ -0,0 +1,38 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-4);
}
.error {
margin-bottom: var(--v2-spacing-4);
}
.field {
margin-bottom: var(--v2-spacing-3);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/CreatePassword/CreatePassword.tsx
+36 -26
View File
@@ -1,23 +1,22 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import { FORM_ERROR } from "final-form";
import React, { FunctionComponent, useCallback } from "react";
import { Form } from "react-final-form";
import { Bar, Title } from "coral-auth/components//Header";
import Main from "coral-auth/components/Main";
import SetPasswordField from "coral-auth/components/SetPasswordField";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { FormError, OnSubmit } from "coral-framework/lib/form";
import { useMutation } from "coral-framework/lib/relay";
import {
Button,
CallOut,
HorizontalGutter,
Typography,
} from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import { Icon } from "coral-ui/components/v2";
import { Button, CallOut } from "coral-ui/components/v3";
import SetPasswordMutation from "./SetPasswordMutation";
import styles from "./CreatePassword.css";
interface FormProps {
password: string;
}
@@ -41,33 +40,44 @@ const CreatePasswordContainer: FunctionComponent = () => {
return (
<div ref={ref} data-testid="createPassword-container">
<Bar>
<Localized id="createPassword-createPasswordHeader">
<Title>Create Password</Title>
<div role="banner" className={cn(CLASSES.login.bar, styles.bar)}>
<Localized id="createPassword-createAPassword">
<div className={cn(CLASSES.login.title, styles.title)}>
Create a password
</div>
</Localized>
</Bar>
<Main data-testid="createPassword-main">
</div>
<Main id="create-password-main" data-testid="createPassword-main">
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="oneAndAHalf">
<Localized id="createPassword-whatItIs">
<Typography variant="bodyCopy">
To protect against unauthorized changes to your account, we
require users to create a password.
</Typography>
</Localized>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
<Localized id="createPassword-whatItIs">
<div className={styles.description}>
To protect against unauthorized changes to your account, we
require users to create a password.
</div>
</Localized>
{submitError && (
<div className={cn(CLASSES.login.errorContainer, styles.error)}>
<CallOut
className={CLASSES.login.error}
color="negative"
icon={<Icon size="sm">error</Icon>}
title={submitError}
/>
</div>
)}
<div className={cn(CLASSES.login.field, styles.field)}>
<SetPasswordField disabled={submitting} />
</div>
<div className={styles.actions}>
<Localized id="createPassword-createPasswordButton">
<Button
variant="filled"
color="primary"
size="large"
fontSize="medium"
paddingSize="medium"
upperCase
type="submit"
fullWidth
disabled={submitting}
@@ -75,7 +85,7 @@ const CreatePasswordContainer: FunctionComponent = () => {
Create Password
</Button>
</Localized>
</HorizontalGutter>
</div>
</form>
)}
</Form>
src/core/client/auth/views/CreateUsername/CreateUsername.css
+38
View File
@@ -0,0 +1,38 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-4);
}
.error {
margin-bottom: var(--v2-spacing-4);
}
.field {
margin-bottom: var(--v2-spacing-3);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/CreateUsername/CreateUsername.tsx
+36 -26
View File
@@ -1,23 +1,22 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import { FORM_ERROR } from "final-form";
import React, { FunctionComponent, useCallback } from "react";
import { Form } from "react-final-form";
import { Bar, Title } from "coral-auth/components//Header";
import Main from "coral-auth/components/Main";
import UsernameField from "coral-auth/components/UsernameField";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { FormError, OnSubmit } from "coral-framework/lib/form";
import { useMutation } from "coral-framework/lib/relay";
import {
Button,
CallOut,
HorizontalGutter,
Typography,
} from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import { Icon } from "coral-ui/components/v2";
import { Button, CallOut } from "coral-ui/components/v3";
import SetUsernameMutation from "./SetUsernameMutation";
import styles from "./CreateUsername.css";
interface FormProps {
username: string;
}
@@ -41,33 +40,44 @@ const CreateUsernameContainer: FunctionComponent = () => {
return (
<div ref={ref} data-testid="createUsername-container">
<Bar>
<Localized id="createUsername-createUsernameHeader">
<Title>Create Username</Title>
<div role="banner" className={cn(CLASSES.login.bar, styles.bar)}>
<Localized id="createUsername-createAUsername">
<div className={cn(CLASSES.login.title, styles.title)}>
Create a username
</div>
</Localized>
</Bar>
<Main data-testid="createUsername-main">
</div>
<Main id="create-username-main" data-testid="createUsername-main">
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="oneAndAHalf">
<Localized id="createUsername-whatItIs">
<Typography variant="bodyCopy">
Your username is an identifier that will appear on all of
your comments.
</Typography>
</Localized>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
<Localized id="createUsername-whatItIs">
<div className={styles.description}>
Your username is an identifier that will appear on all of your
comments.
</div>
</Localized>
{submitError && (
<div className={cn(CLASSES.login.errorContainer, styles.error)}>
<CallOut
className={CLASSES.login.error}
color="negative"
icon={<Icon size="sm">error</Icon>}
title={submitError}
/>
</div>
)}
<div className={cn(CLASSES.login.field, styles.field)}>
<UsernameField disabled={submitting} />
</div>
<div className={styles.actions}>
<Localized id="createUsername-createUsernameButton">
<Button
variant="filled"
color="primary"
size="large"
fontSize="medium"
paddingSize="medium"
upperCase
type="submit"
fullWidth
disabled={submitting}
@@ -75,7 +85,7 @@ const CreateUsernameContainer: FunctionComponent = () => {
Create Username
</Button>
</Localized>
</HorizontalGutter>
</div>
</form>
)}
</Form>
src/core/client/auth/views/ForgotPassword/CheckEmail.css
+50
View File
@@ -0,0 +1,50 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.header {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-4);
line-height: var(--v2-line-height-6);
color: var(--v2-colors-pure-white);
}
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-4);
}
.strong {
display: inline;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/ForgotPassword/CheckEmail.tsx
+22 -19
View File
@@ -1,10 +1,11 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent, useCallback } from "react";
import { Bar, Title } from "coral-auth/components/Header";
import Main from "coral-auth/components/Main";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { Button, HorizontalGutter, Typography } from "coral-ui/components";
import { Button } from "coral-ui/components/v3";
import styles from "./CheckEmail.css";
interface Props {
email: string;
@@ -15,31 +16,33 @@ const CheckEmail: FunctionComponent<Props> = ({ email }) => {
const closeWindow = useCallback(() => {
window.close();
}, []);
const UserEmail = () => <strong>{email}</strong>;
const UserEmail = () => <span className={styles.strong}>{email}</span>;
return (
<div ref={ref} data-testid="forgotPassword-checkEmail-container">
<Bar>
<div className={styles.bar}>
<Localized id="forgotPassword-checkEmail-checkEmailHeader">
<Title>Check Your Email</Title>
<div className={styles.title}>Check Your Email</div>
</Localized>
</Bar>
</div>
<Main data-testid="forgotPassword-checkEmail-main">
<HorizontalGutter size="full">
<Localized
id="forgotPassword-checkEmail-receiveEmail"
email={<UserEmail />}
>
<Typography variant="bodyCopy">
{
"If there is an account associated with <email></email>, you will receive an email with a link to create a new password."
}
</Typography>
</Localized>
<Localized
id="forgotPassword-checkEmail-receiveEmail"
email={<UserEmail />}
>
<div className={styles.description}>
{
"If there is an account associated with <email></email>, you will receive an email with a link to create a new password."
}
</div>
</Localized>
<div className={styles.actions}>
<Localized id="forgotPassword-checkEmail-closeButton">
<Button
variant="filled"
color="primary"
size="large"
fontSize="medium"
paddingSize="medium"
upperCase
fullWidth
type="submit"
onClick={closeWindow}
@@ -47,7 +50,7 @@ const CheckEmail: FunctionComponent<Props> = ({ email }) => {
Close
</Button>
</Localized>
</HorizontalGutter>
</div>
</Main>
</div>
);
src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.css
+54
View File
@@ -0,0 +1,54 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.header {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-4);
line-height: var(--v2-line-height-6);
color: var(--v2-colors-pure-white);
}
.subBar {
background-color: var(--v2-colors-grey-100);
padding: var(--v2-spacing-3);
text-align: center;
}
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-4);
}
.error {
margin-bottom: var(--v2-spacing-4);
}
.field {
margin-bottom: var(--v2-spacing-3);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx
+58 -37
View File
@@ -1,35 +1,35 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import { FORM_ERROR } from "final-form";
import React, { FunctionComponent, useCallback } from "react";
import { Field, Form } from "react-final-form";
import { Bar, SubBar, Title } from "coral-auth/components/Header";
import Main from "coral-auth/components/Main";
import { getViewURL } from "coral-auth/helpers";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { SetViewMutation } from "coral-auth/mutations";
import { InvalidRequestError } from "coral-framework/lib/errors";
import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
import { streamColorFromMeta } from "coral-framework/lib/form";
import { useMutation } from "coral-framework/lib/relay";
import {
composeValidators,
required,
validateEmail,
} from "coral-framework/lib/validation";
import CLASSES from "coral-stream/classes";
import {
Button,
CallOut,
Flex,
FormField,
HorizontalGutter,
Icon,
InputLabel,
TextField,
TextLink,
Typography,
} from "coral-ui/components";
} from "coral-ui/components/v2";
import { Button, CallOut, ValidationMessage } from "coral-ui/components/v3";
import ForgotPasswordMutation from "./ForgotPasswordMutation";
import styles from "./ForgotPasswordForm.css";
interface FormProps {
email: string;
}
@@ -74,39 +74,56 @@ const ForgotPasswordForm: FunctionComponent<Props> = ({
return (
<div ref={ref} data-testid="forgotPassword-container">
<Bar>
<div role="banner" className={cn(CLASSES.login.bar, styles.bar)}>
<Localized id="forgotPassword-forgotPasswordHeader">
<Title>Forgot Password?</Title>
<div className={cn(CLASSES.login.title, styles.title)}>
Forgot password?
</div>
</Localized>
</Bar>
</div>
{/* If an email address has been provided, then they are already logged in. */}
{!email && (
<SubBar>
<Typography variant="bodyCopy" container={Flex}>
<Localized id="forgotPassword-gotBackToSignIn">
<TextLink href={signInHref} onClick={onGotoSignIn}>
<div role="region" className={cn(CLASSES.login.subBar, styles.subBar)}>
<Flex alignItems="center" justifyContent="center">
<Button
color="primary"
variant="flat"
fontFamily="primary"
fontWeight="semiBold"
fontSize="small"
paddingSize="none"
underline
href={signInHref}
onClick={onGotoSignIn}
>
<Localized id="forgotPassword-gotBackToSignIn">
Go back to sign in page
</TextLink>
</Localized>
</Typography>
</SubBar>
</Localized>
</Button>
</Flex>
</div>
)}
<Main data-testid="forgotPassword-main">
<Main id="forgot-password-main" data-testid="forgotPassword-main">
<Form onSubmit={onSubmit} initialValues={{ email: email ? email : "" }}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="full">
<Localized id="forgotPassword-enterEmailAndGetALink">
<Typography variant="bodyCopy">
Enter your email address below and we will send you a link
to reset your password.
</Typography>
</Localized>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
<Localized id="forgotPassword-enterEmailAndGetALink">
<div className={styles.description}>
Enter your email address below and we will send you a link to
reset your password.
</div>
</Localized>
{submitError && (
<div className={cn(CLASSES.login.errorContainer, styles.error)}>
<CallOut
className={CLASSES.login.error}
color="negative"
icon={<Icon size="sm">error</Icon>}
title={submitError}
/>
</div>
)}
<div className={cn(CLASSES.login.field, styles.field)}>
<Field
name="email"
validate={composeValidators(required, validateEmail)}
@@ -126,28 +143,32 @@ const ForgotPasswordForm: FunctionComponent<Props> = ({
{...input}
id={input.name}
placeholder="Email Address"
color={colorFromMeta(meta)}
color={streamColorFromMeta(meta)}
disabled={submitting}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
<ValidationMessage meta={meta} />
</FormField>
)}
</Field>
</div>
<div className={styles.actions}>
<Localized id="forgotPassword-sendEmailButton">
<Button
variant="filled"
color="primary"
size="large"
fontSize="medium"
paddingSize="medium"
upperCase
fullWidth
type="submit"
disabled={submitting}
>
Send Email
Send email
</Button>
</Localized>
</HorizontalGutter>
</div>
</form>
)}
</Form>
src/core/client/auth/views/LinkAccount/LinkAccountContainer.css
+58
View File
@@ -0,0 +1,58 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.header {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-4);
line-height: var(--v2-line-height-6);
color: var(--v2-colors-pure-white);
}
.description {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
margin-bottom: var(--v2-spacing-4);
}
.error {
margin-bottom: var(--v2-spacing-4);
}
.strong {
display: inline;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
color: var(--v2-colors-mono-500);
}
.field {
margin-bottom: var(--v2-spacing-3);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/LinkAccount/LinkAccountContainer.tsx
+96 -84
View File
@@ -1,19 +1,18 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import { FORM_ERROR } from "final-form";
import React, { FunctionComponent, useCallback } from "react";
import { Field, Form } from "react-final-form";
import { graphql } from "react-relay";
import { Bar, Title } from "coral-auth/components//Header";
import Main from "coral-auth/components/Main";
import OrSeparator from "coral-auth/components/OrSeparator";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { SetViewMutation } from "coral-auth/mutations";
import {
colorFromMeta,
FormError,
OnSubmit,
ValidationMessage,
streamColorFromMeta,
} from "coral-framework/lib/form";
import {
useLocal,
@@ -21,21 +20,22 @@ import {
withFragmentContainer,
} from "coral-framework/lib/relay";
import { required } from "coral-framework/lib/validation";
import CLASSES from "coral-stream/classes";
import {
Button,
CallOut,
FormField,
HorizontalGutter,
Icon,
InputLabel,
PasswordField,
Typography,
} from "coral-ui/components";
} from "coral-ui/components/v2";
import { Button, CallOut, ValidationMessage } from "coral-ui/components/v3";
import { LinkAccountContainer_viewer } from "coral-auth/__generated__/LinkAccountContainer_viewer.graphql";
import { LinkAccountContainerLocal } from "coral-auth/__generated__/LinkAccountContainerLocal.graphql";
import LinkAccountMutation from "./LinkAccountMutation";
import styles from "./LinkAccountContainer.css";
interface FormProps {
password: string;
}
@@ -81,85 +81,97 @@ const LinkAccountContainer: FunctionComponent<Props> = (props) => {
return (
<div ref={ref} data-testid="linkAccount-container">
<Bar>
<div role="banner" className={cn(CLASSES.login.bar, styles.bar)}>
<Localized id="linkAccount-linkAccountHeader">
<Title>Link Account</Title>
<div className={cn(CLASSES.login.title, styles.title)}>
Link Account
</div>
</Localized>
</Bar>
<Main data-testid="linkAccount-main">
<HorizontalGutter spacing={3}>
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="oneAndAHalf">
<Localized
id="linkAccount-alreadyAssociated"
$email={duplicateEmail}
strong={<strong />}
>
<Typography variant="bodyCopy">
The email <strong>{duplicateEmail}</strong> is already
associated with an account. If you would like to link
these enter your password.
</Typography>
</Localized>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
</div>
<Main id="link-account-main" data-testid="linkAccount-main">
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<Localized
id="linkAccount-alreadyAssociated"
$email={duplicateEmail}
strong={<span className={styles.strong} />}
>
<div
className={cn(CLASSES.login.description, styles.description)}
>
The email <strong>{duplicateEmail}</strong> is already
associated with an account. If you would like to link these
enter your password.
</div>
</Localized>
{submitError && (
<div className={cn(CLASSES.login.errorContainer, styles.error)}>
<CallOut
className={CLASSES.login.error}
color="negative"
icon={<Icon size="sm">error</Icon>}
title={submitError}
/>
</div>
)}
<div className={cn(CLASSES.login.field, styles.field)}>
<Field name="password" validate={required}>
{({ input, meta }) => (
<FormField>
<Localized id="linkAccount-passwordLabel">
<InputLabel htmlFor={input.name}>Password</InputLabel>
</Localized>
<Localized
id="linkAccount-passwordTextField"
attrs={{ placeholder: true }}
>
<PasswordField
{...input}
id={input.name}
placeholder="Password"
color={streamColorFromMeta(meta)}
disabled={submitting}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} />
</FormField>
)}
<Field name="password" validate={required}>
{({ input, meta }) => (
<FormField>
<Localized id="linkAccount-passwordLabel">
<InputLabel htmlFor={input.name}>Password</InputLabel>
</Localized>
<Localized
id="linkAccount-passwordTextField"
attrs={{ placeholder: true }}
>
<PasswordField
{...input}
id={input.name}
placeholder="Password"
color={colorFromMeta(meta)}
disabled={submitting}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
</FormField>
)}
</Field>
<Localized id="linkAccount-linkAccountButton">
<Button
variant="filled"
color="primary"
size="large"
type="submit"
fullWidth
disabled={submitting}
>
Link Account
</Button>
</Localized>
</HorizontalGutter>
</form>
)}
</Form>
<OrSeparator />
<Localized id="linkAccount-useDifferentEmail">
<Button
variant="filled"
size="large"
type="submit"
fullWidth
onClick={changeEmail}
>
Use a different email address
</Button>
</Localized>
</HorizontalGutter>
</Field>
</div>
<Localized id="linkAccount-linkAccountButton">
<Button
variant="filled"
color="primary"
fontSize="medium"
paddingSize="medium"
upperCase
type="submit"
fullWidth
disabled={submitting}
>
Link Account
</Button>
</Localized>
</form>
)}
</Form>
<OrSeparator />
<Localized id="linkAccount-useDifferentEmail">
<Button
variant="filled"
color="secondary"
fontSize="medium"
paddingSize="medium"
upperCase
type="submit"
fullWidth
onClick={changeEmail}
>
Use a different email address
</Button>
</Localized>
</Main>
</div>
);
src/core/client/auth/views/SignIn/SignIn.css
+49
View File
@@ -0,0 +1,49 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.header {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-4);
line-height: var(--v2-line-height-6);
color: var(--v2-colors-pure-white);
}
.subBar {
background-color: var(--v2-colors-grey-100);
padding: var(--v2-spacing-3);
text-align: center;
}
.noAccount {
display: flex;
justify-content: center;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
color: var(--v2-colors-mono-500);
}
.signUp {
margin-top: 1px;
margin-left: var(--v2-spacing-1);
}
src/core/client/auth/views/SignIn/SignIn.tsx
+72 -39
View File
@@ -1,24 +1,22 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { Bar, SubBar, Subtitle, Title } from "coral-auth/components/Header";
import Main from "coral-auth/components/Main";
import OrSeparator from "coral-auth/components/OrSeparator";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { PropTypesOf } from "coral-framework/types";
import {
CallOut,
Flex,
HorizontalGutter,
TextLink,
Typography,
} from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import { HorizontalGutter } from "coral-ui/components/v2";
import { Button, CallOut } from "coral-ui/components/v3";
import SignInWithEmailContainer from "./SignInWithEmailContainer";
import SignInWithFacebookContainer from "./SignInWithFacebookContainer";
import SignInWithGoogleContainer from "./SignInWithGoogleContainer";
import SignInWithOIDCContainer from "./SignInWithOIDCContainer";
import styles from "./SignIn.css";
export interface SignInForm {
error: string | null;
onGotoSignUp: React.EventHandler<React.MouseEvent>;
@@ -47,45 +45,80 @@ const SignIn: FunctionComponent<SignInForm> = ({
facebookEnabled || googleEnabled || oidcEnabled;
return (
<div ref={ref} data-testid="signIn-container">
<Localized
id="signIn-signInToJoinHeader"
title={<Title />}
subtitle={<Subtitle />}
>
<Bar>
<Title>Sign In</Title>
<Subtitle>to join the conversation</Subtitle>
</Bar>
</Localized>
<div role="banner">
<Localized
id="signIn-signInToJoinHeader"
title={<div className={cn(CLASSES.login.title, styles.title)} />}
subtitle={<div className={cn(CLASSES.login.header, styles.header)} />}
>
<div className={cn(CLASSES.login.bar, styles.bar)}>
<div className={cn(CLASSES.login.title, styles.title)}>Sign In</div>
<div className={cn(CLASSES.login.header, styles.header)}>
to join the conversation
</div>
</div>
</Localized>
</div>
{emailEnabled && (
<SubBar>
<div
role="contentinfo"
className={cn(CLASSES.login.subBar, styles.subBar)}
>
<Localized
id="signIn-noAccountSignUp"
textlink={<TextLink onClick={onGotoSignUp} href={signUpHref} />}
textlink={
<Button
color="primary"
variant="flat"
paddingSize="none"
fontSize="small"
fontFamily="secondary"
fontWeight="semiBold"
underline
onClick={onGotoSignUp}
href={signUpHref}
className={styles.signUp}
/>
}
>
<Typography variant="bodyCopy" container={Flex}>
Don't have an account?{" "}
<TextLink onClick={onGotoSignUp} href={signUpHref}>
<div
className={cn(CLASSES.login.signIn.noAccount, styles.noAccount)}
>
Don't have an account?
<Button
color="primary"
variant="flat"
paddingSize="none"
fontSize="small"
fontFamily="secondary"
fontWeight="bold"
underline
onClick={onGotoSignUp}
href={signUpHref}
className={styles.signUp}
>
Sign Up
</TextLink>
</Typography>
</Button>
</div>
</Localized>
</SubBar>
</div>
)}
<Main data-testid="signIn-main">
<HorizontalGutter size="oneAndAHalf">
{error && (
<CallOut color="error" fullWidth>
{error}
</CallOut>
)}
{emailEnabled && <SignInWithEmailContainer />}
{emailEnabled && oneClickIntegrationEnabled && <OrSeparator />}
<HorizontalGutter>
{facebookEnabled && <SignInWithFacebookContainer auth={auth} />}
{googleEnabled && <SignInWithGoogleContainer auth={auth} />}
{oidcEnabled && <SignInWithOIDCContainer auth={auth} />}
</HorizontalGutter>
{error && (
<div className={CLASSES.login.errorContainer}>
<CallOut
className={CLASSES.login.error}
color="negative"
title={error}
/>
</div>
)}
{emailEnabled && <SignInWithEmailContainer />}
{emailEnabled && oneClickIntegrationEnabled && <OrSeparator />}
<HorizontalGutter>
{facebookEnabled && <SignInWithFacebookContainer auth={auth} />}
{googleEnabled && <SignInWithGoogleContainer auth={auth} />}
{oidcEnabled && <SignInWithOIDCContainer auth={auth} />}
</HorizontalGutter>
</Main>
</div>
src/core/client/auth/views/SignIn/SignInWithEmail.css
+20
View File
@@ -0,0 +1,20 @@
.icon {
margin-right: var(--v2-spacing-2);
}
.forgotPassword {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-family-primary-semi-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
color: var(--v2-colors-stream-blue-500);
}
.field {
margin-bottom: var(--v2-spacing-3);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/SignIn/SignInWithEmail.tsx
+56 -35
View File
@@ -1,27 +1,26 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { Field, Form } from "react-final-form";
import EmailField from "coral-auth/components/EmailField";
import { PasswordField } from "coral-framework/components";
import {
colorFromMeta,
FormError,
OnSubmit,
ValidationMessage,
streamColorFromMeta,
} from "coral-framework/lib/form";
import { composeValidators, required } from "coral-framework/lib/validation";
import CLASSES from "coral-stream/classes";
import {
Button,
ButtonIcon,
CallOut,
Flex,
FormField,
HorizontalGutter,
Icon,
InputLabel,
TextLink,
Typography,
} from "coral-ui/components";
PasswordField,
} from "coral-ui/components/v2";
import { Button, CallOut, ValidationMessage } from "coral-ui/components/v3";
import styles from "./SignInWithEmail.css";
interface FormProps {
email: string;
@@ -41,14 +40,17 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = (props) => {
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="full">
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
{submitError && (
<CallOut
className={CLASSES.login.error}
color="negative"
title={submitError}
/>
)}
<div className={cn(CLASSES.login.field, styles.field)}>
<EmailField disabled={submitting} />
</div>
<div className={cn(CLASSES.login.field, styles.field)}>
<Field name="password" validate={composeValidators(required)}>
{({ input, meta }) => (
<FormField>
@@ -63,41 +65,60 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = (props) => {
{...input}
id={input.name}
placeholder="Password"
color={colorFromMeta(meta)}
color={streamColorFromMeta(meta)}
disabled={submitting}
fullWidth
/>
</Localized>
<ValidationMessage meta={meta} fullWidth />
<ValidationMessage meta={meta} />
<Flex justifyContent="flex-end">
<Typography variant="bodyCopy">
<Localized id="signIn-forgotYourPassword">
<TextLink
onClick={props.onGotoForgotPassword}
href={props.forgotPasswordHref}
>
<div
className={cn(
CLASSES.login.signInWithEmail.forgotPassword,
styles.forgotPassword
)}
>
<Button
variant="flat"
color="primary"
fontSize="none"
fontWeight="semiBold"
paddingSize="none"
onClick={props.onGotoForgotPassword}
href={props.forgotPasswordHref}
underline
>
<Localized id="signIn-forgotYourPassword">
Forgot your password?
</TextLink>
</Localized>
</Typography>
</Localized>
</Button>
</div>
</Flex>
</FormField>
)}
</Field>
</div>
<div className={styles.actions}>
<Button
variant="filled"
color="brand"
size="large"
color="primary"
fontSize="small"
paddingSize="small"
type="submit"
disabled={submitting}
fullWidth
upperCase
>
<ButtonIcon size="md">email</ButtonIcon>
<Localized id="signIn-signInWithEmail">
<span>Sign in with Email</span>
</Localized>
<Flex alignItems="center" justifyContent="center">
<Icon size="md" className={styles.icon}>
email
</Icon>
<Localized id="signIn-signInWithEmail">
<span>Sign in with Email</span>
</Localized>
</Flex>
</Button>
</HorizontalGutter>
</div>
</form>
)}
</Form>
src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap
+198 -129
View File
@@ -4,69 +4,95 @@ exports[`renders correctly 1`] = `
<div
data-testid="signIn-container"
>
<Localized
id="signIn-signInToJoinHeader"
subtitle={<Subtitle />}
title={<Title />}
<div
role="banner"
>
<Bar>
<Title>
Sign In
</Title>
<Subtitle>
to join the conversation
</Subtitle>
</Bar>
</Localized>
<SubBar>
<Localized
id="signIn-noAccountSignUp"
textlink={
<withPropsOnChange(TextLinkProps)
href="/signUp"
onClick={[Function]}
id="signIn-signInToJoinHeader"
subtitle={
<div
className="coral coral-login-header SignIn-header"
/>
}
title={
<div
className="coral coral-login-title SignIn-title"
/>
}
>
<ForwardRef(forwardRef)
container={
Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
}
}
variant="bodyCopy"
<div
className="coral coral-login-bar SignIn-bar"
>
Don't have an account?
<withPropsOnChange(TextLinkProps)
<div
className="coral coral-login-title SignIn-title"
>
Sign In
</div>
<div
className="coral coral-login-header SignIn-header"
>
to join the conversation
</div>
</div>
</Localized>
</div>
<div
className="coral coral-login-subBar SignIn-subBar"
role="contentinfo"
>
<Localized
id="signIn-noAccountSignUp"
textlink={
<withPropsOnChange(Button)
className="SignIn-signUp"
color="primary"
fontFamily="secondary"
fontSize="small"
fontWeight="semiBold"
href="/signUp"
onClick={[Function]}
paddingSize="none"
underline={true}
variant="flat"
/>
}
>
<div
className="coral coral-login-signIn-noAccount SignIn-noAccount"
>
Don't have an account?
<withPropsOnChange(Button)
className="SignIn-signUp"
color="primary"
fontFamily="secondary"
fontSize="small"
fontWeight="bold"
href="/signUp"
onClick={[Function]}
paddingSize="none"
underline={true}
variant="flat"
>
Sign Up
</withPropsOnChange(TextLinkProps)>
</ForwardRef(forwardRef)>
</withPropsOnChange(Button)>
</div>
</Localized>
</SubBar>
</div>
<Main
data-testid="signIn-main"
>
<ForwardRef(forwardRef)
size="oneAndAHalf"
>
<SignInContainer />
<OrSeparator />
<ForwardRef(forwardRef)>
<Relay(SignInWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignInWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignInWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
<SignInContainer />
<OrSeparator />
<ForwardRef(forwardRef)>
<Relay(SignInWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignInWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignInWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
</Main>
</div>
@@ -76,75 +102,104 @@ exports[`renders error 1`] = `
<div
data-testid="signIn-container"
>
<Localized
id="signIn-signInToJoinHeader"
subtitle={<Subtitle />}
title={<Title />}
<div
role="banner"
>
<Bar>
<Title>
Sign In
</Title>
<Subtitle>
to join the conversation
</Subtitle>
</Bar>
</Localized>
<SubBar>
<Localized
id="signIn-noAccountSignUp"
textlink={
<withPropsOnChange(TextLinkProps)
href="/signUp"
onClick={[Function]}
id="signIn-signInToJoinHeader"
subtitle={
<div
className="coral coral-login-header SignIn-header"
/>
}
title={
<div
className="coral coral-login-title SignIn-title"
/>
}
>
<ForwardRef(forwardRef)
container={
Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
}
}
variant="bodyCopy"
<div
className="coral coral-login-bar SignIn-bar"
>
Don't have an account?
<withPropsOnChange(TextLinkProps)
<div
className="coral coral-login-title SignIn-title"
>
Sign In
</div>
<div
className="coral coral-login-header SignIn-header"
>
to join the conversation
</div>
</div>
</Localized>
</div>
<div
className="coral coral-login-subBar SignIn-subBar"
role="contentinfo"
>
<Localized
id="signIn-noAccountSignUp"
textlink={
<withPropsOnChange(Button)
className="SignIn-signUp"
color="primary"
fontFamily="secondary"
fontSize="small"
fontWeight="semiBold"
href="/signUp"
onClick={[Function]}
paddingSize="none"
underline={true}
variant="flat"
/>
}
>
<div
className="coral coral-login-signIn-noAccount SignIn-noAccount"
>
Don't have an account?
<withPropsOnChange(Button)
className="SignIn-signUp"
color="primary"
fontFamily="secondary"
fontSize="small"
fontWeight="bold"
href="/signUp"
onClick={[Function]}
paddingSize="none"
underline={true}
variant="flat"
>
Sign Up
</withPropsOnChange(TextLinkProps)>
</ForwardRef(forwardRef)>
</withPropsOnChange(Button)>
</div>
</Localized>
</SubBar>
</div>
<Main
data-testid="signIn-main"
>
<ForwardRef(forwardRef)
size="oneAndAHalf"
<div
className="coral coral-login-errorContainer"
>
<withPropsOnChange(CallOut)
color="error"
fullWidth={true}
>
Server Error
</withPropsOnChange(CallOut)>
<SignInContainer />
<OrSeparator />
<ForwardRef(forwardRef)>
<Relay(SignInWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignInWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignInWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
className="coral coral-login-error"
color="negative"
title="Server Error"
/>
</div>
<SignInContainer />
<OrSeparator />
<ForwardRef(forwardRef)>
<Relay(SignInWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignInWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignInWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
</Main>
</div>
@@ -154,37 +209,51 @@ exports[`renders without email login 1`] = `
<div
data-testid="signIn-container"
>
<Localized
id="signIn-signInToJoinHeader"
subtitle={<Subtitle />}
title={<Title />}
<div
role="banner"
>
<Bar>
<Title>
Sign In
</Title>
<Subtitle>
to join the conversation
</Subtitle>
</Bar>
</Localized>
<Localized
id="signIn-signInToJoinHeader"
subtitle={
<div
className="coral coral-login-header SignIn-header"
/>
}
title={
<div
className="coral coral-login-title SignIn-title"
/>
}
>
<div
className="coral coral-login-bar SignIn-bar"
>
<div
className="coral coral-login-title SignIn-title"
>
Sign In
</div>
<div
className="coral coral-login-header SignIn-header"
>
to join the conversation
</div>
</div>
</Localized>
</div>
<Main
data-testid="signIn-main"
>
<ForwardRef(forwardRef)
size="oneAndAHalf"
>
<ForwardRef(forwardRef)>
<Relay(SignInWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignInWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignInWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
<ForwardRef(forwardRef)>
<Relay(SignInWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignInWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignInWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
</Main>
</div>
src/core/client/auth/views/SignUp/SignUp.css
+49
View File
@@ -0,0 +1,49 @@
.bar {
background-color: var(--v2-colors-grey-600);
padding: var(--v2-spacing-4);
text-align: center;
}
.title {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-9);
color: var(--v2-colors-pure-white);
}
.header {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-4);
line-height: var(--v2-line-height-6);
color: var(--v2-colors-pure-white);
}
.subBar {
background-color: var(--v2-colors-grey-100);
padding: var(--v2-spacing-3);
text-align: center;
}
.alreadyHaveAccount {
display: flex;
justify-content: center;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
color: var(--v2-colors-mono-500);
}
.signIn {
margin-top: 1px;
margin-left: var(--v2-spacing-1);
}
src/core/client/auth/views/SignUp/SignUp.tsx
+65 -32
View File
@@ -1,23 +1,22 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { Bar, SubBar, Subtitle, Title } from "coral-auth/components//Header";
import Main from "coral-auth/components/Main";
import OrSeparator from "coral-auth/components/OrSeparator";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { PropTypesOf } from "coral-framework/types";
import {
Flex,
HorizontalGutter,
TextLink,
Typography,
} from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import { HorizontalGutter } from "coral-ui/components/v2";
import { Button } from "coral-ui/components/v3";
import SignUpWithEmailContainer from "./SignUpWithEmailContainer";
import SignUpWithFacebookContainer from "./SignUpWithFacebookContainer";
import SignUpWithGoogleContainer from "./SignUpWithGoogleContainer";
import SignUpWithOIDCContainer from "./SignUpWithOIDCContainer";
import styles from "./SignUp.css";
interface Props {
onGotoSignIn: React.EventHandler<React.MouseEvent>;
signInHref: string;
@@ -44,40 +43,74 @@ const SignUp: FunctionComponent<Props> = ({
facebookEnabled || googleEnabled || oidcEnabled;
return (
<div ref={ref} data-testid="signUp-container">
<Localized
id="signUp-signUpToJoinHeader"
title={<Title />}
subtitle={<Subtitle />}
>
<Bar>
<Title>Sign Up</Title>
<Subtitle>to join the conversation</Subtitle>
</Bar>
</Localized>
<div role="banner">
<Localized
id="signUp-signUpToJoinHeader"
title={<div className={cn(CLASSES.login.title, styles.title)} />}
subtitle={<div className={cn(CLASSES.login.header, styles.header)} />}
>
<div className={cn(CLASSES.login.bar, styles.bar)}>
<div className={cn(CLASSES.login.title, styles.title)}>Sign Up</div>
<div className={cn(CLASSES.login.header, styles.header)}>
to join the conversation
</div>
</div>
</Localized>
</div>
{emailEnabled && (
<SubBar>
<div
role="contentinfo"
className={cn(CLASSES.login.subBar, styles.subBar)}
>
<Localized
id="signUp-accountAvailableSignIn"
textlink={<TextLink onClick={onGotoSignIn} href={signInHref} />}
textlink={
<Button
color="primary"
variant="flat"
paddingSize="none"
fontSize="small"
fontFamily="secondary"
fontWeight="semiBold"
underline
onClick={onGotoSignIn}
href={signInHref}
className={styles.signIn}
/>
}
>
<Typography variant="bodyCopy" container={Flex}>
<div
className={cn(
CLASSES.login.signUp.alreadyHaveAccount,
styles.alreadyHaveAccount
)}
>
Already have an account?{" "}
<TextLink onClick={onGotoSignIn} href={signInHref}>
<Button
color="primary"
variant="flat"
paddingSize="none"
fontSize="small"
fontFamily="secondary"
fontWeight="bold"
underline
onClick={onGotoSignIn}
href={signInHref}
className={styles.signIn}
>
Sign In
</TextLink>
</Typography>
</Button>
</div>
</Localized>
</SubBar>
</div>
)}
<Main data-testid="signUp-main">
<HorizontalGutter size="oneAndAHalf">
{emailEnabled && <SignUpWithEmailContainer />}
{emailEnabled && oneClickUptegrationEnabled && <OrSeparator />}
<HorizontalGutter>
{facebookEnabled && <SignUpWithFacebookContainer auth={auth} />}
{googleEnabled && <SignUpWithGoogleContainer auth={auth} />}
{oidcEnabled && <SignUpWithOIDCContainer auth={auth} />}
</HorizontalGutter>
{emailEnabled && <SignUpWithEmailContainer />}
{emailEnabled && oneClickUptegrationEnabled && <OrSeparator />}
<HorizontalGutter>
{facebookEnabled && <SignUpWithFacebookContainer auth={auth} />}
{googleEnabled && <SignUpWithGoogleContainer auth={auth} />}
{oidcEnabled && <SignUpWithOIDCContainer auth={auth} />}
</HorizontalGutter>
</Main>
</div>
src/core/client/auth/views/SignUp/SignUpWithEmail.css
+11
View File
@@ -0,0 +1,11 @@
.icon {
margin-right: var(--v2-spacing-2);
}
.field {
margin-bottom: var(--v2-spacing-3);
}
.actions {
padding-top: var(--v2-spacing-2);
}
src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
+25 -19
View File
@@ -6,12 +6,10 @@ import EmailField from "coral-auth/components/EmailField";
import SetPasswordField from "coral-auth/components/SetPasswordField";
import UsernameField from "coral-auth/components/UsernameField";
import { FormError, OnSubmit } from "coral-framework/lib/form";
import {
Button,
ButtonIcon,
CallOut,
HorizontalGutter,
} from "coral-ui/components";
import { Flex, Icon } from "coral-ui/components/v2";
import { Button, CallOut } from "coral-ui/components/v3";
import styles from "./SignUpWithEmail.css";
interface FormProps {
email: string;
@@ -31,29 +29,37 @@ const SignUp: FunctionComponent<Props> = (props) => {
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="full">
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
{submitError && <CallOut color="negative" title={submitError} />}
<div className={styles.field}>
<EmailField disabled={submitting} />
</div>
<div className={styles.field}>
<UsernameField disabled={submitting} />
</div>
<div className={styles.field}>
<SetPasswordField disabled={submitting} />
</div>
<div className={styles.actions}>
<Button
variant="filled"
color="brand"
size="large"
color="primary"
fontSize="small"
paddingSize="small"
type="submit"
disabled={submitting}
fullWidth
upperCase
>
<ButtonIcon size="md">email</ButtonIcon>
<Localized id="signUp-signUpWithEmail">
<span>Sign up with Email</span>
</Localized>
<Flex alignItems="center" justifyContent="center">
<Icon size="md" className={styles.icon}>
email
</Icon>
<Localized id="signUp-signUpWithEmail">
<span>Sign up with Email</span>
</Localized>
</Flex>
</Button>
</HorizontalGutter>
</div>
</form>
)}
</Form>
src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap
+115 -74
View File
@@ -4,69 +4,96 @@ exports[`renders correctly 1`] = `
<div
data-testid="signUp-container"
>
<Localized
id="signUp-signUpToJoinHeader"
subtitle={<Subtitle />}
title={<Title />}
<div
role="banner"
>
<Bar>
<Title>
Sign Up
</Title>
<Subtitle>
to join the conversation
</Subtitle>
</Bar>
</Localized>
<SubBar>
<Localized
id="signUp-accountAvailableSignIn"
textlink={
<withPropsOnChange(TextLinkProps)
href="/signIn"
onClick={[Function]}
id="signUp-signUpToJoinHeader"
subtitle={
<div
className="coral coral-login-header SignUp-header"
/>
}
title={
<div
className="coral coral-login-title SignUp-title"
/>
}
>
<ForwardRef(forwardRef)
container={
Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
}
}
variant="bodyCopy"
<div
className="coral coral-login-bar SignUp-bar"
>
<div
className="coral coral-login-title SignUp-title"
>
Sign Up
</div>
<div
className="coral coral-login-header SignUp-header"
>
to join the conversation
</div>
</div>
</Localized>
</div>
<div
className="coral coral-login-subBar SignUp-subBar"
role="contentinfo"
>
<Localized
id="signUp-accountAvailableSignIn"
textlink={
<withPropsOnChange(Button)
className="SignUp-signIn"
color="primary"
fontFamily="secondary"
fontSize="small"
fontWeight="semiBold"
href="/signIn"
onClick={[Function]}
paddingSize="none"
underline={true}
variant="flat"
/>
}
>
<div
className="coral coral-login-signUp-alreadyHaveAccount SignUp-alreadyHaveAccount"
>
Already have an account?
<withPropsOnChange(TextLinkProps)
<withPropsOnChange(Button)
className="SignUp-signIn"
color="primary"
fontFamily="secondary"
fontSize="small"
fontWeight="bold"
href="/signIn"
onClick={[Function]}
paddingSize="none"
underline={true}
variant="flat"
>
Sign In
</withPropsOnChange(TextLinkProps)>
</ForwardRef(forwardRef)>
</withPropsOnChange(Button)>
</div>
</Localized>
</SubBar>
</div>
<Main
data-testid="signUp-main"
>
<ForwardRef(forwardRef)
size="oneAndAHalf"
>
<withContext(createMutationContainer(SignUpContainer)) />
<OrSeparator />
<ForwardRef(forwardRef)>
<Relay(SignUpWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignUpWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignUpWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
<withContext(createMutationContainer(SignUpContainer)) />
<OrSeparator />
<ForwardRef(forwardRef)>
<Relay(SignUpWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignUpWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignUpWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
</Main>
</div>
@@ -76,37 +103,51 @@ exports[`renders without email sign up 1`] = `
<div
data-testid="signUp-container"
>
<Localized
id="signUp-signUpToJoinHeader"
subtitle={<Subtitle />}
title={<Title />}
<div
role="banner"
>
<Bar>
<Title>
Sign Up
</Title>
<Subtitle>
to join the conversation
</Subtitle>
</Bar>
</Localized>
<Localized
id="signUp-signUpToJoinHeader"
subtitle={
<div
className="coral coral-login-header SignUp-header"
/>
}
title={
<div
className="coral coral-login-title SignUp-title"
/>
}
>
<div
className="coral coral-login-bar SignUp-bar"
>
<div
className="coral coral-login-title SignUp-title"
>
Sign Up
</div>
<div
className="coral coral-login-header SignUp-header"
>
to join the conversation
</div>
</div>
</Localized>
</div>
<Main
data-testid="signUp-main"
>
<ForwardRef(forwardRef)
size="oneAndAHalf"
>
<ForwardRef(forwardRef)>
<Relay(SignUpWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignUpWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignUpWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
<ForwardRef(forwardRef)>
<Relay(SignUpWithFacebookContainer)
auth={Object {}}
/>
<Relay(SignUpWithGoogleContainer)
auth={Object {}}
/>
<Relay(SignUpWithOIDCContainer)
auth={Object {}}
/>
</ForwardRef(forwardRef)>
</Main>
</div>
src/core/client/framework/components/CopyButton.tsx
+61 -43
View File
@@ -1,5 +1,11 @@
import { Localized } from "@fluent/react/compat";
import React from "react";
import React, {
FunctionComponent,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
import CopyToClipboard from "react-copy-to-clipboard";
import { Button } from "coral-ui/components/v2";
@@ -7,56 +13,68 @@ import { PropTypesOf } from "coral-ui/types";
interface Props extends Omit<PropTypesOf<typeof Button>, "ref"> {
text: string;
inner?: React.ReactNode;
innerCopied?: React.ReactNode;
}
interface State {
copied: boolean;
}
const CopyButton: FunctionComponent<Props> = ({
text,
color,
size,
inner,
innerCopied,
...rest
}) => {
let timeout: any = null;
const [copied, setCopied] = useState(false);
class CopyButton extends React.Component<Props> {
private timeout: any = null;
// clear time out when we de-scope
useEffect(() => {
return function cleanup() {
clearTimeout(timeout);
};
}, [timeout]);
public state: State = {
copied: false,
};
const timeoutCallback = useCallback(() => {
setCopied(false);
}, [setCopied]);
public componentWillUnmount() {
clearTimeout(this.timeout);
}
const handleCopy = useCallback(() => {
setCopied(true);
clearTimeout(timeout);
timeout = setTimeout(timeoutCallback, 500);
}, [timeout, setCopied]);
private handleCopy = () => {
this.setCopied(true);
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.setCopied(false);
}, 500);
};
const copyBody = useMemo(() => {
if (inner) {
return inner;
}
private setCopied = (b: boolean) => {
this.setState({
copied: b,
});
};
public render() {
const { text, color, size, ...rest } = this.props;
const { copied } = this.state;
return (
<CopyToClipboard text={text} onCopy={this.handleCopy}>
<Button color={color || "mono"} variant="flat" {...rest}>
{copied ? (
<Localized id="framework-copyButton-copied">
<span>Copied!</span>
</Localized>
) : (
<Localized id="framework-copyButton-copy">
<span>Copy</span>
</Localized>
)}
</Button>
</CopyToClipboard>
<Localized id="framework-copyButton-copy">
<span>Copy</span>
</Localized>
);
}
}
}, [inner]);
const copiedBody = useMemo(() => {
if (innerCopied) {
return innerCopied;
}
return (
<Localized id="framework-copyButton-copied">
<span>Copied!</span>
</Localized>
);
}, [innerCopied]);
return (
<CopyToClipboard text={text} onCopy={handleCopy}>
<Button color={color || "mono"} variant="flat" {...rest}>
{copied ? copiedBody : copyBody}
</Button>
</CopyToClipboard>
);
};
export default CopyButton;
src/core/client/framework/components/FacebookButton.css
+31 -12
View File
@@ -1,14 +1,33 @@
.variantRegular {
&:not(.disabled) {
&.colorRegular {
background-color: #3b5998;
&.mouseHover {
background-color: #4467b0;
}
&:active,
&.active {
background-color: #6583c3;
}
}
.icon {
margin-right: var(--v2-spacing-2);
height: 1rem;
overflow: hidden;
}
.button {
border-style: solid;
border-width: 1px;
color: var(--v2-colors-pure-white);
&:not(.disabled),
&:not(:disabled) {
background-color: #3B5998;
border-color: #3B5998;
}
&:hover, &.mouseHover {
background-color: #4467b0;
border-color: #4467b0;
}
&:active, &.active {
background-color: #6583c3;
border-color: #6583c3;
}
&.disabled {
color: var(--v2-colors-grey-400);
background-color: var(--v2-colors-grey-200);
border-color: var(--v2-colors-grey-200);
}
}
src/core/client/framework/components/FacebookButton.tsx
+15 -6
View File
@@ -1,13 +1,17 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button } from "coral-ui/components/v2";
import CLASSES from "coral-stream/classes";
import { Flex } from "coral-ui/components/v2";
import { Button } from "coral-ui/components/v3";
import styles from "./FacebookButton.css";
interface Props {
onClick: PropTypesOf<typeof Button>["onClick"];
children: React.ReactNode;
className?: string;
}
const facebookIcon = (
@@ -27,14 +31,19 @@ const facebookIcon = (
const FacebookButton: FunctionComponent<Props> = (props) => (
<Button
classes={styles}
variant="regular"
size="large"
className={cn(CLASSES.login.facebookButton, styles.button)}
variant="filled"
color="none"
fontSize="small"
paddingSize="small"
upperCase
fullWidth
onClick={props.onClick}
>
{facebookIcon}
<span>{props.children}</span>
<Flex alignItems="center" justifyContent="center">
<div className={styles.icon}>{facebookIcon}</div>
<span>{props.children}</span>
</Flex>
</Button>
);
src/core/client/framework/components/GoogleButton.css
+32 -12
View File
@@ -1,14 +1,34 @@
.variantRegular {
&:not(.disabled) {
&.colorRegular {
background-color: #db4437;
&.mouseHover {
background-color: #e05f54;
}
&:active,
&.active {
background-color: #e57a71;
}
}
.icon {
margin-right: var(--v2-spacing-2);
height: 1rem;
overflow: hidden;
}
.button {
border-style: solid;
border-width: 1px;
color: var(--v2-colors-pure-white);
&:not(.disabled),
&:not(:disabled) {
background-color: #db4437;
border-color: #db4437;
}
&:hover, &.mouseHover {
background-color: #e05f54;
border-color: #e05f54;
}
&:active, &.active {
background-color: #e57a71;
border-color: #e57a71;
}
&.disabled {
color: var(--v2-colors-grey-400);
background-color: var(--v2-colors-grey-200);
border-color: var(--v2-colors-grey-200);
}
}
src/core/client/framework/components/GoogleButton.tsx
+16 -8
View File
@@ -1,7 +1,10 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button } from "coral-ui/components/v2";
import CLASSES from "coral-stream/classes";
import { Flex } from "coral-ui/components/v2";
import { Button } from "coral-ui/components/v3";
import styles from "./GoogleButton.css";
@@ -12,8 +15,8 @@ interface Props {
const googleIcon = (
<svg
width="18"
height="18"
width="14"
height="14"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -27,14 +30,19 @@ const googleIcon = (
const GoogleButton: FunctionComponent<Props> = (props) => (
<Button
classes={styles}
variant="regular"
size="large"
className={cn(CLASSES.login.googleButton, styles.button)}
variant="filled"
color="none"
fontSize="small"
paddingSize="small"
upperCase
fullWidth
onClick={props.onClick}
>
{googleIcon}
<span>{props.children}</span>
<Flex alignItems="center" justifyContent="center">
<div className={styles.icon}>{googleIcon}</div>
<span>{props.children}</span>
</Flex>
</Button>
);
src/core/client/framework/components/Markdown.css
+10 -3
View File
@@ -1,8 +1,14 @@
.root {
@mixin bodyCopy;
font-size: var(--v2-font-size-3);
font-weight: var(--v2-font-weight-primary-regular);
font-family: var(--v2-font-family-primary);
line-height: 1.375rem;
color: var(--v2-colors-mono-500);
b,
strong {
font-weight: var(--font-weight-medium);
font-weight: var(--v2-font-weight-primary-bold);
}
h1 {
@mixin heading1;
@@ -19,6 +25,7 @@
h5 {
@mixin heading5;
}
*:first-child {
margin-top: 0;
}
@@ -30,7 +37,7 @@
padding: var(--mini-unit);
margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
var(--mini-unit);
border-radius: var(--round-corners);
border-radius: var(--v2-round-corners);
&::after {
content: none;
}
src/core/client/framework/components/OIDCButton.css
+24 -12
View File
@@ -1,14 +1,26 @@
.variantRegular {
&:not(.disabled) {
&.colorRegular {
background-color: #0d5b8f;
&.mouseHover {
background-color: #106fae;
}
&:active,
&.active {
background-color: #1383cd;
}
}
.button {
border-style: solid;
border-width: 1px;
color: var(--v2-colors-pure-white);
&:not(.disabled),
&:not(:disabled) {
background-color: var(--v2-colors-grey-500);
border-color: var(--v2-colors-grey-500);
}
&:hover, &.mouseHover {
background-color: var(--v2-colors-grey-400);
border-color: var(--v2-colors-grey-400);
}
&:active, &.active {
background-color: var(--v2-colors-grey-300);
border-color: var(--v2-colors-grey-300);
}
&.disabled {
color: var(--v2-colors-grey-400);
background-color: var(--v2-colors-grey-200);
border-color: var(--v2-colors-grey-200);
}
}
src/core/client/framework/components/OIDCButton.tsx
+9 -3
View File
@@ -1,7 +1,9 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button } from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import { Button } from "coral-ui/components/v3";
import styles from "./OIDCButton.css";
@@ -12,10 +14,14 @@ interface Props {
const OIDCButton: FunctionComponent<Props> = (props) => (
<Button
classes={styles}
className={cn(CLASSES.login.oidcButton, styles.button)}
variant="filled"
size="large"
color="none"
fontSize="small"
paddingSize="small"
upperCase
fullWidth
textAlign="center"
onClick={props.onClick}
>
<span>{props.children}</span>
src/core/client/framework/components/__snapshots__/FacebookButton.spec.tsx.snap
+31 -27
View File
@@ -1,35 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
classes={
Object {
"active": "FacebookButton-active",
"colorRegular": "FacebookButton-colorRegular",
"disabled)": "FacebookButton-disabled)",
"mouseHover": "FacebookButton-mouseHover",
"variantRegular": "FacebookButton-variantRegular",
}
}
<withPropsOnChange(Button)
className="coral coral-login-facebookButton FacebookButton-button"
color="none"
fontSize="small"
fullWidth={true}
onClick={[Function]}
size="large"
variant="regular"
paddingSize="small"
upperCase={true}
variant="filled"
>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
<ForwardRef(forwardRef)
alignItems="center"
justifyContent="center"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
<span>
Login with Facebook
</span>
</ForwardRef(forwardRef)>
<div
className="FacebookButton-icon"
>
<svg
fill="none"
height="17"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
fill="white"
/>
</svg>
</div>
<span>
Login with Facebook
</span>
</ForwardRef(forwardRef)>
</withPropsOnChange(Button)>
`;
src/core/client/framework/components/__snapshots__/GoogleButton.spec.tsx.snap
+31 -27
View File
@@ -1,35 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
classes={
Object {
"active": "GoogleButton-active",
"colorRegular": "GoogleButton-colorRegular",
"disabled)": "GoogleButton-disabled)",
"mouseHover": "GoogleButton-mouseHover",
"variantRegular": "GoogleButton-variantRegular",
}
}
<withPropsOnChange(Button)
className="coral coral-login-googleButton GoogleButton-button"
color="none"
fontSize="small"
fullWidth={true}
onClick={[Function]}
size="large"
variant="regular"
paddingSize="small"
upperCase={true}
variant="filled"
>
<svg
fill="none"
height="18"
viewBox="0 0 18 18"
width="18"
xmlns="http://www.w3.org/2000/svg"
<ForwardRef(forwardRef)
alignItems="center"
justifyContent="center"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
<span>
Login with Google
</span>
</ForwardRef(forwardRef)>
<div
className="GoogleButton-icon"
>
<svg
fill="none"
height="14"
viewBox="0 0 18 18"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
fill="white"
/>
</svg>
</div>
<span>
Login with Google
</span>
</ForwardRef(forwardRef)>
</withPropsOnChange(Button)>
`;
src/core/client/framework/components/__snapshots__/OIDCButton.spec.tsx.snap
+8 -12
View File
@@ -1,23 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
classes={
Object {
"active": "OIDCButton-active",
"colorRegular": "OIDCButton-colorRegular",
"disabled)": "OIDCButton-disabled)",
"mouseHover": "OIDCButton-mouseHover",
"variantRegular": "OIDCButton-variantRegular",
}
}
<withPropsOnChange(Button)
className="coral coral-login-oidcButton OIDCButton-button"
color="none"
fontSize="small"
fullWidth={true}
onClick={[Function]}
size="large"
paddingSize="small"
textAlign="center"
upperCase={true}
variant="filled"
>
<span>
Login with OIDC
</span>
</ForwardRef(forwardRef)>
</withPropsOnChange(Button)>
`;
src/core/client/framework/lib/bootstrap/CoralContext.tsx
+1 -1
View File
@@ -13,8 +13,8 @@ import { PostMessageService } from "coral-framework/lib/postMessage";
import { RestClient } from "coral-framework/lib/rest";
import { PromisifiedStorage } from "coral-framework/lib/storage";
import { TransitionControlData } from "coral-framework/testHelpers";
import { UIContext } from "coral-ui/components";
import { ClickFarAwayRegister } from "coral-ui/components/ClickOutside";
import { UIContext } from "coral-ui/components/v2";
export interface CoralContext {
/** relayEnvironment for our relay framework. */
src/core/client/framework/lib/form/helpers.tsx
+3
View File
@@ -105,3 +105,6 @@ export const hasError = ({ touched, error, submitError }: FieldMeta) =>
export const colorFromMeta = (meta: FieldMeta) =>
hasError(meta) ? "error" : "regular";
export const streamColorFromMeta = (meta: FieldMeta) =>
hasError(meta) ? "error" : "streamBlue";
src/core/client/stream/App/TabBar.css
+14
View File
@@ -0,0 +1,14 @@
.smallTab {
padding-top: var(--v2-spacing-3);
padding-bottom: var(--v2-spacing-3);
padding-left: var(--v2-spacing-4);
padding-right: var(--v2-spacing-4);
}
.smallText {
font-family: var(--v2-font-family-secondary);
font-size: var(--v2-font-size-1);
line-height: var(--v2-line-height-1);
padding-top: var(--v2-spacing-1);
}
src/core/client/stream/App/TabBar.tsx
+96 -44
View File
@@ -4,7 +4,9 @@ import React, { FunctionComponent } from "react";
import { GQLSTORY_MODE } from "coral-framework/schema";
import CLASSES from "coral-stream/classes";
import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components";
import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components/v2";
import styles from "./TabBar.css";
type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
@@ -18,55 +20,105 @@ export interface Props {
const AppTabBar: FunctionComponent<Props> = (props) => {
return (
<TabBar
className={CLASSES.tabBar.$root}
activeTab={props.activeTab}
onTabClick={props.onTabClick}
>
<Tab
className={cn(CLASSES.tabBar.comments, {
[CLASSES.tabBar.activeTab]: props.activeTab === "COMMENTS",
})}
tabID="COMMENTS"
>
{props.mode === GQLSTORY_MODE.QA ? (
<Localized id="general-tabBar-qaTab">
<span>Q&A</span>
</Localized>
) : (
<Localized id="general-tabBar-commentsTab">
<span>Comments</span>
</Localized>
)}
</Tab>
{props.showProfileTab && (
<Tab
className={cn(CLASSES.tabBar.myProfile, {
[CLASSES.tabBar.activeTab]: props.activeTab === "PROFILE",
})}
tabID="PROFILE"
<MatchMedia gteWidth="sm">
{(matches) => (
<TabBar
className={CLASSES.tabBar.$root}
activeTab={props.activeTab}
onTabClick={props.onTabClick}
variant="streamPrimary"
>
<Localized id="general-tabBar-myProfileTab">
<span>My Profile</span>
</Localized>
</Tab>
)}
{props.showConfigureTab && (
<Tab className={CLASSES.tabBar.configure} tabID="CONFIGURE">
<MatchMedia gteWidth="sm">
{(matches) =>
matches ? (
<Tab
className={cn(CLASSES.tabBar.comments, {
[CLASSES.tabBar.activeTab]: props.activeTab === "COMMENTS",
[styles.smallTab]: !matches,
})}
tabID="COMMENTS"
variant="streamPrimary"
localizationId={
props.mode === GQLSTORY_MODE.QA
? "general-tabBar-aria-qa"
: "general-tabBar-aria-comments"
}
>
{matches ? (
props.mode === GQLSTORY_MODE.QA ? (
<Localized id="general-tabBar-qaTab">
<span>Q&A</span>
</Localized>
) : (
<Localized id="general-tabBar-commentsTab">
<span>Comments</span>
</Localized>
)
) : (
<div>
<Icon size="lg">
{props.mode === GQLSTORY_MODE.QA ? "live_help" : "forum"}
</Icon>
{props.mode === GQLSTORY_MODE.QA ? (
<Localized id="general-tabBar-qaTab">
<div className={styles.smallText}>Q&A</div>
</Localized>
) : (
<Localized id="general-tabBar-commentsTab">
<div className={styles.smallText}>Comments</div>
</Localized>
)}
</div>
)}
</Tab>
{props.showProfileTab && (
<Tab
className={cn(CLASSES.tabBar.myProfile, {
[CLASSES.tabBar.activeTab]: props.activeTab === "PROFILE",
[styles.smallTab]: !matches,
})}
tabID="PROFILE"
variant="streamPrimary"
localizationId="general-tabBar-aria-myProfile"
>
{matches ? (
<Localized id="general-tabBar-myProfileTab">
<span>My Profile</span>
</Localized>
) : (
<div>
<Icon size="lg">account_circle</Icon>
<Localized id="general-tabBar-myProfileTab">
<div className={styles.smallText}>My Profile</div>
</Localized>
</div>
)}
</Tab>
)}
{props.showConfigureTab && (
<Tab
className={cn(CLASSES.tabBar.configure, {
[styles.smallTab]: !matches,
})}
tabID="CONFIGURE"
variant="streamPrimary"
localizationId="general-tabBar-aria-configure"
>
{matches ? (
<Localized id="general-tabBar-configure">
<span>Configure</span>
</Localized>
) : (
<Icon aria-label="Configure">settings</Icon>
)
}
</MatchMedia>
</Tab>
<div>
<Icon size="lg">settings</Icon>
<Localized id="general-tabBar-configure">
<div className={styles.smallText}>Configure</div>
</Localized>
</div>
)}
</Tab>
)}
</TabBar>
)}
</TabBar>
</MatchMedia>
);
};
src/core/client/stream/classes.ts
+73 -2
View File
@@ -38,6 +38,7 @@ const CLASSES = {
content: "coral coral-rte-content",
placeholder: "coral coral-rte-placeholder",
toolbar: "coral coral-rte-toolbar",
container: "coral coral-rte-container",
},
/**
@@ -278,6 +279,16 @@ const CLASSES = {
*/
reacted: "coral coral-reacted",
/**
* collapseToggle is the button to collapse and expand the display of a comment.
*/
collapseToggle: {
$root: "coral coral-comment-collapse-toggle",
icon: "coral coral-comment-collapse-toggle-icon",
indent: "coral coral-comment-collapse-toggle-indent",
collapsed: "coral coral-comment-collapse-toggle-collapsed",
},
/**
* topBar is the uppper bar of the comment.
*/
@@ -703,15 +714,25 @@ const CLASSES = {
* myUsername is the username part of my profile.
*/
myUsername: {
title: "coral coral-myUsername-title",
username: "coral coral-myUsername",
editButton: "coral coral-myUsername-editButton",
change: "coral coral-myUsername-change",
tooSoon: "coral-myUsername-tooSoon",
form: {
$root: "coral coral-changeMyUsername",
heading: "coral coral-changeMyUsername-heading",
description: "coral coral-changeMyUsername-description",
label: "coral coral-changeMyUsername-label",
username: "coral coral-changeMyUsername-username",
cancelButton: "coral coral-changeMyUsername-cancelButton",
saveButton: "coral coral-changeMyUsername-saveButton",
closeButton: "coral coral-changeMyUsername-closeButton",
errorMessage: "coral coral-changeMyEmail-errorMessage",
footer: "coral coral-changeMyUsername-footer",
errorMessage:
"coral coral-changeMyUsername-errorMessage coral-changeMyEmail-errorMessage",
successMessage: "coral coral-changeMyUsername-successMessage",
successCallOut: "coral coral-changeMyUsername-successCallOut",
},
},
@@ -720,11 +741,15 @@ const CLASSES = {
*/
myEmail: {
email: "coral coral-myEmail",
title: "coral coral-myEmail-title",
unverified: "coral coral-myEmail-unverified",
editButton: "coral coral-myEmail-editButton",
form: {
$root: "coral coral-changeMyEmail",
currentEmail: "coral coral-changeMyEmail-currentEmail",
header: "coral coral-changeMyEmail-header",
footer: "coral coral-changeMyEmail-footer",
currentEmail: "coral coral-myEmail-currentEmail",
desc: "coral coral-changeMyEmail-desc",
cancelButton: "coral coral-changeMyEmail-cancelButton",
saveButton: "coral coral-changeMyEmail-saveButton",
errorMessage: "coral coral-changeMyEmail-errorMessage",
@@ -736,6 +761,9 @@ const CLASSES = {
*/
verifyEmail: {
$root: "coral coral-verifyEmail",
container: "coral coral-verifyEmail-container",
content: "coral coral-verifyEmail-content",
title: "coral coral-verifyEmail-title",
resendButton: "coral coral-verifyEmail-resendButton",
resentMessage: "coral coral-verifyEmail-resentMessage",
},
@@ -786,6 +814,7 @@ const CLASSES = {
*/
ignoredCommenters: {
$root: "coral coral-ignoredCommenters",
list: "coral coral-ignoredCommenters-list",
manageButton: "coral coral-ignoredComments-manageButton",
username: "coral coral-ignoredCommenters-username",
stopIgnoreButton: "coral coral-ignoredCommenters-stopIgnoreButton",
@@ -796,12 +825,15 @@ const CLASSES = {
*/
myPassword: {
$root: "coral coral-myPassword",
title: "coral coral-myPassword-title",
editButton: "coral coral-myPassword-editButton",
form: {
$root: "coral coral-changePassword",
footer: "coral coral-changePassword-footer",
cancelButton: "coral coral-changePassword-cancelButton",
forgotButton: "coral coral-changePassword-forgotButton",
changeButton: "coral coral-changePassword-changeButton",
successMessageContainer: "coral coral-changePassword-successContainer",
successMessage: "coral coral-changePassword-successMessage",
errorMessage: "coral coral-changePassword-errorMessage",
},
@@ -816,6 +848,7 @@ const CLASSES = {
requestButton: "coral coral-downloadCommentHistory-requestButton",
recentRequest: "coral coral-downloadCommentHistory-recentRequest",
requestLater: "coral coral-downloadCommentHistory-requestLater",
requestError: "coral coral-downloadCommentHistory-requestError",
},
/**
@@ -823,6 +856,9 @@ const CLASSES = {
*/
deleteMyAccount: {
$root: "coral coral-deleteMyAccount",
title: "coral coral-deleteMyAccount-title",
section: "coral coral-deleteMyAccount-section",
content: "coral coral-deleteMyAccount-content",
requestButton: "coral coral-deleteMyAccount-requestButton",
cancelRequestButton: "coral coral-deleteMyAccount-cancelRequestButton",
},
@@ -833,8 +869,10 @@ const CLASSES = {
*/
pendingAccountDeletion: {
$root: "coral coral-pendingAccountDeletion",
container: "coral coral-pendingAccountDeletion-container",
cancelRequestButton:
"coral coral-pendingAccountDeletion-cancelRequestButton",
icon: "coral coral-pendingAccountDeletion-cancelRequestIcon",
},
/**
@@ -843,9 +881,15 @@ const CLASSES = {
deleteMyAccountModal: {
$root: "coral coral-deleteMyAccountModal",
header: "coral coral-deleteMyAccountModal-header",
headerText: "coral coral-deleteMyAccountModal-headerText",
subHeaderText: "coral coral-deleteMyAccountModal-subHeaderText",
body: "coral coral-deleteMyAccountModal-body",
sectionContent: "coral coral-deleteMyAccountModal-sectionContent",
sectionHeader: "coral coral-deleteMyAccountModal-sectionHeader",
cancelButton: "coral coral-deleteMyAccountModal-cancelButton",
proceedButton: "coral coral-deleteMyAccountModal-proceedButton",
doneButton: "coral coral-deleteMyAccountModal-doneButton",
stepBar: "coral coral-deleteMyAccountModal-stepBar",
deleteMyAccountButton: "coral coral-deleteMyAccount-deleteMyAccountButton",
},
@@ -874,6 +918,7 @@ const CLASSES = {
$root: "coral coral-configureCommentStream",
applyButton: "coral coral-configureCommentStream-applyButton",
errorMessage: "coral coral-configureCommentStream-errorMessage",
successMessage: "coral coral-configureCommentStream-successMessage",
},
/**
@@ -906,6 +951,32 @@ const CLASSES = {
* validation message that shows up on form errors.
*/
validationMessage: "coral-validation-message",
login: {
signIn: {
noAccount: "coral coral-login-signIn-noAccount",
},
signUp: {
alreadyHaveAccount: "coral coral-login-signUp-alreadyHaveAccount",
},
signInWithEmail: {
forgotPassword: "coral coral-login-signInWithEmail-forgotPassword",
},
bar: "coral coral-login-bar",
title: "coral coral-login-title",
header: "coral coral-login-header",
subBar: "coral coral-login-subBar",
orSeparator: "coral coral-login-orSeparator",
description: "coral coral-login-description",
field: "coral coral-login-field",
errorContainer: "coral coral-login-errorContainer",
error: "coral coral-login-error",
facebookButton: "coral coral-login-facebookButton",
googleButton: "coral coral-login-googleButton",
oidcButton: "coral coral-login-oidcButton",
},
moderateStream: "coral coral-general-moderateStreamLink",
};
export default CLASSES;
src/core/client/stream/common/MessageBox/MessageBox.css
+11 -5
View File
@@ -1,12 +1,18 @@
$commentsMessageBoxBackground: var(--v2-colors-grey-700);
.root {
display: flex;
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
padding: var(--spacing-3);
padding: var(--v2-spacing-3);
box-sizing: border-box;
width: 100%;
background-color: var(--palette-text-primary);
border-top-right-radius: 1px;
border-top-left-radius: 1px;
background-color: $commentsMessageBoxBackground;
border-top-right-radius: var(--v2-round-corners);
border-top-left-radius: var(--v2-round-corners);
}
src/core/client/stream/common/MessageBox/MessageBoxContent.css
+5 -1
View File
@@ -1,4 +1,8 @@
$commentsMessageBoxColor: var(--v2-colors-pure-white);
.root {
composes: root from "~coral-stream/shared/htmlContent.css";
color: var(--palette-text-light);
color: $commentsMessageBoxColor;
font-weight: var(--v2-font-weight-primary-semi-bold);
}

Some files were not shown because too many files have changed in this diff Show More