SessionButtonTypes -> SessionButtonType and create enum for registration tabs

pull/691/head
Audric Ackermann 5 years ago
parent 295e707101
commit 0bb92971ee

@ -3,7 +3,7 @@ import classNames from 'classnames';
import { LocalizerType } from '../../types/Util';
import { SessionInput } from './SessionInput';
import { SessionButton, SessionButtonTypes } from './SessionButton';
import { SessionButton, SessionButtonType } from './SessionButton';
import { trigger } from '../../shims/events';
interface Props {
@ -11,17 +11,23 @@ interface Props {
}
enum SignInMode {
Default = 'Default',
UsingSeed = 'UsingSeed',
LinkingDevice = 'LinkingDevice',
Default,
UsingSeed,
LinkingDevice,
}
enum SignUpMode {
Default = 'Default',
SessionIDGenerated = 'SessionIDGenerated',
Default,
SessionIDGenerated,
}
enum TabType {
Create,
SignIn,
}
interface State {
selectedTab: 'create' | 'signin';
selectedTab: TabType;
signInMode: SignInMode;
signUpMode: SignUpMode;
displayName: string;
@ -34,7 +40,7 @@ interface State {
}
interface TabSelectEvent {
type: 'create' | 'signin';
type: TabType;
}
const Tab = ({
@ -46,12 +52,12 @@ const Tab = ({
isSelected: boolean;
label: string;
onSelect?: (event: TabSelectEvent) => void;
type: 'create' | 'signin';
type: TabType;
}) => {
const handleClick = onSelect
? () => {
onSelect({ type });
}
onSelect({ type });
}
: undefined;
return (
@ -84,7 +90,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
this.onSignUpGetStartedClick = this.onSignUpGetStartedClick.bind(this);
this.state = {
selectedTab: 'create',
selectedTab: TabType.Create,
signInMode: SignInMode.Default,
signUpMode: SignUpMode.Default,
displayName: '',
@ -111,20 +117,22 @@ export class RegistrationTabs extends React.Component<Props, State> {
const createAccount = i18n('createAccount');
const signIn = i18n('signIn');
const isCreateSelected = selectedTab === TabType.Create;
const isSignInSelected = selectedTab === TabType.SignIn;
return (
<div className="session-registration-container">
<div className="session-registration__tab-container">
<Tab
label={createAccount}
type="create"
isSelected={selectedTab === 'create'}
type={TabType.Create}
isSelected={isCreateSelected}
onSelect={this.handleTabSelect}
/>
<Tab
label={signIn}
type="signin"
isSelected={selectedTab === 'signin'}
type={TabType.SignIn}
isSelected={isSignInSelected}
onSelect={this.handleTabSelect}
/>
</div>
@ -157,7 +165,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
private renderSections() {
const { selectedTab } = this.state;
if (selectedTab === 'create') {
if (selectedTab === TabType.Create) {
return this.renderSignUp();
}
@ -191,18 +199,14 @@ export class RegistrationTabs extends React.Component<Props, State> {
private getRenderTermsConditionAgreement() {
const { selectedTab, signInMode, signUpMode } = this.state;
if (selectedTab === 'create') {
if (signUpMode !== SignUpMode.Default) {
return this.renderTermsConditionAgreement();
} else {
return null;
}
if (selectedTab === TabType.Create) {
return signUpMode !== SignUpMode.Default
? this.renderTermsConditionAgreement()
: null;
} else {
if (signInMode !== SignInMode.Default) {
return this.renderTermsConditionAgreement();
} else {
return null;
}
return signInMode !== SignInMode.Default
? this.renderTermsConditionAgreement()
: null;
}
}
@ -219,18 +223,18 @@ export class RegistrationTabs extends React.Component<Props, State> {
let buttonType: any;
let buttonText: string;
if (signUpMode !== SignUpMode.Default) {
buttonType = SessionButtonTypes.FullGreen;
buttonType = SessionButtonType.FullGreen;
buttonText = i18n('getStarted');
} else {
buttonType = SessionButtonTypes.Green;
buttonType = SessionButtonType.Green;
buttonText = i18n('generateSessionID');
}
return (
<SessionButton
onClick={async () => {
onClick={() => {
if (signUpMode === SignUpMode.Default) {
await this.onSignUpGenerateSessionIDClick();
void this.onSignUpGenerateSessionIDClick();
} else {
this.onSignUpGetStartedClick();
}
@ -272,7 +276,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
private onSignUpGetStartedClick() {
this.setState({
selectedTab: 'signin',
selectedTab: TabType.SignIn,
signInMode: SignInMode.UsingSeed,
});
}
@ -343,7 +347,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
</div>
);
} else {
return <div />;
return undefined;
}
}
@ -371,7 +375,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
if (signInMode === SignInMode.Default) {
return (
<div>
{this.renderRestoreUsingSeedButton(SessionButtonTypes.Green)}
{this.renderRestoreUsingSeedButton(SessionButtonType.Green)}
<div className="session-registration__or">{or}</div>
{this.renderLinkDeviceToExistingAccountButton()}
</div>
@ -383,7 +387,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
<div>
{this.renderContinueYourSessionButton()}
<div className="session-registration__or">{or}</div>
{this.renderRestoreUsingSeedButton(SessionButtonTypes.White)}
{this.renderRestoreUsingSeedButton(SessionButtonType.White)}
</div>
);
}
@ -412,17 +416,16 @@ export class RegistrationTabs extends React.Component<Props, State> {
private renderContinueYourSessionButton() {
return (
<SessionButton
// tslint:disable-next-line: no-empty
onClick={async () => {
await this.register('english');
onClick={() => {
void this.register('english');
}}
buttonType={SessionButtonTypes.FullGreen}
buttonType={SessionButtonType.FullGreen}
text={this.props.i18n('continueYourSession')}
/>
);
}
private renderRestoreUsingSeedButton(buttonType: SessionButtonTypes) {
private renderRestoreUsingSeedButton(buttonType: SessionButtonType) {
return (
<SessionButton
onClick={() => {
@ -452,7 +455,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
signUpMode: SignUpMode.Default,
});
}}
buttonType={SessionButtonTypes.White}
buttonType={SessionButtonType.White}
text={this.props.i18n('linkDeviceToExistingAccount')}
/>
);

@ -46,9 +46,7 @@ export class SessionButton extends React.PureComponent<Props> {
<div
className={classNames('session-button', buttonType, buttonColor)}
role="button"
onClick={e => {
this.clickHandler(e);
}}
onClick={this.clickHandler}
>
{text}
</div>

Loading…
Cancel
Save