From f836d4c2d410bdb5966974568860ef57517889d8 Mon Sep 17 00:00:00 2001 From: ddejongh Date: Mon, 22 Jun 2015 10:50:22 +0200 Subject: [PATCH] register first cut --- js/components/ascribe_forms/form.js | 9 ++ js/components/header.js | 42 +++--- js/components/login_container.js | 17 ++- js/components/register_piece.js | 193 +++++++++++++++++++--------- js/components/signup_container.js | 71 ++++++---- sass/ascribe_login.scss | 16 +++ sass/ascribe_piece_register.scss | 7 + sass/main.scss | 2 + 8 files changed, 244 insertions(+), 113 deletions(-) create mode 100644 sass/ascribe_piece_register.scss diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index e1a81eab..403100c8 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -92,7 +92,14 @@ let Form = React.createClass({ this.setState({errors: []}); }, getButtons() { + if (this.state.submitted){ + return this.props.spinner; + } + if (this.props.buttons){ + return this.props.buttons; + } let buttons = null; + if (this.state.edited){ buttons = (
@@ -122,10 +129,12 @@ let Form = React.createClass({ }); }, render() { + return (
{this.getErrors()} {this.renderChildren()} + {this.getButtons()}
); diff --git a/js/components/header.js b/js/components/header.js index 15983e46..583802dd 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -10,14 +10,12 @@ import Alt from '../alt'; import Nav from 'react-bootstrap/lib/Nav'; import Navbar from 'react-bootstrap/lib/Navbar'; -import NavItem from 'react-bootstrap/lib/NavItem'; +import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav'; import DropdownButton from 'react-bootstrap/lib/DropdownButton'; import MenuItem from 'react-bootstrap/lib/MenuItem'; import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink'; import NavItemLink from 'react-router-bootstrap/lib/NavItemLink'; -import SignupModal from '../components/ascribe_modal/modal_signup'; - import { getLangText } from '../utils/lang_utils'; @@ -52,33 +50,33 @@ let Header = React.createClass({ if (this.state.currentUser.username){ account = ( - {getLangText('Account Settings')} -
  • - {getLangText('FAQ')} - {getLangText('Terms of Service')} - - {getLangText('Log out')} + {getLangText('Account Settings')} +
  • + {getLangText('FAQ')} + {getLangText('Terms of Service')} + + {getLangText('Log out')}     ); } else { account = LOGIN; - signup = ( - SIGNUP} />); + signup = SIGNUP; } - return ( - - - + ); + return ( + + + +
    - ); } diff --git a/js/components/register_piece.js b/js/components/register_piece.js index d420d32b..3a3520b5 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -5,74 +5,149 @@ import React from 'react'; import AppConstants from '../constants/application_constants'; import fineUploader from 'fineUploader'; +import Router from 'react-router'; + +import GlobalNotificationModel from '../models/global_notification_model'; +import GlobalNotificationActions from '../actions/global_notification_actions'; + +import Form from './ascribe_forms/form'; +import Property from './ascribe_forms/property'; + +import apiUrls from '../constants/api_urls'; + import ReactS3FineUploader from 'ReactS3FineUploader'; let RegisterPiece = React.createClass( { render() { return ( - -
    - Upload is not functional in IE7 as IE7 has no support for CORS!' - }} - formatFileName={(name) => {// fix maybe - if (name !== undefined && name.length > 26) { - name = name.slice(0, 15) + '...' + name.slice(-15); - } - return name; - }} - multiple={true}/> +
    +
    +
    +
    + +
    +
    ); } }); + +let FileUploader = React.createClass( { + render() { + + return ( + Upload is not functional in IE7 as IE7 has no support for CORS!' + }} + formatFileName={(name) => {// fix maybe + if (name !== undefined && name.length > 26) { + name = name.slice(0, 15) + '...' + name.slice(-15); + } + return name; + }} + multiple={true}/> + ); + } +}); + +let LoginForm = React.createClass({ + mixins: [Router.Navigation], + + + handleSuccess(){ + let notification = new GlobalNotificationModel('Login successsful', 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + this.transitionTo('pieces'); + + }, + render() { + return ( +
    + Log in to ascribe + } + spinner={ + + }> + + + + + + +
    +
    + Not an ascribe user? Sign up...
    + Forgot my password? Rescue me... +
    +
    + ); + } +}); export default RegisterPiece; diff --git a/js/components/signup_container.js b/js/components/signup_container.js index 82ca0714..b8849669 100644 --- a/js/components/signup_container.js +++ b/js/components/signup_container.js @@ -14,31 +14,54 @@ import InputCheckbox from './ascribe_forms/input_checkbox'; import apiUrls from '../constants/api_urls'; -let LoginContainer = React.createClass({ +let SignupContainer = React.createClass({ mixins: [Router.Navigation], + getInitialState(){ + return ({ + submitted: false, + message: null + }); + }, + handleSuccess(message){ + this.setState({ + submitted: true, + message: message + }); + }, render() { + if (this.state.submitted){ + return ( +
    +
    +
    + {this.state.message} +
    +
    + ); + } return (

    Welcome to ascribe...
    - +
    ); } }); -let LoginForm = React.createClass({ +let SignupForm = React.createClass({ mixins: [Router.Navigation], + handleSuccess(response){ - handleSuccess(){ - let notification = new GlobalNotificationModel('Login successsful', 'success', 10000); + let notificationText = 'Sign up successful'; + let notification = new GlobalNotificationModel(notificationText, 'success', 50000); GlobalNotificationActions.appendGlobalNotification(notification); - this.transitionTo('pieces'); + this.props.handleSuccess('We sent an email to your address ' + response.user.email + ', please confirm.'); }, render() { @@ -47,8 +70,18 @@ let LoginForm = React.createClass({ 'Store it in a safe place!'; return (
    + ref='form' + url={apiUrls.users_signup} + handleSuccess={this.handleSuccess} + buttons={ + } + spinner={ + + }> @@ -58,15 +91,6 @@ let LoginForm = React.createClass({ autoComplete="on" required/> - - - + label="Promocode"> + placeholder="Enter a promocode here (Optional)"/> +
    I agree to the  Terms of Service
    }/> -
    - ); } }); -export default LoginContainer; \ No newline at end of file +export default SignupContainer; \ No newline at end of file diff --git a/sass/ascribe_login.scss b/sass/ascribe_login.scss index 956b46a5..861cf594 100644 --- a/sass/ascribe_login.scss +++ b/sass/ascribe_login.scss @@ -1,5 +1,6 @@ $break-small: 764px; + .ascribe-btn-login { padding: 1.5em; font-weight: 500; @@ -24,6 +25,21 @@ $break-small: 764px; } } +.ascribe-btn-login-spinner{ + background-color: rgba(2, 182, 163, 0.4); + padding: 0.8em; + img { + height: 3em; + } + &:hover { + background-color: rgba(2, 182, 163, 0.4); + } + &:active, &:focus { + background-color: rgba(2, 182, 163, 0.4); + } +} + + .ascribe-login-wrapper { width: 80%; margin: 0 auto; diff --git a/sass/ascribe_piece_register.scss b/sass/ascribe_piece_register.scss new file mode 100644 index 00000000..b24320ae --- /dev/null +++ b/sass/ascribe_piece_register.scss @@ -0,0 +1,7 @@ +$break-small: 764px; + + +.ascribe-row { + max-width: 600px; + margin: 0 auto +} diff --git a/sass/main.scss b/sass/main.scss index e6cb524a..0507738a 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -18,6 +18,7 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'ascribe_textarea'; @import 'ascribe_media_player'; @import 'ascribe-global-notification'; +@import 'ascribe_piece_register'; @import 'offset_right'; @import 'ascribe_settings'; @import '../node_modules/react-s3-fineuploader/scss/ascribe-theme'; @@ -32,6 +33,7 @@ body { } .navbar-default { + border: none; border-left:0; border-right:0; margin-bottom: 1.5em;