<commit_before>import React = require("react")
import {Base64Img, SlideDownTransition, Spinner} from "./"
import {Glyphicon, Button, Input} from "react-bootstrap"
import {connect, disconnect} from "../socket"
import {appActions} from "../action"
import {verticalCenter, media, clearFunctions, ifEnter} from "../util"
import config from "../config"
import MediaQuery = require("react-responsive")

export let loginEvents = {
    fail(text: string) {}
}

function MessageBar({text}: {text?: string}) {
    return <SlideDownTransition show={!!text}>
        <div className="login-message error-message">
            {text}
        </div>
    </SlideDownTransition>
}

interface UlteriusBannerProps {
    label: string,
    loading: boolean,
    loadingLabel?: string
}

function UlteriusBanner({label, loading, loadingLabel}: UlteriusBannerProps) {
    return <div className="ulterius-banner">
        {loading ? <Spinner /> : <img src={require("img/logo.png")} />} <br />
        {loading && loadingLabel ? loadingLabel : label}
    </div>
}

export class LoginScreen extends React.Component<{
    username?: string,
    avatar?: string,
    onLogin?: (pwd: string, username: string) => void
}, {
    password?: string,
    username?: string
    message?: string,
    loggingIn?: boolean
}> {
    constructor(props, context) {
        super(props, context)
        this.state = {
            password: "",
            username: this.props.username
        }
    }
    componentDidMount() {
        this.setState({username: this.props.username})
        loginEvents.fail = (text: string) => {
            this.setState({message: text, loggingIn: false})
        }
    }
    componentWillUnmount() {
        clearFunctions(loginEvents)
    }
    message(text: string) {
        return <SlideDownTransition show={!!text}>
            <div className="login-message error-message">
                {text}
            </div>
        </SlideDownTransition>
        /*
        if (text) {
            return <div className="login-message error-message">
                {text}
            </div>
        }
        return null;
        */
    }
    usernameChanged() {
        return this.props.username != this.state.username
    }
    inner() {
        const {username, password} = this.state
        const loginButton = 
            <Button 
            bsStyle="primary" 
            onClick={this.logIn}>
                {/*<Glyphicon glyph="arrow-right" />*/}
                Login
            </Button>
        const portraitStyle: React.CSSProperties = {
            width: 50, height: 50,
            filter: `brightness(${this.usernameChanged() ? "50%" : "100%"})`
        }
        console.log(this.usernameChanged())
        return <div className="login-panel">
            <UlteriusBanner 
                label="login to ulterius" 
                loadingLabel="logging in..." 
                loading={this.state.loggingIn} 
            />
            {/*<div className="ulterius-banner">
                <img src="img/logo.png" /> <br />
                login to ulterius
            </div> */}
            {/*this.message(this.state.message)*/}
            <MessageBar text={this.state.message} />
            <div className="login-portrait">
                <Base64Img 
                    type="image/png" 
                    style={portraitStyle} 
                    className="img-circle" 
                    data={this.props.avatar} <commit_msg>Remove debug trace<commit_after>import React = require("react")
import {Base64Img, SlideDownTransition, Spinner} from "./"
import {Glyphicon, Button, Input} from "react-bootstrap"
import {connect, disconnect} from "../socket"
import {appActions} from "../action"
import {verticalCenter, media, clearFunctions, ifEnter} from "../util"
import config from "../config"
import MediaQuery = require("react-responsive")

export let loginEvents = {
    fail(text: string) {}
}

function MessageBar({text}: {text?: string}) {
    return <SlideDownTransition show={!!text}>
        <div className="login-message error-message">
            {text}
        </div>
    </SlideDownTransition>
}

interface UlteriusBannerProps {
    label: string,
    loading: boolean,
    loadingLabel?: string
}

function UlteriusBanner({label, loading, loadingLabel}: UlteriusBannerProps) {
    return <div className="ulterius-banner">
        {loading ? <Spinner /> : <img src={require("img/logo.png")} />} <br />
        {loading && loadingLabel ? loadingLabel : label}
    </div>
}

export class LoginScreen extends React.Component<{
    username?: string,
    avatar?: string,
    onLogin?: (pwd: string, username: string) => void
}, {
    password?: string,
    username?: string
    message?: string,
    loggingIn?: boolean
}> {
    constructor(props, context) {
        super(props, context)
        this.state = {
            password: "",
            username: this.props.username
        }
    }
    componentDidMount() {
        this.setState({username: this.props.username})
        loginEvents.fail = (text: string) => {
            this.setState({message: text, loggingIn: false})
        }
    }
    componentWillUnmount() {
        clearFunctions(loginEvents)
    }
    message(text: string) {
        return <SlideDownTransition show={!!text}>
            <div className="login-message error-message">
                {text}
            </div>
        </SlideDownTransition>
        /*
        if (text) {
            return <div className="login-message error-message">
                {text}
            </div>
        }
        return null;
        */
    }
    usernameChanged() {
        return this.props.username != this.state.username
    }
    inner() {
        const {username, password} = this.state
        const loginButton = 
            <Button 
            bsStyle="primary" 
            onClick={this.logIn}>
                {/*<Glyphicon glyph="arrow-right" />*/}
                Login
            </Button>
        const portraitStyle: React.CSSProperties = {
            width: 50, height: 50,
            filter: `brightness(${this.usernameChanged() ? "50%" : "100%"})`
        }
        
        return <div className="login-panel">
            <UlteriusBanner 
                label="login to ulterius" 
                loadingLabel="logging in..." 
                loading={this.state.loggingIn} 
            />
            {/*<div className="ulterius-banner">
                <img src="img/logo.png" /> <br />
                login to ulterius
            </div> */}
            {/*this.message(this.state.message)*/}
            <MessageBar text={this.state.message} />
            <div className="login-portrait">
                <Base64Img 
                    type="image/png" 
                    style={portraitStyle} 
                    className="img-circle" 
                    data={this.props.avatar} 
{'fraction_non_alphanumeric': 0.13240418118466898, 'fraction_numerical': 0.003774680603948897, 'mean_word_length': 1.950321199143469, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6239164', 'n_tokens_mistral': 1923, 'n_tokens_neox': 1844, 'n_words': 409}