import React, { Component, PropTypes } from "react"; import CSSModules from "react-css-modules"; import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl"; import { messagesMap } from "../utils"; import messages from "../locales/messagesDescriptors/Login"; import css from "../styles/Login.scss"; const loginMessages = defineMessages(messagesMap(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; var 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; return (
{ /* TODO: info/error translation */ } { this.props.error ?

{ this.props.error }

: null } { this.props.info ?

{ this.props.info }

: null }
); } } LoginFormCSSIntl.propTypes = { username: PropTypes.string, endpoint: PropTypes.string, rememberMe: PropTypes.bool, onSubmit: PropTypes.func.isRequired, isAuthenticating: PropTypes.bool, error: PropTypes.string, info: PropTypes.string, 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, error: PropTypes.string, info: PropTypes.string }; export default CSSModules(Login, css);