{ isMentions
? 'User'
:'Emoji'
} matching "{chat.suggestionWord}"
↑↓ to navigate
↵ to select
{ isMentions
?
// {(room.messages || []).map(message => {
// let fromMe = (message.from === username);
// return (
//
// )
// }
// }
export default ChatRoom;
================================================
FILE: src/components/chat/EmojiSuggestions.js
================================================
import React from 'react';
import { connect } from 'react-redux';
import { addSuggestion } from '../../store/actions/chatActions';
import emoji from '../../utils/emoji_convertor';
import md from '../../utils/link_attr_blank';
import { scrollIntoViewOptions } from '../../utils/suggestions';
const EmojiSuggestions = ({ addSuggestion, chat }) => (
// {message.from}: {message.msg}
//
// )
// })}
// -
{chat.suggestions.map((emoj, i) => {
const suggestion = emoji.replace_colons(emoj.name) + emoj.name;
const suggestionMD = suggestion.replace(/<\/span>/g, '');
const renderItem = md.renderInline(suggestionMD);
const activeItem = chat.highlightedSuggestion === i;
let props = {
key : i,
onClick : (e) => addSuggestion(emoj.name),
className : activeItem ? 'active': '',
};
if (activeItem) {
props.ref = (item) => {
if (item) item.scrollIntoView(scrollIntoViewOptions);
};
}
return ();
})}
-
{chat.suggestions.map((user, i) => {
const activeItem = chat.highlightedSuggestion === i;
const mention = user.name;
let props = {
key : i,
onClick : (e) => addSuggestion(mention),
className : activeItem ? 'active': '',
};
if (activeItem) {
props.ref = (item) => {
if (item) item.scrollIntoView(scrollIntoViewOptions);
};
}
return
-
{mention.slice(1)} ;
})}
-
{messages.map((message, i) => {
return (
-
{userStatuses.map((userStatus, i) => {
return (
-
{showSharingModal && setShowSharingModal(false)} />}
{/* */}
{/* */}
setShowSharingModal(true)} />
{showSharingModal && setShowSharingModal(false)} />}
);
};
InviteIcon.propTypes = {};
export default InviteIcon;
================================================
FILE: src/components/chat/toolbar/OpenSearchIcon.js
================================================
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
import { FaSearch } from 'react-icons/fa';
import SearchModal from '../../modals/SearchModal';
const OpenSearchIcon = ({ username, messages }) => {
const [showSearchModal, setShowSearchModal] = useState(false);
const openTooltip = (
{/* */}
{/* */}
setShowSearchModal(true)} />
{showSearchModal && setShowSearchModal(false)} />}
);
};
OpenSearchIcon.propTypes = {
username: PropTypes.string.isRequired,
messages: PropTypes.array.isRequired,
};
export default OpenSearchIcon;
================================================
FILE: src/components/chat/toolbar/ToggleAudioIcon.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
import { FaVolumeUp } from 'react-icons/fa';
import { FaVolumeMute } from 'react-icons/fa';
import { disableAudio, enableAudio } from '../../../store/actions/settingsActions';
const disableAudioTooltip = (
{isAudioEnabled && disableAudio()} />}
{!isAudioEnabled && enableAudio()} />}
);
};
ToggleAudioIcon.propTypes = {};
const mapStateToProps = (reduxState) => {
return {
isAudioEnabled: reduxState.settings.isAudioEnabled,
};
};
const mapDispatchToProps = (dispatch) => {
return {
enableAudio: () => dispatch(enableAudio()),
disableAudio: () => dispatch(disableAudio()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ToggleAudioIcon);
================================================
FILE: src/components/general/AlertContainer.js
================================================
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Alert } from 'react-bootstrap';
import { dismissAlert } from '../../store/actions/alertActions';
// https://v4-alpha.getbootstrap.com/components/alerts/#examples
const alertStyles = ['success', 'danger', 'warning', 'info'];
const AlertContainer = ({
alertMessage,
alertStyle,
dismissAlert,
alertRenderSeconds,
}) => {
if (!alertStyles.includes(alertStyle)){
alertStyle = 'success';
}
if (alertRenderSeconds && alertRenderSeconds > 0) {
// auto-dismiss option
setTimeout(() => {
dismissAlert();
}, alertRenderSeconds * 1000);
}
return (
{alertMessage &&
{alertMessage}
}
);
};
AlertContainer.propTypes = {};
const mapStateToProps = (reduxState) => {
return {
...reduxState.alert,
};
};
const mapDispatchToProps = (dispatch) => {
return {
dismissAlert: () => dispatch(dismissAlert()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(AlertContainer);
================================================
FILE: src/components/general/Throbber.js
================================================
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const throbberDotStyles = {
'margin': '10px',
'height': '20px',
'width': '20px',
'borderRadius': '10px',
'backgroundColor': '#999',
'float': 'left',
'transform': 'scale(0.7)'
};
class Throbber extends Component {
componentDidMount(){
this.animateLoadingDots();
}
// this is messy, just a test animating react elements
// by their ref directly.
animateLoadingDots(){
let keyframes = [
{ 'transform': 'scale(0.7)' },
{ 'transform': 'scale(1.0)' },
{ 'transform': 'scale(0.7)' },
];
let properties = {
duration: 1000,
iterations: Infinity
};
let firstDot = ReactDOM.findDOMNode(this.refs.firstDot);
firstDot.animate(keyframes, properties);
properties['delay'] = 200;
let secondDot = ReactDOM.findDOMNode(this.refs.secondDot);
secondDot.animate(keyframes, properties);
properties['delay'] = 400;
let thirdDot = ReactDOM.findDOMNode(this.refs.thirdDot);
thirdDot.animate(keyframes, properties);
}
render(){
return (
{(this.props.room.messages || []).map(message => {
let fromMe = (message.from === username);
return (
);
}
}
export default ChatRoom;
================================================
FILE: src/components/layout/Header.js
================================================
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import UserIcon from '../chat/UserIcon';
import UserList from '../chat/UserList';
import Logo from './Logo';
import Settings from './Settings';
import Info from './Info';
import { closePicker } from '../../store/actions/chatActions';
const Header = ({
username,
onToggleModalVisibility
}) => {
const [showUserList, setShowUserList] = useState(false);
const onToggleUserList = () => {
setShowUserList((current) => !current);
};
return (
{message.from}: {message.msg}
);
})}
LeapChat
);
};
export default Logo;
================================================
FILE: src/components/layout/Settings.js
================================================
import React, { useState } from 'react';
import { PropTypes } from 'prop-types';
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
import { FaCog } from 'react-icons/fa';
import SettingsModal from '../modals/SettingsModal';
const settingsTooltip = (
{/* */}
{/* */}
setShowSettingsModal(true)} />
{showSettingsModal && setShowSettingsModal(false)} />}
);
};
Settings.propTypes = {};
export default Settings;
================================================
FILE: src/components/modals/InfoModal.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'react-bootstrap';
const InfoModal = ({ isVisible, onClose }) => {
return (
Welcome to LeapChat!
LeapChat: encrypted, ephemeral, in-browser chat.
Just visit leapchat.org and a new, secure chat room will instantly be created for you. And once you're in, just link people to that page to invite them to join you!
Why LeapChat?
You shouldn't have to sacrifice your privacy and personal information just to chat online. Slack, HipChat, and others make you create an account with your email address, their software doesn't encrypt your messages (they can see everything), and the messages last forever unless you manually delete them. In contrast, LeapChat does encrypt your messages (even we can't see them!), doesn't require you to hand over your email address, and messages last for a maximum of 90 days (this will soon be configurable to a shorter duration). Plus, you can host LeapChat on your own server, since it's open source!
How does it work?
When you click on a link to a LeapChat room:
- Your browser loads the HTML, CSS, and JavaScript from the server (e.g., leapchat.org)
- That JavaScript code then grabs the long passphrase at the end of the URL (the "URL hash" -- everything after the `#`), then passes it to miniLock, which then deterministically generates a keypair from that passphrase
- That cryptographic keypair is then used by your browser (and every other chat participant) to encrypt and decrypt messages to and from the people you're chatting with
Can I type markdown in my messages?
Yup! To learn about Markdown syntax, like surrounding words with **double asterisks** to make them bold, or with _underscores_ to make them italicized, check out this guide.
{ this.pincodeInput = input; }}
defaultValue={pincode}
placeholder="Enter pincode or password"
onKeyPress={this.onPincodeKeyPress}
autoFocus={true} />
Simple! The search happens entirely in the browser. So you can rest easy.
{isLoadingResults &&
Loading results...
-
{searchResults.map((result, i) => {
return
Feedback
Do you have feedback or suggestions on how we can improve LeapChat? We're listening!{' '}
Share your feedback here.{' '}
Danger Zone
By clicking here, you will delete all messages in this chat from the server, for all users, forever.
Share Link
Invite with a link shared via SMS, Email, etc.
Copy Link
Invite with a link copied to your clipboard.
Cranking a bunch of gears.
); if (connecting) { progress = 50; statusMessage =Creating a secure connection with LeapChat servers.
; } else if (connected) { progress = 95; statusMessage =Connected!
; } return (
{/* username is empty on initial page load, not on subsequent 'edit username' opens */}
{!username && isNewRoom &&
New room created!
}
{!username && !isNewRoom &&
Successfully joined room!
}
{failMessage &&
Invalid Username: {failMessage}}
{!connected && Invalid Username: {failMessage}
{statusMessage}
}