Options
24 |
29 | );
30 | }
31 | }
32 |
33 | export default Options;
34 |
--------------------------------------------------------------------------------
/app/src/utilities/auth.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery';
2 |
3 | let failedAuthErrors = function (errors) {
4 | $(".submit").removeClass("disabled").prop("disabled", false);
5 |
6 | let [usernameErrors, passwordErrors] = [[], []];
7 |
8 | errors.forEach (function (err) {
9 | switch (err[0]) {
10 | case "username":
11 | usernameErrors.push(err[1][0]);
12 | $(".form-username-input").addClass("invalid");
13 | break;
14 | case "password":
15 | passwordErrors.push(err[1][0]);
16 | if (!$(".login-form-password-input").hasClass("invalid")) {
17 | $(".form-password-input").addClass("invalid");
18 | }
19 | break;
20 | }
21 | });
22 |
23 | return [usernameErrors, passwordErrors];
24 | };
25 |
26 | let removeInvalidClass = function (className) {
27 | if ($(`.${ className }`).hasClass("invalid")) {
28 | $(`.${ className }`).removeClass("invalid");
29 | }
30 | };
31 |
32 | export { failedAuthErrors, removeInvalidClass };
33 |
--------------------------------------------------------------------------------
/app/api/models/session.py:
--------------------------------------------------------------------------------
1 | from app import db
2 | import uuid
3 |
4 | class Session(db.Document):
5 | username = db.StringField(max_length=255, required=True)
6 | session_token = db.StringField(max_length=255, required=True)
7 |
8 | @classmethod
9 | def generate_session_token(cls):
10 | return str(uuid.uuid1())
11 |
12 | @classmethod
13 | def find_by_session_token(cls, session_token):
14 | return User.objects(session_token = session_token)
15 |
16 | @classmethod
17 | def destroy(cls, session):
18 | if session.delete():
19 | return True
20 | else:
21 | return False
22 |
23 | def reset_session_token(self):
24 | self.session_token = Session.generate_session_token()
25 | self.save()
26 | return self.session_token
27 |
28 | def __repr__(self):
29 | return '-
25 |
- Update Profile 26 |
- Logout 27 |
18 | 
23 | 
28 |
20 |
28 | );
29 | }
30 | }
31 |
32 | export default NavBar;
33 |
--------------------------------------------------------------------------------
/app/src/components/chat/chat_room.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class ChatRoom extends React.Component {
4 | constructor (props, context) {
5 | super(props, contextTypes);
6 | this.changeMessage = this.changeMessage.bind(this);
7 | this.handleKeyPress = tihs.handleKeyPress.bind(this);
8 | this.handleMessageSubmission = this.handleMessageSubmission.bind(this);
9 | }
10 |
11 | handleKeyPress (e) {
12 | if (e.charCode === 13) { this.handleMessageSubmission(); }
13 | }
14 |
15 | handleMessageSubmission (e) {
16 | socket.emit('global chat request', { data: e.currentTarget.value });
17 | }
18 |
19 | render () {
20 | return (
21 |
21 | 
23 |
27 |
23 |
22 |
23 |
29 |
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/app/api/controllers/socket_controller.py:
--------------------------------------------------------------------------------
1 | from flask import request
2 | # from flask import session, jsonify
3 | from flask.ext.socketio import emit, join_room, leave_room, close_room, rooms, disconnect
4 | from app import app, socketio
5 | from app.api.controllers import application_controller
6 | import pdb
7 |
8 | @socketio.on('private chat request', namespace='/chat')
9 | def private_message(message):
10 | emit('private chat response', {'data': message['data']})
11 |
12 | @socketio.on('global chat request', namespace='/chat')
13 | def global_message(message):
14 | emit('global chat response', {'data': message['data']}, broadcast=True)
15 |
16 | @socketio.on('connect', namespace='/chat')
17 | def connect():
18 | username = request.args.get('username')
19 | emit('a user connected', { 'broadcast': "{0} connected".format(username),
20 | 'username': username}, broadcast=True)
21 |
22 | @socketio.on('disconnect', namespace='/chat')
23 | def disconnect():
24 | username = request.args.get('username')
25 | emit('a user disconnected', { 'broadcast': "{0} disconnected".format(username),
26 | 'username': username}, broadcast=True)
27 | print('Client disconnected', request.sid)
28 |
--------------------------------------------------------------------------------
/app/src/stores/user_autocomplete_store.js:
--------------------------------------------------------------------------------
1 | import AppDispatcher from '../dispatcher/dispatcher.js';
2 | import SearchConstants from "../constants/search_constants.js";
3 | import EventEmitter from 'eventemitter3';
4 |
5 | const CHANGE_EVENT = "change";
6 |
7 | class UserSearchAutoCompleteStore extends EventEmitter {
8 | constructor () {
9 | super();
10 | this.users = [];
11 | }
12 |
13 | addChangeListener (callback) {
14 | this.on(CHANGE_EVENT, callback);
15 | }
16 |
17 | removeChangeListener (callback) {
18 | this.removeListener(CHANGE_EVENT, callback);
19 | }
20 |
21 | get () {
22 | return this.users.slice();
23 | }
24 |
25 | set (users) {
26 | this.users = users;
27 | }
28 | }
29 |
30 | const userSearchAutoCompleteStore = new UserSearchAutoCompleteStore();
31 |
32 | AppDispatcher.register(function (payload) {
33 | switch (payload.actionType) {
34 | case SearchConstants.RECEIVE_USERS:
35 | userSearchAutoCompleteStore.set(payload.users);
36 |
37 | if (!payload.isAutoCompleteSelection) {
38 | userSearchAutoCompleteStore.emit(CHANGE_EVENT);
39 | }
40 | break;
41 | }
42 | });
43 |
44 | export default userSearchAutoCompleteStore;
45 |
--------------------------------------------------------------------------------
/app/src/apiutil/api_session_util.js:
--------------------------------------------------------------------------------
1 | import $ from "jquery";
2 | import CurrentUserActions from "../actions/current_user_actions.js";
3 |
4 | class ApiSessionUtil {
5 | login(formData, success, failure) {
6 | const receiveCurrentUser = (data) => {
7 | CurrentUserActions.receiveCurrentUser(data.user);
8 | success(data.message, data.user.username);
9 | };
10 |
11 | const receiveErrors = (data) => {
12 | failure(data.responseJSON.errors);
13 | };
14 |
15 | $.ajax({
16 | url: "/session",
17 | method: "POST",
18 | processData: false,
19 | contentType: false,
20 | dataType: "json",
21 | data: formData
22 | }).done(receiveCurrentUser).fail(receiveErrors);
23 | }
24 |
25 | logout(success) {
26 | $.ajax({
27 | url: '/session',
28 | method: 'DELETE',
29 | dataType: 'json',
30 | success: (data) => {
31 | CurrentUserActions.logoutCurrentUser(data.user);
32 | success(data.message);
33 | }
34 | });
35 | }
36 |
37 | fetchCurrentUser() {
38 | const receiveCurrentUser = (data) => CurrentUserActions.receiveCurrentUser(data.user);
39 |
40 | $.get('/session', receiveCurrentUser);
41 | }
42 | }
43 |
44 | export default new ApiSessionUtil();
45 |
--------------------------------------------------------------------------------
/app/src/components/user/search/users_search_results_page.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import currentUserStore from '../../../stores/current_user_store.js';
3 | import NavBar from '../../nav-bar/nav_bar.jsx';
4 | import UsersSearchIndex from './users_search_index.jsx';
5 |
6 | class UsersSearchResultsPage extends React.Component {
7 | constructor (props, context) {
8 | super(props, context);
9 | this._ensureLoggedIn = this.__ensureLoggedIn.bind(this);
10 | }
11 |
12 | static contextTypes = {
13 | router: React.PropTypes.object.isRequired
14 | }
15 |
16 | componentWillMount () {
17 | this._ensureLoggedIn();
18 | }
19 |
20 | componentDidMount () {
21 | currentUserStore.addChangeListener(this._ensureLoggedIn);
22 | }
23 |
24 | componentWillUnmount () {
25 | currentUserStore.removeChangeListener(this._ensureLoggedIn);
26 | }
27 |
28 | __ensureLoggedIn () {
29 | if (!currentUserStore.isLoggedIn()) { this.context.router.push('/'); }
30 | }
31 |
32 | render () {
33 | return (
34 |
35 |
39 | );
40 | }
41 | }
42 |
43 | export default UsersSearchResultsPage;
44 |
--------------------------------------------------------------------------------
/app/src/components/sidebar/users_list.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import UsersIndex from '../user/users_index.jsx';
3 | import ApiUserUtil from '../../apiutil/api_user_util.js';
4 | import currentUserStore from '../../stores/current_user_store.js';
5 | import loggedInUsersStore from '../../stores/logged_in_users_store.js';
6 |
7 | class UsersList extends React.Component {
8 | constructor (props, context) {
9 | super(props, context);
10 | this._onChange = this._onChange.bind(this);
11 | this.state = { loggedInUsers: loggedInUsersStore.get() };
12 | }
13 |
14 | componentWillMount () {
15 | const username = currentUserStore.get().username;
16 | ApiUserUtil.fetchUsers(username, "loggedinusers");
17 | }
18 |
19 | componentDidMount () {
20 | loggedInUsersStore.addChangeListener(this._onChange);
21 | }
22 |
23 | componentWillUnmount () {
24 | loggedInUsersStore.removeChangeListener(this._onChange);
25 | }
26 |
27 | _onChange () {
28 | this.setState({ loggedInUsers: loggedInUsersStore.get() });
29 | }
30 |
31 | render () {
32 | console.log(this.state.loggedInUsers);
33 | return (
34 |
36 |
38 |
35 |
37 | );
38 | }
39 | }
40 |
41 | export default UsersList;
42 |
--------------------------------------------------------------------------------
/app/src/main.js:
--------------------------------------------------------------------------------
1 | // main sass file
2 | require("../static/stylesheets/sass/main.scss");
3 |
4 | // core modules
5 | import $ from 'jquery';
6 | import React from 'react';
7 | import { render } from 'react-dom';
8 | import { Router, Route, IndexRoute, browserHistory } from 'react-router';
9 |
10 | // components
11 | import ChatterboxApp from './components/main/chatterbox_app.jsx';
12 | import Footer from './components/main/footer.jsx';
13 | import LoginPage from './components/auth/login_page.jsx';
14 | import SignUpPage from './components/auth/sign_up_page.jsx';
15 | import UserHomePage from './components/user/user_home_page.jsx';
16 | import UsersSearchResultsPage from './components/user/search/users_search_results_page.jsx';
17 |
18 | $(document).ready(function () {
19 | const routes = (
20 |
43 |
52 | );
53 | }
54 | }
55 |
56 | export default SignUpPage;
57 |
--------------------------------------------------------------------------------
/app/api/controllers/session_controller.py:
--------------------------------------------------------------------------------
1 | from app import app
2 | from flask import request, session, jsonify
3 | from app.api.controllers import application_controller
4 | from app.api.models import User
5 | from app.api.models.forms import LoginForm
6 | from app.api.utilities import *
7 | import pdb
8 |
9 | @app.route("/session", methods=["GET", "POST", "DELETE"])
10 | def handle_session_api_request():
11 | if request.method == "GET":
12 | return __fetch_session()
13 | elif request.method == "POST":
14 | return __create_session()
15 | elif request.method == "DELETE":
16 | return __destroy_session()
17 |
18 | def __fetch_session():
19 | cookie = request.cookies.get('chatterbox')
20 |
21 | user = application_controller.current_user(cookie)
22 |
23 | if user:
24 | user_response = build_user_response_object(user)
25 | return jsonify(user=user_response)
26 | else:
27 | return jsonify(user={})
28 |
29 | def __create_session():
30 | form = LoginForm(request.form)
31 |
32 | if form.validate():
33 | user = User.find_by_username(form.username.data)[0]
34 | print user.session_token
35 | application_controller.login(user)
36 |
37 | user_response = build_user_response_object(user)
38 |
39 | response = jsonify(user=user_response,
40 | message = "Login successful! Welcome {0}!".format(user.username))
41 | response.set_cookie('chatterbox', user.session_token)
42 |
43 | return response
44 | else:
45 | return jsonify(errors=form.errors.items()), 401
46 |
47 | def __destroy_session():
48 | cookie = request.cookies.get('chatterbox')
49 |
50 | user = application_controller.current_user(cookie)
51 |
52 | application_controller.logout(cookie)
53 |
54 | response = jsonify(user=user, message="Goodbye {0}!".format(user.username))
55 | response.set_cookie('chatterbox', '', expires=0)
56 |
57 | return response
58 |
--------------------------------------------------------------------------------
/app/src/components/main/chatterbox_app.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import NavBar from '../nav-bar/nav_bar.jsx';
3 | import currentUserStore from '../../stores/current_user_store.js';
4 | import ApiSessionUtil from '../../apiutil/api_session_util.js';
5 |
6 | class ChatterboxApp extends React.Component {
7 | constructor (props, context) {
8 | super(props, context);
9 | this.getStateFromStore = this.getStateFromStore.bind(this);
10 | this.navigateToSearchResultsPage = this.navigateToSearchResultsPage.bind(this);
11 | this.navigateToUserHomePage = this.navigateToUserHomePage.bind(this);
12 | this._onChange = this._onChange.bind(this);
13 | this.state = { header: this.getStateFromStore() };
14 | }
15 |
16 | static contextTypes = {
17 | router: React.PropTypes.object.isRequired
18 | }
19 |
20 | componentWillMount () {
21 | ApiSessionUtil.fetchCurrentUser();
22 | }
23 |
24 | componentDidMount () {
25 | currentUserStore.addChangeListener(this._onChange);
26 | }
27 |
28 | componentWillUnmount () {
29 | currentUserStore.removeChangeListener(this._onChange);
30 | }
31 |
32 | getStateFromStore () {
33 | let result = currentUserStore.isLoggedIn() ? true : false;
34 | return result;
35 | }
36 |
37 | navigateToUserHomePage () {
38 | this.context.router.push('/users/' + currentUserStore.get().username);
39 | }
40 |
41 | navigateToSearchResultsPage (username) {
42 | this.context.router.push({
43 | pathname: '/users/search',
44 | query: { username: username }
45 | });
46 | }
47 |
48 | _onChange () {
49 | this.setState({ header: this.getStateFromStore() });
50 | }
51 |
52 | render () {
53 | const headerClass = this.state.header ? "header" : "header not-visible";
54 |
55 | return (
56 | Welcome to Chatterbox!
44 |Create a new user to get going!
45 |
57 |
63 | );
64 | }
65 | }
66 |
67 | export default ChatterboxApp;
68 |
--------------------------------------------------------------------------------
/app/src/components/user/user_home_page.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import $ from 'jquery';
3 | import io from 'socket.io-client';
4 | import NavBar from '../nav-bar/nav_bar.jsx';
5 | import UsersList from '../sidebar/users_list.jsx';
6 | import currentUserStore from '../../stores/current_user_store.js';
7 | import loggedInUsersStore from '../../stores/logged_in_users_store.js';
8 |
9 | class UserHomePage extends React.Component {
10 | constructor (props, context) {
11 | super(props, context);
12 | this.addWebSocketListeners = this.addWebSocketListeners.bind(this);
13 | this._ensureLoggedIn = this._ensureLoggedIn.bind(this);
14 | this.socket = io('http://' + document.domain + ':' + location.port + '/chat',
15 | { query:
16 | { username: currentUserStore.get().username }
17 | });
18 | }
19 |
20 | static contextTypes = {
21 | router: React.PropTypes.object.isRequired
22 | }
23 |
24 | componentWillMount () {
25 | this._ensureLoggedIn();
26 | }
27 |
28 | componentDidMount () {
29 | this.addWebSocketListeners();
30 | currentUserStore.addChangeListener(this._ensureLoggedIn);
31 | }
32 |
33 | componentWillUnmount () {
34 | this.socket.emit('disconnect', { query: { username: currentUserStore.get().username } });
35 | this.socket.off();
36 | this.socket.close();
37 | currentUserStore.removeChangeListener(this._ensureLoggedIn);
38 | }
39 |
40 | addWebSocketListeners () {
41 | this.socket.on('a user connected', (data) => {
42 | console.log(data.broadcast);
43 | loggedInUsersStore.add(data.username)
44 | });
45 |
46 | this.socket.on('a user disconnected', (data) => {
47 | console.log(data.broadcast);
48 | loggedInUsersStore.remove(data.username)
49 | });
50 |
51 | this.socket.on('global chat response', (data) => {
52 | debugger;
53 | });
54 | }
55 |
56 | _ensureLoggedIn () {
57 | if (!currentUserStore.isLoggedIn()) { this.context.router.push('/'); }
58 | }
59 |
60 | render () {
61 | return (
62 |
63 |
65 | );
66 | }
67 | }
68 |
69 | export default UserHomePage;
70 |
--------------------------------------------------------------------------------
/app/src/components/auth/login_page.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import LoginForm from './login_form.jsx';
3 | import currentUserStore from '../../stores/current_user_store.js';
4 | import { displayFlashMessage } from '../../utilities/flash.js';
5 | import { failedAuthErrors } from '../../utilities/auth.js';
6 |
7 | class LoginPage extends React.Component {
8 | constructor(props) {
9 | super(props);
10 | this.successfulLogin = this.successfulLogin.bind(this);
11 | this.failedLogin = this.failedLogin.bind(this);
12 | this.deleteUsernameErrors = this.deleteUsernameErrors.bind(this);
13 | this.deletePasswordErrors = this.deletePasswordErrors.bind(this);
14 | this.__checkIfLoggedIn = this.__checkIfLoggedIn.bind(this);
15 | this.state={ usernameErrors:[], passwordErrors:[] };
16 | }
17 |
18 | static contextTypes = {
19 | router: React.PropTypes.object.isRequired
20 | }
21 |
22 | componentWillMount () {
23 | this.__checkIfLoggedIn();
24 | }
25 |
26 | componentDidMount () {
27 | currentUserStore.addChangeListener(this.__checkIfLoggedIn);
28 | }
29 |
30 | componentWillUnmount () {
31 | currentUserStore.removeChangeListener(this.__checkIfLoggedIn);
32 | }
33 |
34 | successfulLogin (message, username) {
35 | this.context.router.push('/users/' + username);
36 |
37 | displayFlashMessage(message);
38 | }
39 |
40 | failedLogin (errors) {
41 | const [usernameErrors, passwordErrors] = failedAuthErrors(errors);
42 |
43 | this.setState({ usernameErrors, passwordErrors });
44 | }
45 |
46 | deleteUsernameErrors () {
47 | this.setState({ usernameErrors: [] })
48 | }
49 |
50 | deletePasswordErrors () {
51 | this.setState({ passwordErrors: [] })
52 | }
53 |
54 | __checkIfLoggedIn() {
55 | if (currentUserStore.isLoggedIn()) {
56 | this.context.router.push('/users/' + currentUserStore.get().username);
57 | }
58 | }
59 |
60 | render () {
61 | return (
62 |
63 |
72 | );
73 | }
74 | }
75 |
76 | export default LoginPage;
77 |
--------------------------------------------------------------------------------
/app/static/stylesheets/sass/modules/_variables.scss:
--------------------------------------------------------------------------------
1 | /* font weights */
2 | $light: 100;
3 | $regular: 400;
4 | $bold: 700;
5 |
6 | /* base background */
7 | $body-bg: #eee;
8 |
9 | /* base font */
10 | $base-font-family: sans-serif;
11 | $base-font-weight: $regular;
12 | $base-font-size: 14px;
13 | $base-line-height: 1.4;
14 |
15 | /* icons */
16 | $icon-width: 32px;
17 | $icon-height: 32px;
18 | $icon-border-radius: 10px;
19 |
20 | /* borders */
21 | $standard-border: 1px solid #ccc;
22 | $selected-border: 1px solid blue;
23 | $base-border-radius: 10px;
24 |
25 | /* buttons */
26 | $button-padding: 3px;
27 | $button-font-size: 16px;
28 | $button-border: 1px solid darkgrey;
29 | $button-border-radius: 10px;
30 | $button-background: lightblue;
31 |
32 | /* headers */
33 | $h1-font-size: 36px;
34 | $h2-font-size: 24px;
35 |
36 | /* input boxes */
37 | $input-box-padding: 5px 2.5px;
38 | $input-box-border-radius: 10px;
39 | $failed-validation-input-border: 2px solid red;
40 | $failed-validation-box-shadow: 0 0 10px red;
41 |
42 | /* flash messages */
43 | $flash-top: 15vh;
44 | $flash-left: 40vw;
45 | $flash-font-size: 18px;
46 | $flash-border: $standard-border;
47 | $flash-border-radius: $base-border-radius;
48 | $flash-background-color: yellow;
49 | $flash-padding: 5px;
50 | $flash-z-index: 1;
51 |
52 | /* footer */
53 | $footer-height: 72px;
54 | $footer-font-size: 16px;
55 | $footer-font-color: #fff;
56 | $footer-width: 70vw;
57 | $footer-margin: auto;
58 | $footer-padding: 17px 0;
59 | $footer-bg: #ffab62;
60 | $about-me-opacity: .7;
61 | $about-me-margin-top: 5px;
62 | $icon-list-margin: 10px;
63 |
64 | /* login page */
65 | $login-form-item-margin: 5px 0;
66 | $login-form-width: 200px;
67 | $login-form-margins: 100px 0;
68 | $login-input-box-width: 100%;
69 |
70 | /* sign up page */
71 | $sign-up-form-item-margin: 5px 0;
72 | $sign-up-form-width: 200px;
73 | $sign-up-form-margins: 50px 0;
74 | $sign-up-input-box-width: 100%;
75 | $avatar-preview-width: 200px;
76 | $avatar-preview-height: 200px;
77 |
78 | /* navigation bar */
79 | $header-background: lightblue;
80 | $header-bottom-border: $standard-border;
81 | $nav-bar-width: 70vw;
82 | $logo-dimension: 75px;
83 |
84 | /* user search bar */
85 | $user-search-input-margin: 0 1vw;
86 | $user-search-input-width: 20vw;
87 |
88 | /* user autocomplete list */
89 | $user-autocomplete-list-left: calc(61px + 1vw);
90 | $user-autocomplete-list-background: white;
91 | $user-autocomplete-list-width: $user-search-input-width;
92 | $user-autocomplete-list-border-radius: $base-border-radius;
93 | $user-autocomplete-list-border-left: $standard-border;
94 | $user-autocomplete-list-border-right: $standard-border;
95 | $user-autocomplete-list-border-bottom: $standard-border;
96 | $user-autocomplete-list-item-border-top: $standard-border;
97 | $user-autocomplete-list-item-padding: 5px;
98 |
99 | /* side bar */
100 |
101 | /* users list */
102 | $users-list-background: black;
103 | $users-list-height: calc(100vh - 76px - 73px);
104 | $users-list-width: 15vw;
105 | $users-list-opacity: .6;
106 |
--------------------------------------------------------------------------------
/app/src/components/auth/login_form.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router';
3 | import $ from 'jquery';
4 | import ApiSessionUtil from '../../apiutil/api_session_util.js';
5 | import { removeInvalidClass } from '../../utilities/auth.js';
6 |
7 | class LoginForm extends React.Component {
8 | constructor(props, context) {
9 | super(props, context);
10 | this.handleLoginSubmission = this.handleLoginSubmission.bind(this);
11 | this.handleKeyPress = this.handleKeyPress.bind(this);
12 | this.logIntoDemoAccount = this.logIntoDemoAccount.bind(this);
13 | this.changeUsername = this.changeUsername.bind(this);
14 | this.changePassword = this.changePassword.bind(this);
15 | this.state = {
16 | username: "",
17 | password: "",
18 | };
19 | }
20 |
21 | handleLoginSubmission (e) {
22 | if (e) { e.preventDefault(); }
23 |
24 | $(".submit").addClass("disabled").prop("disabled", true);
25 |
26 | const formData = new FormData();
27 |
28 | formData.append("username", this.state.username);
29 | formData.append("password", this.state.password);
30 |
31 | ApiSessionUtil.login(formData, this.props.success, this.props.failure);
32 | }
33 |
34 | handleKeyPress (e) {
35 | if (e.charCode === 13) { this.handleLoginSubmission(); }
36 | }
37 |
38 | logIntoDemoAccount (e) {
39 | e.preventDefault();
40 | }
41 |
42 | changeUsername (e) {
43 | removeInvalidClass("form-username-input");
44 |
45 | this.props.deleteUsernameErrors();
46 |
47 | this.setState({ username: e.currentTarget.value });
48 | }
49 |
50 | changePassword (e) {
51 | removeInvalidClass("form-password-input");
52 |
53 | this.props.deletePasswordErrors();
54 |
55 | this.setState({ password: e.currentTarget.value });
56 | }
57 |
58 | render() {
59 | const usernameErrors = this.props.usernameErrors.map( (err, idx) =>
60 | Welcome to Chatterbox!
64 |Please login to continue.
65 |
186 |
187 |
188 |
195 |
196 |
198 |
199 |
203 | );
204 | }
205 | }
206 |
207 | export default UserSearch;
208 |
--------------------------------------------------------------------------------
200 | { userSearchAutoCompleteItems }
201 |
202 |