<commit_before>##############################################################################
#
#    CoCalc: Collaborative Calculation in the Cloud
#
#    Copyright (C) 2015 -- 2017, SageMath, Inc.
#
#    This program is free software: you can redistribute it and/or modify
#    it under the terms of the GNU General Public License as published by
#    the Free Software Foundation, either version 3 of the License, or
#    (at your option) any later version.
#
#    This program is distributed in the hope that it will be useful,
#    but WITHOUT ANY WARRANTY; without even the implied warranty of
#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#    GNU General Public License for more details.
#
#    You should have received a copy of the GNU General Public License
#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
#
###############################################################################

###
The Landing Page
###
{rclass, React, ReactDOM, redux, rtypes} = require('./smc-react')
{Alert, Button, ButtonToolbar, Col, Modal, Grid, Row, FormControl, FormGroup, Well, ClearFix} = require('react-bootstrap')
{ErrorDisplay, Icon, Loading, ImmutablePureRenderMixin, Footer, UNIT, COLORS} = require('./r_misc')
{HelpEmailLink, SiteName, SiteDescription, TermsOfService, AccountCreationEmailInstructions} = require('./customize')
{HelpPageUsageSection, ThirdPartySoftware} = require('./r_help')
DESC_FONT = 'sans-serif'

misc = require('smc-util/misc')
{APP_TAGLINE} = require('smc-util/theme')
{APP_ICON_WHITE, APP_LOGO_NAME_WHITE} = require('./misc_page')

images = [
    require('sagepreview/01-worksheet.png'),
    require('sagepreview/02-courses.png'),
    require('sagepreview/03-latex.png'),
    require('sagepreview/05-sky_is_the_limit.png'),
]

$.get window.app_base_url + "/registration", (obj, status) ->
    if status == 'success'
        redux.getActions('account').setState(token : obj.token)

reset_password_key = () ->
    url_args = window.location.href.split("#")
    # toLowerCase is important since some mail transport agents will uppercase the URL -- see https://github.com/sagemathinc/cocalc/issues/294
    if url_args.length == 2 and url_args[1].slice(0, 6).toLowerCase() == 'forgot'
        return url_args[1].slice(7, 7+36).toLowerCase()
    return undefined

Passports = rclass
    displayName : 'Passports'

    propTypes :
        strategies : rtypes.array

    styles :
        facebook :
            backgroundColor : "#395996"
            color           : "white"
        google   :
            backgroundColor : "#DC4839"
            color           : "white"
        twitter  :
            backgroundColor : "#55ACEE"
            color           : "white"
        github   :
            backgroundColor : "black"
            color           : "black"

    render_strategy: (name) ->
        if name is 'email'
            return
        url = "#{window.app_base_url}/auth/#{name}"
        <a href={url} key={name}>
            <Icon size='2x' name='stack' href={url}>
                {<Icon name='circle' stack='2x' style={color: @styles[name].backgroundColor} /> if name isnt 'github'}
                <Icon name={name} stack='1x' size={'2x' if name is 'github'} style={color: @styles[name].color} />
            </Icon>
        </a>

    render: ->
        <div style={textAlign: 'center'}>
            <h3 style={marginTop: 0}>Connect with</h3>
            <div>
                {@render_strategy(name) for name in @props.strategies}
            </div>
            <hr style={marginTop: 10, marginBottom: 10} />
        </div>

ERROR_STYLE =
    color           : 'white'
    fontSize        : '125%'
    backgroundColor : 'red'
    border          : '1px solid lightgray'
    borderRadius    : '4px'
    padding         : '15px'
    marginTop       : '5px'
    marginBottom    : '5px'

SignUp = rclass
    displayName: 'SignUp'

    propTypes :
        strategies    : rtypes.array
        sign_up_error : rtypes.object
        token         : rtypes.bool
        has_account   : rtypes.bool
        signing_up    : rtypes.bool
        style         : rtypes.object

    make_account: (e) ->
        e.preventDefault()
        name     = ReactDOM.findDOMNode(@refs.name).value
        email    = ReactDOM.findDOMNode(@refs.email).value
        password = ReactDOM.findDOMNode(@refs.password).value
        token    = ReactDOM.findDOMNode(@refs.token)?.value
        @actions('account').create_account(name, email, password, token)

    display_error: (field)->
        if @props.sign_up_error?[field]?
            <div style={ERROR_STYLE}>{@props.sign_up_error[field]}</div>

    display_passports: ->
        if not @props.strategies?
            return <Loading />
        if @props.strategies.length > 1
            return <Passports strategies={@props.strategies} />

    display_token_input: ->
        if @props.token
            <FormGroup>
                <FormControl ref='token' type='text' placeholder='Enter the secret token' />
            </FormGroup>

    render: ->
        well_style =
            marginTop      : '10px'
            borderWidth    : 5
            'border-color' : COLORS.LANDING.LOGIN_BAR_BG
        <Well style=well_style>
            {@display_token_input()}
            {@display_error("token")}
            {@display_error("account_creation_failed")}   {# a generic error}
            {@display_passports()}
            <AccountCreationEmailInstructions />
            <form style={marginTop: 20, marginBottom: 20} onSubmit={@make_account}>
                <FormGroup>
                    {@display_error("first_name")}
                    <FormControl
                        ref         = 'name'
                        type        = 'text'
                        autoFocus   = {false}
                        placeholder = 'First and last name'
                        maxLength   = 254 />
                </FormGroup>
                <FormGroup>
                    {@display_error("email_address")}
                    <FormControl ref='email' type='email' placeholder='Email address' maxLength=254 />
                </FormGroup>
                <FormGroup>
                    {@display_error("password")}
                    <FormControl ref='password' type='password' placeholder='<PASSWORD>' maxLength=64 />
                </FormGroup>
                <TermsOfService style={fontSize: "small", textAlign: "center"} />
                <Button
                    style    = {marginBottom: UNIT, marginTop: UNIT}
                    disabled = {@props.signing_up}
                    bsStyle  = "success"
                    bsSize   = 'large'
                    type     = 'submit'<commit_msg>cocalc: react wants styles in camelCase<commit_after>##############################################################################
#
#    CoCalc: Collaborative Calculation in the Cloud
#
#    Copyright (C) 2015 -- 2017, SageMath, Inc.
#
#    This program is free software: you can redistribute it and/or modify
#    it under the terms of the GNU General Public License as published by
#    the Free Software Foundation, either version 3 of the License, or
#    (at your option) any later version.
#
#    This program is distributed in the hope that it will be useful,
#    but WITHOUT ANY WARRANTY; without even the implied warranty of
#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#    GNU General Public License for more details.
#
#    You should have received a copy of the GNU General Public License
#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
#
###############################################################################

###
The Landing Page
###
{rclass, React, ReactDOM, redux, rtypes} = require('./smc-react')
{Alert, Button, ButtonToolbar, Col, Modal, Grid, Row, FormControl, FormGroup, Well, ClearFix} = require('react-bootstrap')
{ErrorDisplay, Icon, Loading, ImmutablePureRenderMixin, Footer, UNIT, COLORS} = require('./r_misc')
{HelpEmailLink, SiteName, SiteDescription, TermsOfService, AccountCreationEmailInstructions} = require('./customize')
{HelpPageUsageSection, ThirdPartySoftware} = require('./r_help')
DESC_FONT = 'sans-serif'

misc = require('smc-util/misc')
{APP_TAGLINE} = require('smc-util/theme')
{APP_ICON_WHITE, APP_LOGO_NAME_WHITE} = require('./misc_page')

images = [
    require('sagepreview/01-worksheet.png'),
    require('sagepreview/02-courses.png'),
    require('sagepreview/03-latex.png'),
    require('sagepreview/05-sky_is_the_limit.png'),
]

$.get window.app_base_url + "/registration", (obj, status) ->
    if status == 'success'
        redux.getActions('account').setState(token : obj.token)

reset_password_key = () ->
    url_args = window.location.href.split("#")
    # toLowerCase is important since some mail transport agents will uppercase the URL -- see https://github.com/sagemathinc/cocalc/issues/294
    if url_args.length == 2 and url_args[1].slice(0, 6).toLowerCase() == 'forgot'
        return url_args[1].slice(7, 7+36).toLowerCase()
    return undefined

Passports = rclass
    displayName : 'Passports'

    propTypes :
        strategies : rtypes.array

    styles :
        facebook :
            backgroundColor : "#395996"
            color           : "white"
        google   :
            backgroundColor : "#DC4839"
            color           : "white"
        twitter  :
            backgroundColor : "#55ACEE"
            color           : "white"
        github   :
            backgroundColor : "black"
            color           : "black"

    render_strategy: (name) ->
        if name is 'email'
            return
        url = "#{window.app_base_url}/auth/#{name}"
        <a href={url} key={name}>
            <Icon size='2x' name='stack' href={url}>
                {<Icon name='circle' stack='2x' style={color: @styles[name].backgroundColor} /> if name isnt 'github'}
                <Icon name={name} stack='1x' size={'2x' if name is 'github'} style={color: @styles[name].color} />
            </Icon>
        </a>

    render: ->
        <div style={textAlign: 'center'}>
            <h3 style={marginTop: 0}>Connect with</h3>
            <div>
                {@render_strategy(name) for name in @props.strategies}
            </div>
            <hr style={marginTop: 10, marginBottom: 10} />
        </div>

ERROR_STYLE =
    color           : 'white'
    fontSize        : '125%'
    backgroundColor : 'red'
    border          : '1px solid lightgray'
    borderRadius    : '4px'
    padding         : '15px'
    marginTop       : '5px'
    marginBottom    : '5px'

SignUp = rclass
    displayName: 'SignUp'

    propTypes :
        strategies    : rtypes.array
        sign_up_error : rtypes.object
        token         : rtypes.bool
        has_account   : rtypes.bool
        signing_up    : rtypes.bool
        style         : rtypes.object

    make_account: (e) ->
        e.preventDefault()
        name     = ReactDOM.findDOMNode(@refs.name).value
        email    = ReactDOM.findDOMNode(@refs.email).value
        password = ReactDOM.findDOMNode(@refs.password).value
        token    = ReactDOM.findDOMNode(@refs.token)?.value
        @actions('account').create_account(name, email, password, token)

    display_error: (field)->
        if @props.sign_up_error?[field]?
            <div style={ERROR_STYLE}>{@props.sign_up_error[field]}</div>

    display_passports: ->
        if not @props.strategies?
            return <Loading />
        if @props.strategies.length > 1
            return <Passports strategies={@props.strategies} />

    display_token_input: ->
        if @props.token
            <FormGroup>
                <FormControl ref='token' type='text' placeholder='Enter the secret token' />
            </FormGroup>

    render: ->
        well_style =
            marginTop      : '10px'
            borderWidth    : 5
            borderColor    : COLORS.LANDING.LOGIN_BAR_BG
        <Well style=well_style>
            {@display_token_input()}
            {@display_error("token")}
            {@display_error("account_creation_failed")}   {# a generic error}
            {@display_passports()}
            <AccountCreationEmailInstructions />
            <form style={marginTop: 20, marginBottom: 20} onSubmit={@make_account}>
                <FormGroup>
                    {@display_error("first_name")}
                    <FormControl
                        ref         = 'name'
                        type        = 'text'
                        autoFocus   = {false}
                        placeholder = '<NAME>'
                        maxLength   = 254 />
                </FormGroup>
                <FormGroup>
                    {@display_error("email_address")}
                    <FormControl ref='email' type='email' placeholder='Email address' maxLength=254 />
                </FormGroup>
                <FormGroup>
                    {@display_error("password")}
                    <FormControl ref='password' type='password' placeholder='Choose a password' maxLength=64 />
                </FormGroup>
                <TermsOfService style={fontSize: "small", textAlign: "center"} />
                <Button
                    style    = {marginBottom: UNIT, marginTop: UNIT}
                    disabled = {@props.signing_up}
                    bsStyle  = "success"
                    bsSize   = 'large'
                    type     = 'submit'
{'fraction_non_alphanumeric': 0.13811007268951195, 'fraction_numerical': 0.01142263759086189, 'mean_word_length': 2.111700900069236, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 93, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6416988', 'n_tokens_mistral': 3913, 'n_tokens_neox': 3724, 'n_words': 897}