[FIX] Add User Generated Content link on login (#4827)

* [FIX] Add User Generated Content link on login

* minor tweak

app/containers/UserGeneratedContentRules.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, StyleSheet, Text, ViewStyle } from 'react-native';
+
+import sharedStyles from '../views/Styles';
+import { useTheme } from '../theme';
+import openLink from '../lib/methods/helpers/openLink';
+import { useAppSelector } from '../lib/hooks';
+import I18n from '../i18n';
+
+const styles = StyleSheet.create({
+	bottomContainer: {
+		flexDirection: 'column',
+		alignItems: 'center',
+		marginBottom: 32,
+		marginHorizontal: 30
+	},
+	bottomContainerText: {
+		...sharedStyles.textRegular,
+		fontSize: 13
+	},
+	bottomContainerTextBold: {
+		...sharedStyles.textSemibold,
+		fontSize: 13
+	}
+});
+
+const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
+	const { colors, theme } = useTheme();
+	const { server } = useAppSelector(state => ({
+		server: state.server.server
+	}));
+
+	const openContract = (route: string) => {
+		if (!server) {
+			return;
+		}
+		openLink(`${server}/${route}`, theme);
+	};
+	return (
+		<View style={[styles.bottomContainer, styleContainer]}>
+			<Text style={[styles.bottomContainerText, { color: colors.auxiliaryText }]}>
+				{`${I18n.t('Onboarding_agree_terms')}\n`}
+				<Text
+					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+					onPress={() => openContract('terms-of-service')}
+				>
+					{I18n.t('Terms_of_Service')}
+				</Text>{' '}
+				{I18n.t('and')}
+				<Text
+					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+					onPress={() => openContract('privacy-policy')}
+				>
+					{' '}
+					{I18n.t('Privacy_Policy')}
+				</Text>
+			</Text>
+		</View>
+	);
+};
+
+export default UGCRules;

app/views/LoginView.tsx

@@ -15,6 +15,7 @@ import I18n from '../i18n';
 import { OutsideParamList } from '../stacks/types';
 import { withTheme } from '../theme';
 import sharedStyles from './Styles';
+import UGCRules from '../containers/UserGeneratedContentRules';
 
 const styles = StyleSheet.create({
 	registerDisabled: {
@@ -31,8 +32,7 @@ const styles = StyleSheet.create({
 	},
 	bottomContainer: {
 		flexDirection: 'column',
-		alignItems: 'center',
-		marginBottom: 32
+		alignItems: 'center'
 	},
 	bottomContainerText: {
 		...sharedStyles.textRegular,
@@ -44,6 +44,9 @@ const styles = StyleSheet.create({
 	},
 	loginButton: {
 		marginTop: 16
+	},
+	ugcContainer: {
+		marginTop: 32
 	}
 });
 
@@ -224,6 +227,7 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 						{Accounts_RegistrationForm_LinkReplacementText}
 					</Text>
 				)}
+				<UGCRules styleContainer={styles.ugcContainer} />
 			</>
 		);
 	};

app/views/RegisterView.tsx

@@ -17,9 +17,9 @@ import { OutsideParamList } from '../stacks/types';
 import { withTheme } from '../theme';
 import { showErrorAlert, isValidEmail } from '../lib/methods/helpers';
 import log, { events, logEvent } from '../lib/methods/helpers/log';
-import openLink from '../lib/methods/helpers/openLink';
 import sharedStyles from './Styles';
 import { Services } from '../lib/services';
+import UGCRules from '../containers/UserGeneratedContentRules';
 
 const styles = StyleSheet.create({
 	title: {
@@ -50,7 +50,6 @@ const styles = StyleSheet.create({
 });
 
 interface IProps extends IBaseScreen<OutsideParamList, 'RegisterView'> {
-	server: string;
 	Site_Name: string;
 	Gitlab_URL: string;
 	CAS_enabled: boolean;
@@ -156,14 +155,6 @@ class RegisterView extends React.Component<IProps, any> {
 		this.setState({ saving: false });
 	};
 
-	openContract = (route: string) => {
-		const { server, theme } = this.props;
-		if (!server) {
-			return;
-		}
-		openLink(`${server}/${route}`, theme);
-	};
-
 	renderCustomFields = () => {
 		const { customFields } = this.state;
 		const { Accounts_CustomFields } = this.props;
@@ -315,25 +306,7 @@ class RegisterView extends React.Component<IProps, any> {
 						style={styles.registerButton}
 					/>
 
-					<View style={styles.bottomContainer}>
-						<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
-							{`${I18n.t('Onboarding_agree_terms')}\n`}
-							<Text
-								style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
-								onPress={() => this.openContract('terms-of-service')}
-							>
-								{I18n.t('Terms_of_Service')}
-							</Text>{' '}
-							{I18n.t('and')}
-							<Text
-								style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
-								onPress={() => this.openContract('privacy-policy')}
-							>
-								{' '}
-								{I18n.t('Privacy_Policy')}
-							</Text>
-						</Text>
-					</View>
+					<UGCRules />
 
 					{showLoginButton ? (
 						<View style={styles.bottomContainer}>
@@ -352,7 +325,6 @@ class RegisterView extends React.Component<IProps, any> {
 }
 
 const mapStateToProps = (state: IApplicationState) => ({
-	server: state.server.server,
 	Site_Name: state.settings.Site_Name as string,
 	Gitlab_URL: state.settings.API_Gitlab_URL as string,
 	CAS_enabled: state.settings.CAS_enabled as boolean,