-
Notifications
You must be signed in to change notification settings - Fork 802
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Social: Add Bluesky connection UI (#39561)
* Add Bluesky to the supported services * Update connect URL logic for Bluesky * Create a dedicated component for custom inputs * Update ConnectForm to use CustomInputs * Update ServiceItem component to handle Bluesky custom inputs * Do the make up * Add changelog * Fix messed up translations * Clean up
- Loading branch information
1 parent
c7e170e
commit b337121
Showing
10 changed files
with
288 additions
and
62 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/js-packages/publicize-components/changelog/add-bluesky-connection-ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: added | ||
|
|
||
| Social: Added support for Bluesky |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,12 @@ | ||
| import { Button } from '@automattic/jetpack-components'; | ||
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
| import { useCallback } from '@wordpress/element'; | ||
| import { __, _x } from '@wordpress/i18n'; | ||
| import clsx from 'clsx'; | ||
| import { useCallback } from 'react'; | ||
| import { store } from '../../social-store'; | ||
| import { KeyringResult } from '../../social-store/types'; | ||
| import { SupportedService } from '../services/use-supported-services'; | ||
| import { CustomInputs } from './custom-inputs'; | ||
| import styles from './style.module.scss'; | ||
| import { useRequestAccess } from './use-request-access'; | ||
|
|
||
|
|
@@ -63,6 +64,7 @@ export function ConnectForm( { | |
| } | ||
|
|
||
| const formData = new FormData( event.target as HTMLFormElement ); | ||
|
|
||
| requestAccess( formData ); | ||
| }, | ||
| [ onSubmit, requestAccess ] | ||
|
|
@@ -74,31 +76,30 @@ export function ConnectForm( { | |
| onSubmit={ onSubmitForm } | ||
| > | ||
| { displayInputs ? ( | ||
| <> | ||
| { 'mastodon' === service.ID ? ( | ||
| <input | ||
| required | ||
| type="text" | ||
| name="instance" | ||
| aria-label={ __( 'Mastodon username', 'jetpack' ) } | ||
| placeholder={ '@[email protected]' } | ||
| /> | ||
| ) : null } | ||
| </> | ||
| <div className={ styles[ 'fields-wrapper' ] }> | ||
| <CustomInputs service={ service } /> | ||
| </div> | ||
| ) : null } | ||
| <Button | ||
| variant={ hasConnections ? 'secondary' : 'primary' } | ||
| type="submit" | ||
| className={ styles[ 'connect-button' ] } | ||
| > | ||
| { ( label => { | ||
| if ( label ) { | ||
| return label; | ||
| } | ||
|
|
||
| return hasConnections ? _x( 'Connect more', '', 'jetpack' ) : __( 'Connect', 'jetpack' ); | ||
| } )( buttonLabel ) } | ||
| </Button> | ||
| <div className={ styles[ 'fields-wrapper' ] }> | ||
| <div className={ styles[ 'fields-item' ] }> | ||
| <Button | ||
| variant={ hasConnections ? 'secondary' : 'primary' } | ||
| type="submit" | ||
| className={ styles[ 'connect-button' ] } | ||
| > | ||
| { ( label => { | ||
| if ( label ) { | ||
| return label; | ||
| } | ||
|
|
||
| return hasConnections | ||
| ? _x( 'Connect more', '', 'jetpack' ) | ||
| : __( 'Connect', 'jetpack' ); | ||
| } )( buttonLabel ) } | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| ); | ||
| } | ||
102 changes: 102 additions & 0 deletions
102
projects/js-packages/publicize-components/src/components/services/custom-inputs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { ExternalLink } from '@wordpress/components'; | ||
| import { createInterpolateElement, useId } from '@wordpress/element'; | ||
| import { __, _x } from '@wordpress/i18n'; | ||
| import { SupportedService } from '../services/use-supported-services'; | ||
| import styles from './style.module.scss'; | ||
|
|
||
| type CustomInputsProps = { | ||
| service: SupportedService; | ||
| }; | ||
|
|
||
| /** | ||
| * Custom inputs component | ||
| * @param {CustomInputsProps} props - Component props | ||
| * | ||
| * @return {import('react').ReactNode} Custom inputs component | ||
| */ | ||
| export function CustomInputs( { service }: CustomInputsProps ) { | ||
| const id = useId(); | ||
|
|
||
| if ( 'mastodon' === service.ID ) { | ||
| return ( | ||
| <div className={ styles[ 'fields-item' ] }> | ||
| <label htmlFor={ `${ id }-handle` }> | ||
| { _x( 'Handle', 'The handle of a social media account.', 'jetpack' ) } | ||
| </label> | ||
| <p className="description" id={ `${ id }-handle-description` }> | ||
| { __( 'You can find the handle in your Mastodon profile.', 'jetpack' ) } | ||
| </p> | ||
| <input | ||
| id={ `${ id }-handle` } | ||
| required | ||
| type="text" | ||
| name="instance" | ||
| autoComplete="off" | ||
| autoCapitalize="off" | ||
| autoCorrect="off" | ||
| spellCheck="false" | ||
| aria-label={ __( 'Mastodon handle', 'jetpack' ) } | ||
| aria-describedby={ `${ id }-handle-description` } | ||
| placeholder={ '@[email protected]' } | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if ( 'bluesky' === service.ID ) { | ||
| return ( | ||
| <> | ||
| <div className={ styles[ 'fields-item' ] }> | ||
| <label htmlFor={ `${ id }-handle` }> | ||
| { _x( 'Handle', 'The handle of a social media account.', 'jetpack' ) } | ||
| </label> | ||
| <p className="description" id={ `${ id }-handle-description` }> | ||
| { __( 'You can find the handle in your Bluesky profile.', 'jetpack' ) } | ||
| </p> | ||
| <input | ||
| id={ `${ id }-handle` } | ||
| required | ||
| type="text" | ||
| name="handle" | ||
| autoComplete="off" | ||
| autoCapitalize="off" | ||
| autoCorrect="off" | ||
| spellCheck="false" | ||
| aria-label={ __( 'Bluesky handle', 'jetpack' ) } | ||
| aria-describedby={ `${ id }-handle-description` } | ||
| placeholder={ 'username.bsky.social' } | ||
| /> | ||
| </div> | ||
| <div className={ styles[ 'fields-item' ] }> | ||
| <label htmlFor={ `${ id }-password` }>{ __( 'App password', 'jetpack' ) }</label> | ||
| <p className="description" id={ `${ id }-password-description` }> | ||
| { createInterpolateElement( | ||
| __( | ||
| 'App password is needed to safely connect your account. App password is different from your account password. You can <link>generate it in Bluesky</link>.', | ||
| 'jetpack' | ||
| ), | ||
| { | ||
| link: <ExternalLink href="https://bsky.app/settings/app-passwords" />, | ||
| } | ||
| ) } | ||
| </p> | ||
| <input | ||
| id={ `${ id }-password` } | ||
| required | ||
| type="password" | ||
| name="app_password" | ||
| autoComplete="off" | ||
| autoCapitalize="off" | ||
| autoCorrect="off" | ||
| spellCheck="false" | ||
| aria-label={ __( 'App password', 'jetpack' ) } | ||
| aria-describedby={ `${ id }-password-description` } | ||
| placeholder={ 'xxxx-xxxx-xxxx-xxxx' } | ||
| /> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.