import React, { Component, PropTypes } from "react"; import CSSModules from "react-css-modules"; import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl"; import FontAwesome from "react-fontawesome"; import { i18nRecord } from "../models/i18n"; import { messagesMap } from "../utils"; import APIMessages from "../locales/messagesDescriptors/api"; import messages from "../locales/messagesDescriptors/Login"; import css from "../styles/Login.scss"; const loginMessages = defineMessages(messagesMap(Array.concat([], APIMessages, messages))); class LoginFormCSSIntl extends Component { constructor (props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } setError (formGroup, error) { if (error) { formGroup.classList.add("has-error"); formGroup.classList.remove("has-success"); return true; } formGroup.classList.remove("has-error"); formGroup.classList.add("has-success"); return false; } handleSubmit (e) { e.preventDefault(); if (this.props.isAuthenticating) { // Don't handle submit if already logging in return; } const username = this.refs.username.value.trim(); const password = this.refs.password.value.trim(); const endpoint = this.refs.endpoint.value.trim(); const rememberMe = this.refs.rememberMe.checked; let hasError = this.setError(this.refs.usernameFormGroup, !username); hasError |= this.setError(this.refs.passwordFormGroup, !password); hasError |= this.setError(this.refs.endpointFormGroup, !endpoint); if (!hasError) { this.props.onSubmit(username, password, endpoint, rememberMe); } } componentDidUpdate () { if (this.props.error) { $(this.refs.loginForm).shake(3, 10, 300); this.setError(this.refs.usernameFormGroup, this.props.error); this.setError(this.refs.passwordFormGroup, this.props.error); this.setError(this.refs.endpointFormGroup, this.props.error); } } render () { const {formatMessage} = this.props.intl; let infoMessage = this.props.info; if (this.props.info && this.props.info instanceof i18nRecord) { infoMessage = ( ); } let errorMessage = this.props.error; if (this.props.error && this.props.error instanceof i18nRecord) { errorMessage = ( ); } return (
{ this.props.error ?
: null } { this.props.info ?
: null }
); } } LoginFormCSSIntl.propTypes = { username: PropTypes.string, endpoint: PropTypes.string, rememberMe: PropTypes.bool, onSubmit: PropTypes.func.isRequired, isAuthenticating: PropTypes.bool, error: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(i18nRecord)]), info: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(i18nRecord)]), intl: intlShape.isRequired, }; export let LoginForm = injectIntl(CSSModules(LoginFormCSSIntl, css)); class Login extends Component { render () { const greeting = (

); return (

Ampache


{(!this.props.error && !this.props.info) ? greeting : null}
); } } Login.propTypes = { username: PropTypes.string, endpoint: PropTypes.string, rememberMe: PropTypes.bool, onSubmit: PropTypes.func.isRequired, isAuthenticating: PropTypes.bool, info: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]) }; export default CSSModules(Login, css);