haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[RN] Make feature dialogs branded: authentication

This commit is contained in:
Bettenbuk Zoltan 2018-10-18 10:30:25 +02:00 committed by Saúl Ibarra Corretgé
parent 22a602768c
commit 9645de33bc
4 changed files with 46 additions and 105 deletions

3
lang/main.json
View File

@ -319,7 +319,8 @@
"alreadySharedVideoMsg": "Another member is already sharing a video. This conference allows only one shared video at a time.",
"alreadySharedVideoTitle": "Only one shared video is allowed at a time",
"WaitingForHost": "Waiting for the host ...",
"WaitForHostMsg": "The conference <b>__room__ </b> has not yet started. If you are the host then please authenticate. Otherwise, please wait for the host to arrive.",
"WaitForHostMsg": "The conference <b>__room__</b> has not yet started. If you are the host then please authenticate. Otherwise, please wait for the host to arrive.",
"WaitForHostMsgWOk": "The conference <b>__room__</b> has not yet started. If you are the host then please press Ok to authenticate. Otherwise, please wait for the host to arrive.",
"IamHost": "I am the host",
"Cancel": "Cancel",
"Submit": "Submit",

46
react/features/authentication/components/LoginDialog.native.js
View File

@ -5,7 +5,12 @@ import { Text, TextInput, View } from 'react-native';
import { connect as reduxConnect } from 'react-redux';
import { connect, toJid } from '../../base/connection';
import { Dialog } from '../../base/dialog';
import {
CustomSubmitDialog,
FIELD_UNDERLINE,
PLACEHOLDER_COLOR,
inputDialog as inputDialogStyle
} from '../../base/dialog';
import { translate } from '../../base/i18n';
import { JitsiConnectionErrors } from '../../base/lib-jitsi-meet';
@ -162,37 +167,46 @@ class LoginDialog extends Component<Props, State> {
}
}
const showMessage = messageKey || connecting;
const message = messageKey
? t(messageKey, messageOptions)
: connecting
? t('connection.CONNECTING')
: '';
return (
<Dialog
<CustomSubmitDialog
okDisabled = { connecting }
onCancel = { this._onCancel }
onSubmit = { this._onLogin }
titleKey = 'dialog.passwordRequired'>
onSubmit = { this._onLogin }>
<View style = { styles.loginDialog }>
<TextInput
autoCapitalize = { 'none' }
autoCorrect = { false }
onChangeText = { this._onUsernameChange }
placeholder = { 'user@domain.com' }
style = { styles.dialogTextInput }
placeholderTextColor = { PLACEHOLDER_COLOR }
style = { inputDialogStyle.field }
underlineColorAndroid = { FIELD_UNDERLINE }
value = { this.state.username } />
<TextInput
onChangeText = { this._onPasswordChange }
placeholder = { t('dialog.userPassword') }
placeholderTextColor = { PLACEHOLDER_COLOR }
secureTextEntry = { true }
style = { styles.dialogTextInput }
style = { [
inputDialogStyle.field,
inputDialogStyle.bottomField
] }
underlineColorAndroid = { FIELD_UNDERLINE }
value = { this.state.password } />
<Text style = { styles.dialogText }>
{
messageKey
? t(messageKey, messageOptions)
: connecting
? t('connection.CONNECTING')
: ''
}
</Text>
{ showMessage && (
<Text style = { styles.dialogText }>
{ message }
</Text>
) }
</View>
</Dialog>
</CustomSubmitDialog>
);
}

76
react/features/authentication/components/WaitForOwnerDialog.native.js
View File

@ -1,14 +1,12 @@
// @flow
import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { Dialog } from '../../base/dialog';
import { ConfirmDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { cancelWaitForOwner, _openLoginDialog } from '../actions';
import styles from './styles';
/**
* The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
@ -60,22 +58,19 @@ class WaitForOwnerDialog extends Component<Props> {
*/
render() {
const {
_room: room,
t
_room: room
} = this.props;
return (
<Dialog
okTitleKey = { 'dialog.IamHost' }
onCancel = { this._onCancel }
onSubmit = { this._onLogin }
titleKey = 'dialog.WaitingForHost'>
<Text style = { styles.waitForOwnerDialog }>
<ConfirmDialog
contentKey = {
{
this._renderHTML(t('dialog.WaitForHostMsg', { room }))
key: 'dialog.WaitForHostMsgWOk',
params: { room }
}
</Text>
</Dialog>
}
onCancel = { this._onCancel }
onSubmit = { this._onLogin } />
);
}
@ -102,59 +97,6 @@ class WaitForOwnerDialog extends Component<Props> {
_onLogin() {
this.props.dispatch(_openLoginDialog());
}
/**
* Renders a specific {@code string} which may contain HTML.
*
* @param {string|undefined} html - The {@code string} which may
* contain HTML to render.
* @returns {ReactElement[]|string}
*/
_renderHTML(html: ?string) {
if (typeof html === 'string') {
// At the time of this writing, the specified HTML contains a couple
// of spaces one after the other. They do not cause a visible
// problem on Web, because the specified HTML is rendered as, well,
// HTML. However, we're not rendering HTML here.
// eslint-disable-next-line no-param-reassign
html = html.replace(/\s{2,}/gi, ' ');
// Render text in <b>text</b> in bold.
const opening = /<\s*b\s*>/gi;
const closing = /<\s*\/\s*b\s*>/gi;
let o;
let c;
let prevClosingLastIndex = 0;
const r = [];
// eslint-disable-next-line no-cond-assign
while (o = opening.exec(html)) {
closing.lastIndex = opening.lastIndex;
// eslint-disable-next-line no-cond-assign
if (c = closing.exec(html)) {
r.push(html.substring(prevClosingLastIndex, o.index));
r.push(
<Text style = { styles.boldDialogText }>
{ html.substring(opening.lastIndex, c.index) }
</Text>);
opening.lastIndex
= prevClosingLastIndex
= closing.lastIndex;
} else {
break;
}
}
if (prevClosingLastIndex < html.length) {
r.push(html.substring(prevClosingLastIndex));
}
return r;
}
return html;
}
}
/**

26
react/features/authentication/components/styles.js
View File

@ -1,4 +1,4 @@
import { BoxModel, createStyleSheet } from '../../base/styles';
import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
/**
* The style common to {@code LoginDialog} and {@code WaitForOwnerDialog}.
@ -13,38 +13,22 @@ const dialog = {
* {@code WaitForOwnerDialog}.
*/
const text = {
color: ColorPalette.white
};
/**
* The styles of the authentication feature.
*/
export default createStyleSheet({
/**
* The style of bold {@code Text} rendered by the {@code Dialog}s of the
* feature authentication.
*/
boldDialogText: {
...text,
fontWeight: 'bold'
},
/**
* The style of {@code Text} rendered by the {@code Dialog}s of the
* feature authentication.
*/
dialogText: {
...text
},
/**
* The style of {@code TextInput} rendered by the {@code Dialog}s of the
* feature authentication.
*/
dialogTextInput: {
// XXX Matches react-native-prompt's dialogInput because base/dialog's
// Dialog is implemented using react-native-prompt.
fontSize: 18,
height: 50
...text,
margin: BoxModel.margin,
marginTop: BoxModel.margin * 2
},
/**