verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Clean LoginServices - TypeScript (#3935)

This commit is contained in:
Alex Junior 2022-03-22 19:14:42 -03:00 committed by GitHub
parent 2fb7d917a7
commit cbe2b23e27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 68 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
app/containers/LoginServices.tsx
View File

@ -3,6 +3,7 @@ import { Animated, Easing, Linking, StyleSheet, Text, View } from 'react-native'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Base64 } from 'js-base64'; import { Base64 } from 'js-base64';
import * as AppleAuthentication from 'expo-apple-authentication'; import * as AppleAuthentication from 'expo-apple-authentication';
import { StackNavigationProp } from '@react-navigation/stack';
import { withTheme } from '../theme'; import { withTheme } from '../theme';
import sharedStyles from '../views/Styles'; import sharedStyles from '../views/Styles';
@ -15,6 +16,9 @@ import random from '../utils/random';
import { events, logEvent } from '../utils/log'; import { events, logEvent } from '../utils/log';
import RocketChat from '../lib/rocketchat'; import RocketChat from '../lib/rocketchat';
import { CustomIcon } from '../lib/Icons'; import { CustomIcon } from '../lib/Icons';
import { IServices } from '../selectors/login';
import { OutsideParamList } from '../stacks/types';
import { IApplicationState } from '../definitions';
const BUTTON_HEIGHT = 48; const BUTTON_HEIGHT = 48;
const SERVICE_HEIGHT = 58; const SERVICE_HEIGHT = 58;
@ -58,31 +62,40 @@ const styles = StyleSheet.create({
}); });
interface IOpenOAuth { interface IOpenOAuth {
url?: string; url: string;
ssoToken?: string; ssoToken?: string;
authType?: string; authType?: string;
} }
interface IService { interface IItemService {
name: string; name: string;
service: string; service: string;
authType: string; authType: string;
buttonColor: string; buttonColor: string;
buttonLabelColor: string; buttonLabelColor: string;
clientConfig: { provider: string };
serverURL: string;
authorizePath: string;
clientId: string;
scope: string;
}
interface IOauthProvider {
[key: string]: () => void;
facebook: () => void;
github: () => void;
gitlab: () => void;
google: () => void;
linkedin: () => void;
'meteor-developer': () => void;
twitter: () => void;
wordpress: () => void;
} }
interface ILoginServicesProps { interface ILoginServicesProps {
navigation: any; navigation: StackNavigationProp<OutsideParamList>;
server: string; server: string;
services: { services: IServices;
facebook: { clientId: string };
github: { clientId: string };
gitlab: { clientId: string };
google: { clientId: string };
linkedin: { clientId: string };
'meteor-developer': { clientId: string };
wordpress: { clientId: string; serverURL: string };
};
Gitlab_URL: string; Gitlab_URL: string;
CAS_enabled: boolean; CAS_enabled: boolean;
CAS_login_url: string; CAS_login_url: string;
@ -90,12 +103,13 @@ interface ILoginServicesProps {
theme: string; theme: string;
} }
class LoginServices extends React.PureComponent<ILoginServicesProps, any> { interface ILoginServicesState {
private _animation: any; collapsed: boolean;
servicesHeight: Animated.Value;
}
static defaultProps = { class LoginServices extends React.PureComponent<ILoginServicesProps, ILoginServicesState> {
separator: true private _animation?: Animated.CompositeAnimation | void;
};
state = { state = {
collapsed: true, collapsed: true,
@ -194,7 +208,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
this.openOAuth({ url: `${endpoint}${params}` }); this.openOAuth({ url: `${endpoint}${params}` });
}; };
onPressCustomOAuth = (loginService: any) => { onPressCustomOAuth = (loginService: IItemService) => {
logEvent(events.ENTER_WITH_CUSTOM_OAUTH); logEvent(events.ENTER_WITH_CUSTOM_OAUTH);
const { server } = this.props; const { server } = this.props;
const { serverURL, authorizePath, clientId, scope, service } = loginService; const { serverURL, authorizePath, clientId, scope, service } = loginService;
@ -207,7 +221,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
this.openOAuth({ url }); this.openOAuth({ url });
}; };
onPressSaml = (loginService: any) => { onPressSaml = (loginService: IItemService) => {
logEvent(events.ENTER_WITH_SAML); logEvent(events.ENTER_WITH_SAML);
const { server } = this.props; const { server } = this.props;
const { clientConfig } = loginService; const { clientConfig } = loginService;
@ -234,7 +248,6 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
AppleAuthentication.AppleAuthenticationScope.EMAIL AppleAuthentication.AppleAuthenticationScope.EMAIL
] ]
}); });
// @ts-ignore
await RocketChat.loginOAuthOrSso({ fullName, email, identityToken }); await RocketChat.loginOAuthOrSso({ fullName, email, identityToken });
} catch { } catch {
logEvent(events.ENTER_WITH_APPLE_F); logEvent(events.ENTER_WITH_APPLE_F);
@ -243,7 +256,12 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
getOAuthState = (loginStyle = LOGIN_STYPE_POPUP) => { getOAuthState = (loginStyle = LOGIN_STYPE_POPUP) => {
const credentialToken = random(43); const credentialToken = random(43);
let obj: any = { loginStyle, credentialToken, isCordova: true }; let obj: {
loginStyle: string;
credentialToken: string;
isCordova: boolean;
redirectUrl?: string;
} = { loginStyle, credentialToken, isCordova: true };
if (loginStyle === LOGIN_STYPE_REDIRECT) { if (loginStyle === LOGIN_STYPE_REDIRECT) {
obj = { obj = {
...obj, ...obj,
@ -263,12 +281,11 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
if (this._animation) { if (this._animation) {
this._animation.stop(); this._animation.stop();
} }
// @ts-ignore
this._animation = Animated.timing(servicesHeight, { this._animation = Animated.timing(servicesHeight, {
toValue: height, toValue: height,
duration: 300, duration: 300,
// @ts-ignore easing: Easing.inOut(Easing.quad),
easing: Easing.easeOutCubic useNativeDriver: true
}).start(); }).start();
}; };
@ -281,11 +298,11 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
} else { } else {
this.transitionServicesTo(SERVICES_COLLAPSED_HEIGHT); this.transitionServicesTo(SERVICES_COLLAPSED_HEIGHT);
} }
this.setState((prevState: any) => ({ collapsed: !prevState.collapsed })); this.setState((prevState: ILoginServicesState) => ({ collapsed: !prevState.collapsed }));
}; };
getSocialOauthProvider = (name: string) => { getSocialOauthProvider = (name: string) => {
const oauthProviders: any = { const oauthProviders: IOauthProvider = {
facebook: this.onPressFacebook, facebook: this.onPressFacebook,
github: this.onPressGithub, github: this.onPressGithub,
gitlab: this.onPressGitlab, gitlab: this.onPressGitlab,
@ -324,7 +341,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
return null; return null;
}; };
renderItem = (service: IService) => { renderItem = (service: IItemService) => {
const { CAS_enabled, theme } = this.props; const { CAS_enabled, theme } = this.props;
let { name } = service; let { name } = service;
name = name === 'meteor-developer' ? 'meteor' : name; name = name === 'meteor-developer' ? 'meteor' : name;
@ -401,26 +418,28 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
if (length > 3 && separator) { if (length > 3 && separator) {
return ( return (
<> <>
<Animated.View style={style}>{Object.values(services).map((service: any) => this.renderItem(service))}</Animated.View> <Animated.View style={style}>
{Object.values(services).map((service: IItemService) => this.renderItem(service))}
</Animated.View>
{this.renderServicesSeparator()} {this.renderServicesSeparator()}
</> </>
); );
} }
return ( return (
<> <>
{Object.values(services).map((service: any) => this.renderItem(service))} {Object.values(services).map((service: IItemService) => this.renderItem(service))}
{this.renderServicesSeparator()} {this.renderServicesSeparator()}
</> </>
); );
} }
} }
const mapStateToProps = (state: any) => ({ const mapStateToProps = (state: IApplicationState) => ({
server: state.server.server, server: state.server.server,
Gitlab_URL: state.settings.API_Gitlab_URL, Gitlab_URL: state.settings.API_Gitlab_URL as string,
CAS_enabled: state.settings.CAS_enabled, CAS_enabled: state.settings.CAS_enabled as boolean,
CAS_login_url: state.settings.CAS_login_url, CAS_login_url: state.settings.CAS_login_url as string,
services: state.login.services services: state.login.services as IServices
}); });
export default connect(mapStateToProps)(withTheme(LoginServices)) as any; export default connect(mapStateToProps)(withTheme(LoginServices));

5
app/definitions/ICredentials.ts
View File

@ -1,3 +1,5 @@
import { AppleAuthenticationFullName } from 'expo-apple-authentication';
export interface ICredentials { export interface ICredentials {
resume?: string; resume?: string;
user?: string; user?: string;
@ -13,4 +15,7 @@ export interface ICredentials {
login: ICredentials; login: ICredentials;
code: string; code: string;
}; };
fullName?: AppleAuthenticationFullName | null;
email?: string | null;
identityToken?: string | null;
} }

2
app/selectors/login.ts
View File

@ -3,7 +3,7 @@ import isEmpty from 'lodash/isEmpty';
import { IApplicationState, IUser } from '../definitions'; import { IApplicationState, IUser } from '../definitions';
interface IServices { export interface IServices {
facebook: { clientId: string }; facebook: { clientId: string };
github: { clientId: string }; github: { clientId: string };
gitlab: { clientId: string }; gitlab: { clientId: string };

6
app/stacks/types.ts
View File

@ -272,8 +272,14 @@ export type OutsideParamList = {
}; };
RegisterView: { RegisterView: {
title: string; title: string;
username?: string;
}; };
LegalView: undefined; LegalView: undefined;
AuthenticationWebView: {
authType: string;
url: string;
ssoToken?: string;
};
}; };
export type OutsideModalParamList = { export type OutsideModalParamList = {

2
app/views/LoginView.tsx
View File

@ -231,7 +231,7 @@ class LoginView extends React.Component<ILoginViewProps, any> {
return ( return (
<FormContainer theme={theme} testID='login-view'> <FormContainer theme={theme} testID='login-view'>
<FormContainerInner> <FormContainerInner>
<LoginServices separator={Accounts_ShowFormLogin} navigation={navigation} /> <LoginServices separator={Accounts_ShowFormLogin} navigation={navigation} theme={theme} />
{this.renderUserForm()} {this.renderUserForm()}
</FormContainerInner> </FormContainerInner>
</FormContainer> </FormContainer>

2
app/views/RegisterView.tsx
View File

@ -237,7 +237,7 @@ class RegisterView extends React.Component<IProps, any> {
return ( return (
<FormContainer theme={theme} testID='register-view'> <FormContainer theme={theme} testID='register-view'>
<FormContainerInner> <FormContainerInner>
<LoginServices navigation={navigation} /> <LoginServices navigation={navigation} theme={theme} separator />
<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text> <Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>
<TextInput <TextInput
label={I18n.t('Name')} label={I18n.t('Name')}