diff --git a/app/assets/styles/blink/_EnrollmentModal.scss b/app/assets/styles/blink/_EnrollmentModal.scss index 1ea33c4..695dcf5 100644 --- a/app/assets/styles/blink/_EnrollmentModal.scss +++ b/app/assets/styles/blink/_EnrollmentModal.scss @@ -1,31 +1,32 @@ .title { padding-top: 00px; color: black; margin: 0 auto; font-size: 18; } .row { color: black; font-size: 16; height: 55px; } .container { padding: 10px; width: 100%; + padding-bottom: 40px; } .inner { // flex: 1; // justify-content: flex-end; } .button { margin-top: 30px; border-radius: 1px; border: 0px; width: 150; margin: 0 auto; margin-top: 30px; } diff --git a/app/assets/styles/blink/_Logo.scss b/app/assets/styles/blink/_Logo.scss index 159dbde..caf27e9 100644 --- a/app/assets/styles/blink/_Logo.scss +++ b/app/assets/styles/blink/_Logo.scss @@ -1,26 +1,37 @@ .landscapeContainer { flex: 1; - flex-direction: row; - justify-content: space-evenly; + flex-direction: column; + justify-content: center; align-items: center; } .portraitContainer { margin-top: 10px; + flex-direction: column; align-items: center; + margin-bottom: 20px; } .landscapeTabletContainer { flex: 1; margin-top: 200px; + flex-direction: column; + justify-content: flex-start; + align-items: center; } .portraitTabletContainer { margin-top: 50px; - margin-bottom: 50px; + margin-bottom: 100px; + align-items: center; } .logo { - width: 150px; - height: 150px; + width: 120px; + height: 120px; + margin-bottom: 5px; +} + +.text { + color: white; } diff --git a/app/assets/styles/blink/_RegisterBox.scss b/app/assets/styles/blink/_RegisterBox.scss index 6b52d1e..f51efae 100644 --- a/app/assets/styles/blink/_RegisterBox.scss +++ b/app/assets/styles/blink/_RegisterBox.scss @@ -1,39 +1,28 @@ .landscapeRegisterBox { flex: 1; flex-direction: row; justify-content: space-evenly; align-items: center; } .portraitRegisterBox { flex: 1; flex-direction: column; justify-content: flex-start; align-items: center; } .landscapeTabletRegisterBox { flex: 1; flex-direction: row; justify-content: space-evenly; align-items: center; } .portraitTabletRegisterBox { flex: 1; flex-direction: column; justify-content: flex-start; align-items: center; } -.recoverLink { - padding: 30px; - font-size: 14px; - text-align: center; - color: white; -} - -.footer { - justify-content: flex-end; - margin-bottom: 20px; -} diff --git a/app/assets/styles/blink/_RegisterForm.scss b/app/assets/styles/blink/_RegisterForm.scss index 1d3edd5..cccc56c 100644 --- a/app/assets/styles/blink/_RegisterForm.scss +++ b/app/assets/styles/blink/_RegisterForm.scss @@ -1,82 +1,87 @@ .landscapeContainer { display: flex; flex: 1; flex-direction: column; margin: 0 auto; padding: 20px; margin-top: 0px; } .portaitContainer { flex: 1; flex-direction: column; margin: 0 auto; } .landscapeTabletContainer { display: flex; flex: 1; flex-direction: column; margin: 0 auto; margin-top: 100px; padding: 20px; } .portaitTabletContainer { flex: 1; flex-direction: column; margin: 0 auto; } .loadingText { color: white; } .loadingContainer { padding-top: 55px; margin: 0 auto; justify-content: center; align-items: center; } .title { padding: 15px; margin: 0 auto; color: white; font-size: 36px; } .subtitle { margin: 0 auto; color: white; margin-bottom: 10px; font-size: 18px; } .row { padding: 0px 0; width: 300; margin: 0 auto; } .buttonRow { flex-direction: row; width: 300; margin: 0 auto; } .button { margin-top: 30px; border-radius: 1px; border: 1px; width: 150; margin: 0 auto; margin-top: 30px; } .input { border-radius: 0px; } - +.recoverLink { + margin-top: 20px; + font-size: 12px; + text-align: center; + color: white; +} diff --git a/app/components/Logo.js b/app/components/Logo.js index 1e06df2..bb84b03 100644 --- a/app/components/Logo.js +++ b/app/components/Logo.js @@ -1,30 +1,31 @@ import React, { Fragment } from 'react'; -import { View, Image } from 'react-native'; +import { View, Image, Text} from 'react-native'; import { Title } from 'react-native-paper'; import PropTypes from 'prop-types'; import styles from '../assets/styles/blink/_Logo.scss'; const blinkLogo = require('../assets/images/blink-white-big.png'); const Logo = (props) => { let containerClass; if (props.isTablet) { containerClass = props.orientation === 'landscape' ? styles.landscapeTabletContainer : styles.portraitTabletContainer; } else { containerClass = props.orientation === 'landscape' ? styles.landscapeContainer : styles.portraitContainer; } return ( + © AG Projects ); } Logo.propTypes = { orientation : PropTypes.string, isTablet : PropTypes.bool }; export default Logo; diff --git a/app/components/RegisterBox.js b/app/components/RegisterBox.js index 40f743c..0779a34 100644 --- a/app/components/RegisterBox.js +++ b/app/components/RegisterBox.js @@ -1,58 +1,53 @@ import React from 'react'; -import { View, Text, Linking } from 'react-native'; +import { View, Text } from 'react-native'; import PropTypes from 'prop-types'; import RegisterForm from './RegisterForm'; import Logo from './Logo'; import styles from '../assets/styles/blink/_RegisterBox.scss'; -import FooterBox from './FooterBox'; - -function handleLink(event) { - Linking.openURL('https://mdns.sipthor.net/sip_login_reminder.phtml'); -} const RegisterBox = (props) => { let containerClass; if (props.isTablet) { containerClass = props.orientation === 'landscape' ? styles.landscapeTabletRegisterBox : styles.portraitTabletRegisterBox; } else { containerClass = props.orientation === 'landscape' ? styles.landscapeRegisterBox : styles.portraitRegisterBox; } return ( + - handleLink()} style={styles.recoverLink}>Recover lost passsword... - + ); }; RegisterBox.propTypes = { handleRegistration : PropTypes.func.isRequired, registrationInProgress : PropTypes.bool, autoLogin : PropTypes.bool, orientation : PropTypes.string, isTablet : PropTypes.bool, phoneNumber : PropTypes.string }; export default RegisterBox; diff --git a/app/components/RegisterForm.js b/app/components/RegisterForm.js index af55bdd..9a830d0 100644 --- a/app/components/RegisterForm.js +++ b/app/components/RegisterForm.js @@ -1,173 +1,188 @@ import React, { Component } from 'react'; -import { View, Keyboard } from 'react-native'; +import { View, Text, Linking, Keyboard } from 'react-native'; import PropTypes from 'prop-types'; import ipaddr from 'ipaddr.js'; import autoBind from 'auto-bind'; +import FooterBox from './FooterBox'; import { Button, TextInput, Title, Subheading } from 'react-native-paper'; import EnrollmentModal from './EnrollmentModal'; import storage from '../storage'; import config from '../config'; import styles from '../assets/styles/blink/_RegisterForm.scss'; function isASCII(str) { return /^[\x00-\x7F]*$/.test(str); } +function handleLink(event) { + Linking.openURL('https://mdns.sipthor.net/sip_login_reminder.phtml'); +} + class RegisterForm extends Component { constructor(props) { super(props); autoBind(this); this.state = { accountId: '', password: '', registering: false, remember: false, showEnrollmentModal: false }; } componentDidMount() { storage.get('account').then((account) => { if (account) { this.setState(Object.assign({}, account, {remember: true})); if (this.props.autoLogin && this.state.password !== '') { this.props.handleRegistration(this.state.accountId, this.state.password); } } }); } handleAccountIdChange(value) { this.setState({accountId: value}); } handlePasswordChange(value) { this.setState({password: value}); } handleSubmit(event) { + if (!this.validInput()) { + return; + } + if (event) { event.preventDefault(); } let account = this.state.accountId; if (this.state.accountId.indexOf('@') === -1 ) { account = this.state.accountId + '@' + config.defaultDomain; } Keyboard.dismiss(); this.props.handleRegistration(account, this.state.password, true); } handleEnrollment(account) { this.setState({showEnrollmentModal: false}); if (account !== null) { this.setState({accountId: account.accountId, password: account.password, registering: true}); this.props.handleRegistration(account.accountId, account.password); } } createAccount(event) { event.preventDefault(); this.setState({showEnrollmentModal: true}); } - render() { + validInput() { const domain = this.state.accountId.indexOf('@') !== -1 ? this.state.accountId.substring(this.state.accountId.indexOf('@') + 1): ''; const validDomain = domain === '' || (!ipaddr.IPv4.isValidFourPartDecimal(domain) && !ipaddr.IPv6.isValid(domain) && domain.length > 3 && domain.indexOf('.') !== - 1 && (domain.length - 2 - domain.indexOf('.')) > 0); const validInput = isASCII(this.state.accountId) && validDomain && this.state.password !== '' && isASCII(this.state.password); + return validInput; + } + + render() { let containerClass; if (this.props.isTablet) { containerClass = this.props.orientation === 'landscape' ? styles.landscapeTabletContainer : styles.portraitTabletContainer; } else { containerClass = this.props.orientation === 'landscape' ? styles.landscapeContainer : styles.portraitContainer; } return ( Sylk Sign in to continue this.passwordInput.focus()} /> { this.passwordInput = ref; }} /> { config.enrollmentUrl ? : null } + handleLink()} style={styles.recoverLink}>Recover lost passsword... + ); } } RegisterForm.propTypes = { classes : PropTypes.object, handleRegistration : PropTypes.func.isRequired, registrationInProgress : PropTypes.bool.isRequired, autoLogin : PropTypes.bool, orientation : PropTypes.string, isTablet : PropTypes.bool, phoneNumber : PropTypes.string }; export default RegisterForm;