Skip to content

Commit c047729

Browse files
brionmariobrionmario
committed
chore(react): refactor sign-In and sign-up components
- Updated EmailOtp, IdentifierFirst, MultiOptionButton, SmsOtp, Totp, and UsernamePassword components to ensure consistent button properties (fullWidth, color, variant). - Removed redundant button properties from the components. - Refactored SignInOptionFactory to improve the handling of authenticator components, ensuring proper passing of props. - Deleted unused GoogleButton component from SignUp options and restructured imports. - Added new social button components for Facebook, GitHub, Google, LinkedIn, Microsoft, and SignInWithEthereum. - Implemented a new SocialButton component for handling social logins with external identity providers.
1 parent 44ccb00 commit c047729

File tree

17 files changed

+274
-331
lines changed

17 files changed

+274
-331
lines changed

‎packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,13 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
9595
})}
9696

9797
<Button
98+
fullWidth
9899
type="submit"
100+
color="primary"
101+
variant="solid"
99102
disabled={isLoading}
100103
loading={isLoading}
101104
className={buttonClassName}
102-
color="primary"
103-
variant="solid"
104-
fullWidth
105105
style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}
106106
>
107107
{t('email.otp.submit.button')}

‎packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,13 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
7878
))}
7979

8080
<Button
81+
fullWidth
8182
type="submit"
83+
color="primary"
84+
variant="solid"
8285
disabled={isLoading}
8386
loading={isLoading}
8487
className={buttonClassName}
85-
color="primary"
86-
variant="solid"
87-
fullWidth
8888
style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}
8989
>
9090
{t('identifier.first.submit.button')}

‎packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,10 +134,10 @@ const MultiOptionButton: FC<BaseSignInOptionProps> = ({
134134

135135
return (
136136
<Button
137-
type="button"
138-
variant="outline"
139-
color="primary"
140137
fullWidth
138+
type="button"
139+
color="secondary"
140+
variant="solid"
141141
disabled={isLoading}
142142
onClick={handleClick}
143143
className={buttonClassName}

‎packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx‎

Lines changed: 104 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,16 @@ import {
2525
import {ReactElement} from 'react';
2626
import UsernamePassword from './UsernamePassword';
2727
import IdentifierFirst from './IdentifierFirst';
28-
import GoogleButton from './GoogleButton';
29-
import GitHubButton from './GitHubButton';
30-
import MicrosoftButton from './MicrosoftButton';
31-
import FacebookButton from './FacebookButton';
32-
import LinkedInButton from './LinkedInButton';
33-
import SignInWithEthereumButton from './SignInWithEthereumButton';
28+
import GoogleButton from '../../options/GoogleButton';
29+
import GitHubButton from '../../options/GitHubButton';
30+
import MicrosoftButton from '../../options/MicrosoftButton';
31+
import FacebookButton from '../../options/FacebookButton';
32+
import LinkedInButton from '../../options/LinkedInButton';
33+
import SignInWithEthereumButton from '../../options/SignInWithEthereumButton';
3434
import EmailOtp from './EmailOtp';
3535
import Totp from './Totp';
3636
import SmsOtp from './SmsOtp';
37-
import SocialButton from './SocialButton';
37+
import SocialButton from '../../options/SocialButton';
3838
import MultiOptionButton from './MultiOptionButton';
3939

4040
/**
@@ -44,7 +44,7 @@ export interface BaseSignInOptionProps extends WithPreferences {
4444
/**
4545
* The authenticator configuration.
4646
*/
47-
authenticator: EmbeddedSignInFlowAuthenticator;
47+
authenticator?: EmbeddedSignInFlowAuthenticator;
4848

4949
/**
5050
* Current form values.
@@ -74,7 +74,7 @@ export interface BaseSignInOptionProps extends WithPreferences {
7474
/**
7575
* Callback function called when the option is submitted.
7676
*/
77-
onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
77+
onSubmit?: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
7878

7979
/**
8080
* Custom CSS class name for form inputs.
@@ -95,64 +95,142 @@ export interface BaseSignInOptionProps extends WithPreferences {
9595
/**
9696
* Creates the appropriate sign-in option component based on the authenticator's ID.
9797
*/
98-
export const createSignInOption = (props: BaseSignInOptionProps): ReactElement => {
99-
const {authenticator, ...optionProps} = props;
100-
98+
export const createSignInOption = ({
99+
authenticator,
100+
onSubmit,
101+
buttonClassName,
102+
preferences,
103+
...rest
104+
}: BaseSignInOptionProps): ReactElement => {
101105
// Check if this authenticator has params (indicating it needs user input)
102106
const hasParams = authenticator.metadata?.params && authenticator.metadata.params.length > 0;
103107

104108
// Use authenticatorId to determine the component type
105109
switch (authenticator.authenticatorId) {
106110
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.UsernamePassword:
107-
return <UsernamePassword {...props} />;
111+
return <UsernamePassword authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />;
108112

109113
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.IdentifierFirst:
110-
return <IdentifierFirst {...props} />;
114+
return <IdentifierFirst authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />;
111115

112116
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Google:
113-
return <GoogleButton {...props} />;
117+
return (
118+
<GoogleButton
119+
className={buttonClassName}
120+
onClick={() => onSubmit(authenticator)}
121+
authenticator={authenticator}
122+
preferences={preferences}
123+
{...rest}
124+
/>
125+
);
114126

115127
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.GitHub:
116-
return <GitHubButton {...props} />;
128+
return (
129+
<GitHubButton
130+
authenticator={authenticator}
131+
preferences={preferences}
132+
className={buttonClassName}
133+
onClick={() => onSubmit(authenticator)}
134+
{...rest}
135+
/>
136+
);
117137

118138
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Microsoft:
119-
return <MicrosoftButton {...props} />;
139+
return (
140+
<MicrosoftButton
141+
authenticator={authenticator}
142+
preferences={preferences}
143+
className={buttonClassName}
144+
onClick={() => onSubmit(authenticator)}
145+
{...rest}
146+
/>
147+
);
120148

121149
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Facebook:
122-
return <FacebookButton {...props} />;
150+
return (
151+
<FacebookButton
152+
authenticator={authenticator}
153+
preferences={preferences}
154+
className={buttonClassName}
155+
onClick={() => onSubmit(authenticator)}
156+
{...rest}
157+
/>
158+
);
123159

124160
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.LinkedIn:
125-
return <LinkedInButton {...props} />;
161+
return (
162+
<LinkedInButton
163+
authenticator={authenticator}
164+
preferences={preferences}
165+
className={buttonClassName}
166+
onClick={() => onSubmit(authenticator)}
167+
{...rest}
168+
/>
169+
);
126170

127171
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SignInWithEthereum:
128-
return <SignInWithEthereumButton {...props} />;
172+
return (
173+
<SignInWithEthereumButton
174+
authenticator={authenticator}
175+
preferences={preferences}
176+
className={buttonClassName}
177+
onClick={() => onSubmit(authenticator)}
178+
{...rest}
179+
/>
180+
);
129181

130182
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
131183
// If it has params, render as input form, otherwise as selection button
132-
return hasParams ? <EmailOtp {...props} /> : <MultiOptionButton {...props} />;
184+
return hasParams ? (
185+
<EmailOtp authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
186+
) : (
187+
<MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
188+
);
133189

134190
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
135191
// If it has params, render as input form, otherwise as selection button
136-
return hasParams ? <Totp {...props} /> : <MultiOptionButton {...props} />;
192+
return hasParams ? (
193+
<Totp authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
194+
) : (
195+
<MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
196+
);
137197

138198
case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
139199
// If it has params, render as input form, otherwise as selection button
140-
return hasParams ? <SmsOtp {...props} /> : <MultiOptionButton {...props} />;
200+
return hasParams ? (
201+
<SmsOtp authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
202+
) : (
203+
<MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
204+
);
141205

142206
default:
143207
// Check if it's a federated authenticator (non-LOCAL idp)
144208
if (authenticator.idp !== EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
145209
// For unknown federated authenticators, use generic social login
146-
return <SocialButton {...props} />;
210+
return (
211+
<SocialButton
212+
authenticator={authenticator}
213+
preferences={preferences}
214+
className={buttonClassName}
215+
onClick={() => onSubmit(authenticator)}
216+
{...rest}
217+
>
218+
{authenticator.idp}
219+
</SocialButton>
220+
);
147221
}
148222

149223
// For LOCAL authenticators, decide based on whether they have params
150224
if (hasParams) {
151225
// Fallback to username/password for unknown local authenticators with params
152-
return <UsernamePassword {...props} />;
226+
return (
227+
<UsernamePassword authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
228+
);
153229
} else {
154230
// Use multi-option button for LOCAL authenticators without params
155-
return <MultiOptionButton {...props} />;
231+
return (
232+
<MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />
233+
);
156234
}
157235
}
158236
};

‎packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,13 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
9494
})}
9595

9696
<Button
97+
fullWidth
9798
type="submit"
99+
color="primary"
100+
variant="solid"
98101
disabled={isLoading}
99102
loading={isLoading}
100103
className={buttonClassName}
101-
color="primary"
102-
variant="solid"
103-
fullWidth
104104
style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}
105105
>
106106
{t('sms.otp.submit.button')}

‎packages/react/src/components/presentation/SignIn/options/Totp.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,13 @@ const Totp: FC<BaseSignInOptionProps> = ({
9494
})}
9595

9696
<Button
97+
fullWidth
9798
type="submit"
99+
color="primary"
100+
variant="solid"
98101
disabled={isLoading}
99102
loading={isLoading}
100103
className={buttonClassName}
101-
color="primary"
102-
variant="solid"
103-
fullWidth
104104
style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}
105105
>
106106
{t('totp.submit.button')}

‎packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ const UsernamePassword: FC<BaseSignInOptionProps> = ({
7979
))}
8080

8181
<Button
82+
fullWidth
8283
type="submit"
84+
color="primary"
85+
variant="solid"
8386
disabled={isLoading}
8487
loading={isLoading}
8588
className={buttonClassName}
86-
color="primary"
87-
variant="solid"
88-
fullWidth
8989
style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}
9090
>
9191
{t('username.password.submit.button')}

‎packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

0 commit comments

Comments
 (0)