react-native-social-login-module
Version:
React Native social login
150 lines • 9.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
/**
* ? Local Imports
*/
const SocialLoginScreen_style_1 = tslib_1.__importDefault(require("./SocialLoginScreen.style"));
const TextField_1 = tslib_1.__importDefault(require("./components/TextField/TextField"));
const SocialButton_1 = tslib_1.__importDefault(require("./components/SocialButton/SocialButton"));
// ? Assets
const backArrowImage = require("./local-assets/left-arrow.png");
const facebookLogo = require("./local-assets/facebook-logo.png");
const twitterLogo = require("./local-assets/twitter-logo.png");
const googleLogo = require("./local-assets/google-logo.png");
const discordLogo = require("./local-assets/discord-logo.png");
class SocialLoginScreen extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
username: '',
password: ''
};
this.renderHeader = () => {
const { signUpText = "SIGN UP", signUpTextStyle, backArrowImageSource = backArrowImage, onSignUpPress, } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.headerContainer}>
<react_native_1.TouchableOpacity style={SocialLoginScreen_style_1.default.headerContainerGlue} onPress={onSignUpPress}>
<react_native_1.Image source={backArrowImageSource} style={SocialLoginScreen_style_1.default.headerBackImageStyle}/>
<react_native_1.Text style={[SocialLoginScreen_style_1.default.signUpTextStyle, signUpTextStyle]}>
{signUpText}
</react_native_1.Text>
</react_native_1.TouchableOpacity>
</react_native_1.View>);
};
this.captureData = (data, key) => {
const { onPasswordChangeText, onUserNameChangeText, } = this.props;
const { username, password } = this.state;
console.log(username);
console.log(password);
if ('username' === key) {
this.setState({ username: data });
onUserNameChangeText(data);
}
if ('password' === key) {
this.setState({ password: data });
onPasswordChangeText(data);
}
};
this.renderLoginTitle = () => {
const { loginTitleText = "Log In", loginTextStyle } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.loginTitleContainer}>
<react_native_1.Text style={[SocialLoginScreen_style_1.default.loginTextStyle, loginTextStyle]}>
{loginTitleText}
</react_native_1.Text>
</react_native_1.View>);
};
this.renderTextFieldContainer = () => {
const { usernameTextFieldStyle, usernamePlaceholder = "Email", passwordPlaceholder = "Password", passwordTextFieldStyle, requiredRestPassword = true, } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.textFieldContainer}>
<TextField_1.default {...this.props} placeholder={usernamePlaceholder} onChangeText={(username) => this.captureData(username, 'username')} textFieldStyle={usernameTextFieldStyle}/>
<react_native_1.View style={SocialLoginScreen_style_1.default.passwordTextFieldContainer}>
<TextField_1.default width="70%" secureTextEntry {...this.props} placeholder={passwordPlaceholder} onChangeText={(password) => this.captureData(password, 'password')} textFieldStyle={passwordTextFieldStyle}/>
</react_native_1.View>
{requiredRestPassword && this.renderForgotPassword()}
</react_native_1.View>);
};
this.renderForgotPassword = () => {
const { forgotPasswordText = "Forgot Password?", forgotPasswordTextStyle, onForgotPasswordPress, } = this.props;
return (<react_native_1.TouchableOpacity style={SocialLoginScreen_style_1.default.forgotPasswordContainer} onPress={onForgotPasswordPress}>
<react_native_1.Text style={[SocialLoginScreen_style_1.default.forgotPasswordTextStyle, forgotPasswordTextStyle]}>
{forgotPasswordText}
</react_native_1.Text>
</react_native_1.TouchableOpacity>);
};
this.loginClick = () => {
const { onLoginPress, } = this.props;
const { username, password } = this.state;
onLoginPress(username, password);
};
this.renderClassicLoginButton = () => {
const { loginText = "Login", loginButtonBackgroundColor, loginButtonShadowColor = "#58a13f", } = this.props;
return (<SocialButton_1.default {...this.props} text={loginText} onPress={() => this.loginClick()} shadowColor={loginButtonShadowColor} backgroundColor={loginButtonBackgroundColor}/>);
};
this.renderFacebookLoginButton = () => {
const { onFacebookLoginPress } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.socialLoginButtonContainer}>
<SocialButton_1.default width={60} height={60} shadowColor="#2f4a82" backgroundColor="#4267B2" component={<react_native_1.Image source={facebookLogo} style={SocialLoginScreen_style_1.default.facebookImageStyle}/>} onPress={() => onFacebookLoginPress && onFacebookLoginPress()}/>
</react_native_1.View>);
};
this.renderTwitterLoginButton = () => {
const { onTwitterLoginPress } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.socialLoginButtonContainer}>
<SocialButton_1.default width={60} height={60} backgroundColor="#1DA1F2" shadowColor="#1a7aab" component={<react_native_1.Image source={twitterLogo} style={SocialLoginScreen_style_1.default.socialLoginButtonImageStyle}/>} onPress={() => onTwitterLoginPress && onTwitterLoginPress()}/>
</react_native_1.View>);
};
this.renderGoogleLoginButton = () => {
const { onGoogleLoginPress } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.socialLoginButtonContainer}>
<SocialButton_1.default width={60} height={60} backgroundColor="#fff" component={<react_native_1.Image source={googleLogo} style={SocialLoginScreen_style_1.default.socialLoginButtonImageStyle}/>} onPress={() => onGoogleLoginPress && onGoogleLoginPress()}/>
</react_native_1.View>);
};
this.renderDiscordLoginButton = () => {
const { onDiscordLoginPress } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.socialLoginButtonContainer}>
<SocialButton_1.default width={60} height={60} backgroundColor="#7289DA" shadowColor="#4e5e96" component={<react_native_1.Image source={discordLogo} style={SocialLoginScreen_style_1.default.socialLoginButtonImageStyle}/>} onPress={() => onDiscordLoginPress && onDiscordLoginPress()}/>
</react_native_1.View>);
};
this.renderSocialButtons = () => {
const { enableFacebookLogin, enableTwitterLogin, enableGoogleLogin, enableDiscordLogin, } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.socialButtonsContainer}>
{this.renderClassicLoginButton()}
<react_native_1.ScrollView style={SocialLoginScreen_style_1.default.socialButtonsContainerGlue} contentInset={SocialLoginScreen_style_1.default.socialLoginButtonsContentInset}>
{enableFacebookLogin && this.renderFacebookLoginButton()}
{enableTwitterLogin && this.renderTwitterLoginButton()}
{enableGoogleLogin && this.renderGoogleLoginButton()}
{enableDiscordLogin && this.renderDiscordLoginButton()}
</react_native_1.ScrollView>
</react_native_1.View>);
};
this.renderRightTopAsset = () => {
const { rightTopAssetImageSource } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.rightTopAssetContainer}>
<react_native_1.Image resizeMode="contain" source={rightTopAssetImageSource} style={SocialLoginScreen_style_1.default.rightTopAssetImageStyle}/>
</react_native_1.View>);
};
this.renderLeftBottomAsset = () => {
const { leftBottomAssetImageSource } = this.props;
return (<react_native_1.View style={SocialLoginScreen_style_1.default.leftBottomAssetContainer}>
<react_native_1.Image resizeMode="contain" source={leftBottomAssetImageSource} style={SocialLoginScreen_style_1.default.leftBottomAssetImageStyle}/>
</react_native_1.View>);
};
}
render() {
const { requiredSignup = true } = this.props;
return (<react_native_1.SafeAreaView style={SocialLoginScreen_style_1.default.container}>
{requiredSignup && this.renderHeader()}
{this.renderRightTopAsset()}
<react_native_1.View style={SocialLoginScreen_style_1.default.contentContainer}>
{this.renderLoginTitle()}
{this.renderTextFieldContainer()}
{this.renderSocialButtons()}
</react_native_1.View>
{this.renderLeftBottomAsset()}
</react_native_1.SafeAreaView>);
}
}
exports.default = SocialLoginScreen;
;
//# sourceMappingURL=SocialLoginScreen.js.map