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;