pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

things seem to work

Browse Source
This commit is contained in:
or-else
2018-10-26 14:45:50 +03:00
parent 3e3dbd7fdb
commit 25021a866d
19 changed files with 272 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.babelrc
+1
View File
@@ -1,5 +1,6 @@
{
"presets": ["@babel/preset-react", "@babel/preset-env"],
"comments": false,
"plugins": [
["react-intl", {
"messagesDir": "./src/i18n/"
firebase-init.js
+9
View File
@@ -0,0 +1,9 @@
// Get these values for your project from the https://console.firebase.google.com/
const FIREBASE_INIT = {
// Project Settings -> Cloud Messaging, "Sender ID".
messagingSenderId: "114126160546",
// Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates.
// This value IS NOT included in the generated js config you can download from
// the firebase console. It needs to be added separately.
messagingVapidKey: "BOgQVPOMzIMXUpsYGpbVkZoEBc0ifKY_f2kSU5DNDGYI6i6CoKqqxDd7w7PJ3FaGRBgVGJffldETumOx831jl58"
};
index-dev.html
+1 -1
View File
@@ -32,7 +32,7 @@
<body>
<div id="mountPoint"></div>
<!-- the application -->
<script src="firebase-init.js"></script>
<script src="umd/index.dev.js"></script>
</body>
</html>
index.html
+1 -1
View File
@@ -26,7 +26,7 @@
</head>
<body>
<div id="mountPoint"></div>
<script src="/firebase-init.js"></script>
<script src="firebase-init.js"></script>
<script src="umd/index.prod.js"></script>
</body>
</html>
package-lock.json
Generated
+34
View File
@@ -1735,6 +1735,34 @@
"pako": "~1.0.5"
}
},
"browserslist": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.3.3.tgz",
"integrity": "sha512-6h84UD1mmHeuQ9IucX6yzBc+KBYcBBTLYt2CXtY7GYCra6iE5kOm7oM+zuGw/0tjGtbJxjm58OvxSBmogEMCRQ==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30000898",
"electron-to-chromium": "^1.3.81",
"node-releases": "^1.0.0-alpha.15"
},
"dependencies": {
"caniuse-lite": {
"version": "1.0.30000899",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000899.tgz",
"integrity": "sha512-enC3zKfUCJxxwvUIsBkbHd54CtJw1KtIWvrK0JZxWD/fEN2knHaai45lndJ4xXAkyRAPyk60J3yagkKDWhfeMA==",
"dev": true
},
"node-releases": {
"version": "1.0.0-alpha.15",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.15.tgz",
"integrity": "sha512-hKG6hd/g6a9OV/ARt2qrxbRhe/4WEMFohTLOB9PNyTYvvI59gICZFzt9/mMgpYUTts06qXlN8H6UjfbIRdnW8A==",
"dev": true,
"requires": {
"semver": "^5.3.0"
}
}
}
},
"buffer": {
"version": "4.9.1",
"resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -2711,6 +2739,12 @@
"stream-shift": "^1.0.0"
}
},
"electron-to-chromium": {
"version": "1.3.82",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.82.tgz",
"integrity": "sha512-NI4nB2IWGcU4JVT1AE8kBb/dFor4zjLHMLsOROPahppeHrR0FG5uslxMmkp/thO1MvPjM2xhlKoY29/I60s0ew==",
"dev": true
},
"elliptic": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
package.json
+10 -7
View File
@@ -8,8 +8,8 @@
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-plugin-react-intl": "^3.0.1",
"browserslist": "^4.3.3",
"cssnano": "^4.0.5",
"uglify-es": "^3.3.9",
"webpack": "^4.22.0",
"webpack-cli": "^3.1.2"
},
@@ -18,17 +18,20 @@
"url": "https://github.com/tinode/example-react-js.git"
},
"scripts": {
"build": "npm run vers && npm run build:babel && npm run build:prod && npm run build:dev && npm run build:css",
"build:prod": "browserify ./src/index.js --standalone Webapp | uglifyjs --compress --mangle > ./umd/index.prod.js",
"build:dev": "browserify ./src/index.js --standalone Webapp > ./umd/index.dev.js",
"build": "npm run vers && npm run build:prod && npm run build:dev && npm run build:css && npm run build:i18n",
"build:css": "postcss css/base.css > css/base.min.css",
"wp-build:dev": "webpack --mode development --output-library-target umd --output ./umd/index.dev.js",
"wp-build:prod": "webpack --mode production --output-library-target umd --output ./umd/index.prod.js",
"build:dev": "webpack --mode development --output-library-target umd --output ./umd/index.dev.js",
"build:prod": "webpack --mode production --output-library-target umd --output ./umd/index.prod.js",
"build:i18n": "node scripts/flatten-messages.js",
"vers": "node scripts/gen-version.js"
},
"files": [
"src/index.js",
"src/components/*.jsx",
"src/config.js",
"src/views/*.jsx",
"src/widgets/*.jsx",
"src/lib/*.js",
"src/i18n/*.json",
"umd/index.prod.js",
"umd/index.dev.js",
"audio/msg.mp3",
scripts/flatten-messages.js
+29
View File
@@ -0,0 +1,29 @@
// Flattens messages extracted via the React Intl Babel plugin. An error will be
// thrown if there are messages with the same `id`. The result is a file containing
// `id: message` pairs in "en" locale.
var fs = require('fs');
var path = require('path');
var globSync = require('glob').sync;
var mkdirpSync = require('mkdirp').sync;
const MESSAGES_PATTERN = './src/i18n/src/**/*.json';
const LANG_DIR = './src/i18n/';
let messages = globSync(MESSAGES_PATTERN)
.map((filename) => fs.readFileSync(filename, 'utf8'))
.map((file) => JSON.parse(file))
.reduce((collection, descriptors) => {
descriptors.forEach(({id, defaultMessage}) => {
if (collection.hasOwnProperty(id)) {
throw new Error(`Duplicate message id: ${id}`);
}
collection[id] = defaultMessage;
});
return collection;
}, {});
let filename = path.join(LANG_DIR, 'en.json');
mkdirpSync(path.dirname(filename));
fs.writeFileSync(filename, JSON.stringify(messages, null, 2));
service-worker.js
+1 -3
View File
@@ -1,9 +1,7 @@
// Must be located at the root.
importScripts('https://unpkg.com/firebase@5.5.5/firebase-app.js');
importScripts('https://unpkg.com/firebase@5.5.5/firebase-messaging.js');
importScripts('/src/firebase-init.json');
console.log("FIREBASE_INIT", FIREBASE_INIT);
importScripts('/src/firebase-init.js');
firebase.initializeApp(FIREBASE_INIT);
src/config.js
-4
View File
@@ -50,7 +50,3 @@ export const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
// Maximum allowed linear dimension of an inline image in pixels. You may want
// to adjust it to 1600 or 2400 for production.
export const MAX_IMAGE_DIM = 768;
// Supported image MIME types and corresponding file extensions.
export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
export const MIME_EXTENSIONS = ['jpg', 'gif', 'png', 'svg', 'svg'];
src/i18n/en.json
+13 -2
View File
@@ -1,9 +1,20 @@
{
"contacts_not_found": "You have no chats<br />¯\\\\_(ツ)_/¯",
"email_prompt": "Email, e.g. jdoe@example.com",
"full_name_prompt": "Full name, e.g. John Doe",
"sign_up_button": "Sign up",
"login_prompt": "Login",
"password_prompt": "Password",
"stay_logged_in": "Stay logged in",
"forgot_password_link": "Forgot password?",
"sign_in_button": "Sign in",
"label_client": "Client:",
"label_server": "Server:"
}
"label_server": "Server:",
"sidepanel_title_login": "Sign In",
"sidepanel_title_register": "Create Account",
"sidepanel_title_settings": "Settings",
"sidepanel_title_edit_account": "Edit Account",
"sidepanel_title_newtpk": "Start New Chat",
"sidepanel_title_cred": "Confirm Credentials",
"sidepanel_title_reset": "Reset Password"
}
src/i18n/ru.json
+12 -1
View File
@@ -1,9 +1,20 @@
{
"contacts_not_found": "Чатов нет<br />¯\\\\_(ツ)_/¯",
"email_prompt": "Email, напр. ivan@example.com",
"full_name_prompt": "Полное имя, напр. Иван Петров",
"sign_up_button": "Создать счет",
"login_prompt": "Логин",
"password_prompt": "Пароль",
"stay_logged_in": "Запомнить",
"forgot_password_link": "Напомнить пароль",
"sign_in_button": "Войти",
"label_client": "Клиент:",
"label_server": "Сервер:"
"label_server": "Сервер:",
"sidepanel_title_login": "Авторизация",
"sidepanel_title_register": "Зарегистрироваться",
"sidepanel_title_settings": "Настройки",
"sidepanel_title_edit_account": "Редактировать счет",
"sidepanel_title_newtpk": "Новый чат",
"sidepanel_title_cred": "Подтвердить",
"sidepanel_title_reset": "Сменить пароль"
}
src/lib/blob-helpers.js
+4
View File
@@ -1,5 +1,9 @@
// File and image helper functions.
// Supported image MIME types and corresponding file extensions.
export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
export const MIME_EXTENSIONS = ['jpg', 'gif', 'png', 'svg', 'svg'];
// Make a data URL from public.photo
export function makeImageUrl(photo) {
return (photo && photo.type && photo.data) ?
src/views/contacts-view.jsx
+12 -2
View File
@@ -1,9 +1,18 @@
/* ContactsView holds all contacts-related stuff */
import React from 'react';
import { defineMessages } from 'react-intl';
import ContactList from '../widgets/contact-list.jsx';
// Panel titles for translation.
const messages = defineMessages({
'contacts_not_found': {
id: 'contacts_not_found',
description: 'HTML message shown in ContactList when no contacts are found',
defaultMessage: 'You have no chats<br />¯\\\\_(ツ)_/¯'
}
});
export default class ContactsView extends React.Component {
constructor(props) {
super(props);
@@ -28,11 +37,12 @@ export default class ContactsView extends React.Component {
}
render() {
const {formatMessage} = this.props.intl;
return (
<ContactList
connected={this.props.connected}
contacts={this.state.contactList}
emptyListMessage={<span>You have no chats<br />¯\_(ツ)_/¯</span>}
emptyListMessage={<span>{formatHTMLMessage(messages.contacts_not_found)}</span>}
topicSelected={this.props.topicSelected}
myUserId={this.props.myUserId}
showOnline={true}
src/views/create-account-view.jsx
+25 -9
View File
@@ -1,11 +1,24 @@
/* Account registration */
// Account registration.
import React from 'react';
import { FormattedMessage, defineMessages } from 'react-intl';
import AvatarUpload from '../widgets/avatar-upload.jsx';
import CheckBox from '../widgets/checkbox.jsx';
import VisiblePassword from '../widgets/visible-password.jsx';
const messages = defineMessages({
'email_prompt': {
id: 'email_prompt',
description: 'Input placeholder for email entry',
defaultMessage: 'Email, e.g. jdoe@example.com'
},
'full_name_prompt': {
id: 'full_name_prompt',
description: 'Input placeholder for person\'s full name',
defaultMessage: 'Full name, e.g. John Doe'
}
});
export default class CreateAccountView extends React.PureComponent {
constructor(props) {
super(props);
@@ -66,17 +79,18 @@ export default class CreateAccountView extends React.PureComponent {
}
render() {
var submitClasses = 'blue';
let submitClasses = 'blue';
if (this.props.disabled) {
submitClasses += ' disabled';
}
const {formatMessage} = this.props.intl;
return (
<form className="panel-form-column" onSubmit={this.handleSubmit}>
<div className="panel-form-row">
<div className="panel-form-column">
<input type="text" placeholder="Login" autoComplete="user-name"
<input type="text" placeholder="{formatMessage({id: 'login_prompt'})}" autoComplete="user-name"
value={this.state.login} onChange={this.handleLoginChange} required autoFocus />
<VisiblePassword placeholder="Password" autoComplete="new-password"
<VisiblePassword placeholder="{formatMessage({id: 'password_prompt'})}" autoComplete="new-password"
value={this.state.password} onFinished={this.handlePasswordChange}
required={true} />
</div>
@@ -85,20 +99,22 @@ export default class CreateAccountView extends React.PureComponent {
onError={this.props.onError} />
</div>
<div className="panel-form-row">
<input type="text" placeholder="Full name, e.g. John Doe" autoComplete="name"
<input type="text" placeholder="{formatMessage(messages.full_name_prompt)}" autoComplete="name"
value={this.state.fn} onChange={this.handleFnChange} required/>
</div>
<div className="panel-form-row">
<input type="email" placeholder="Email, e.g john.doe@example.com"
<input type="email" placeholder="{formatMessage(messages.email_prompt)}"
autoComplete="email" value={this.state.email} onChange={this.handleEmailChange} required/>
</div>
<div className="panel-form-row">
<CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
onChange={this.handleToggleSaveToken} />
<label htmlFor="save-token">&nbsp;Stay logged in</label>
<label htmlFor="save-token">&nbsp;{formatMessage({id: 'stay_logged_in'})}</label>
</div>
<div className="dialog-buttons">
<button className={submitClasses} type="submit">Sign up</button>
<button className={submitClasses} type="submit">
<FormattedMessage id="sign_up_button" defaultMessage="Sign up" />
</button>
</div>
</form>
);
src/views/sidepanel-view.jsx
+57 -38
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { defineMessages } from 'react-intl';
import SideNavbar from '../widgets/side-navbar.jsx';
import ErrorPanel from '../widgets/error-panel.jsx';
@@ -12,6 +13,45 @@ import PasswordResetView from './password-reset-view.jsx';
import SettingsView from './settings-view.jsx';
import ValidationView from './validation-view.jsx';
// Panel titles for translation.
const messages = defineMessages({
'login': {
id: 'sidepanel_title_login',
description: 'Sidepanel title for LoginView.',
defaultMessage: 'Sign In'
},
'register': {
id: 'sidepanel_title_register',
description: 'Sidepanel title for CreateAccountView.',
defaultMessage: 'Create Account'
},
'settings': {
id: 'sidepanel_title_settings',
description: 'Sidepanel title for SettingsView.',
defaultMessage: 'Settings'
},
'edit': {
id: 'sidepanel_title_edit_account',
description: 'Sidepanel title for EditAccountView.',
defaultMessage: 'Edit Account'
},
'newtpk': {
id: 'sidepanel_title_newtpk',
description: 'Sidepanel title for NewTopicView.',
defaultMessage: 'Start New Chat'
},
'cred': {
id: 'sidepanel_title_cred',
description: 'Sidepanel title for ValidationView.',
defaultMessage: 'Confirm Credentials'
},
'reset': {
id: 'sidepanel_title_reset',
description: 'Sidepanel title for PasswordResetView.',
defaultMessage: 'Reset Password'
}
});
export default class SidepanelView extends React.Component {
constructor(props) {
super(props);
@@ -24,44 +64,23 @@ export default class SidepanelView extends React.Component {
}
render() {
var title = null;
var avatar = false;
var onCancel = undefined;
var view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
switch (view) {
case 'login':
title = "Sign In";
break;
case 'register':
title = "Create Account";
onCancel = this.props.onCancel;
break;
case 'settings':
title = "Settings";
onCancel = this.props.onCancel;
break;
case 'edit':
title = "Edit Account";
onCancel = this.props.onCancel;
break;
case 'contacts':
title = this.props.title;
avatar = this.props.avatar ? this.props.avatar : true;
break;
case 'newtpk':
title = "Start New Chat";
onCancel = this.props.onCancel;
break;
case 'cred':
title = "Confirm Credentials";
onCancel = this.props.onCancel;
break;
case 'reset':
title = "Reset Password";
onCancel = this.props.onCancel;
break;
default:;
};
const {formatMessage} = this.props.intl;
const view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
let title, avatar;
if (view == 'contacts') {
title = this.props.title;
avatar = this.props.avatar ? this.props.avatar : true;
} else {
title = formatMessage(messages[view]);
avatar = false;
}
let onCancel;
if (view != 'login') {
onCancel = this.props.onCancel;
}
return (
<div id="sidepanel" className={this.props.hideSelf ? 'nodisplay' : null}>
<SideNavbar
src/views/tinode-web.jsx
-1
View File
@@ -3,7 +3,6 @@ import React from 'react';
import 'firebase/app';
import 'firebase/messaging';
import { FIREBASE_INIT } from '../firebase-init.json';
import Tinode from 'tinode-sdk';
src/views/validation-view.jsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default class ValidationView extends React.PureComponent {
}
render() {
var methods = {'email': 'email', 'tel': 'phone'};
var methods = {'email': "email", 'tel': "phone"};
var method = methods[this.props.credMethod] || this.props.credMethod;
return (
<div className="panel-form">
umd/index.dev.js
+56 -67
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+6 -6
View File
File diff suppressed because one or more lines are too long