register first cut

2025-01-03 10:25:08 +01:00 · 2015-06-22 10:50:22 +02:00 · 2015-06-22 10:50:22 +02:00 · f836d4c2d4
commit f836d4c2d4
parent 23190f6c48
8 changed files with 244 additions and 113 deletions
--- 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 = (
                <div className="pull-right">
@ -122,10 +129,12 @@ let Form = React.createClass({
        });
    },
    render() {
+
        return (
            <form role="form" className="ascribe-form" onSubmit={this.submit} autoComplete="on">
                {this.getErrors()}
                {this.renderChildren()}
+                {this.getButtons()}
            </form>

        );
--- 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';

@ -63,22 +61,22 @@ let Header = React.createClass({
        }
        else {
            account = <NavItemLink to="login">LOGIN</NavItemLink>;
-            signup = (
-                <SignupModal
-                    button={<NavItem to="pieces">SIGNUP</NavItem>} />);
+            signup = <NavItemLink to="signup">SIGNUP</NavItemLink>;
        }
-        return (
-            <Navbar>
-                <Nav>
-                    <Link className="navbar-brand" to="pieces" path="/?page=1">
+        let brand = (<Link className="navbar-brand" to="pieces" path="/?page=1">
                        <span>ascribe </span>
                        <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
-                    </Link>
-                </Nav>
-                <Nav right>
+                    </Link>);
+        return (
+
+            <Navbar brand={brand} toggleNavKey={0}>
+                <CollapsibleNav eventKey={0}>
+                    <Nav navbar />
+                    <Nav navbar right>
                        {account}
                        {signup}
                    </Nav>
+                </CollapsibleNav>
            </Navbar>
        );
    }
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@ -3,9 +3,6 @@
 import React from 'react';
 import Router from 'react-router';

-import UserActions from '../actions/user_actions';
-import UserStore from '../stores/user_store';
-
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';

@ -47,7 +44,16 @@ let LoginForm = React.createClass({
        return (
            <Form
                url={apiUrls.users_login}
-                handleSuccess={this.handleSuccess}>
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
+                        Log in to ascribe
+                    </button>}
+                spinner={
+                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </button>
+                    }>
                <Property
                    name='email'
                    label="Email">
@ -71,9 +77,6 @@ let LoginForm = React.createClass({
                    Not an ascribe user&#63; Sign up...<br/>
                    Forgot my password&#63; Rescue me...
                </div>
-                <button type="submit" className="btn ascribe-btn ascribe-btn-login">
-                    Log in to ascribe
-                </button>
            </Form>
        );
    }
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@ -5,14 +5,39 @@ 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 (
+            <div className="row ascribe-row">
+                <div className="col-md-6">
+                    <FileUploader />
+                </div>
+                <div className="col-md-6">
+                    <LoginForm />
+                </div>
+            </div>
+        );
+    }
+});

-            <div>
+
+let FileUploader = React.createClass( {
+    render() {
+
+        return (
            <ReactS3FineUploader
                keyRoutine={{
                    url: AppConstants.serverUrl + 's3/key/',
@ -70,9 +95,59 @@ let RegisterPiece = React.createClass( {
                    return name;
                }}
                multiple={true}/>
-                </div>
        );
    }
 });

+let LoginForm = React.createClass({
+    mixins: [Router.Navigation],
+
+
+    handleSuccess(){
+        let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+        this.transitionTo('pieces');
+
+    },
+    render() {
+        return (
+            <Form
+                url={apiUrls.users_login}
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
+                        Log in to ascribe
+                    </button>}
+                spinner={
+                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </button>
+                    }>
+                <Property
+                    name='email'
+                    label="Email">
+                    <input
+                        type="email"
+                        placeholder="Enter your email"
+                        autoComplete="on"
+                        required/>
+                </Property>
+                <Property
+                    name='password'
+                    label="Password">
+                    <input
+                        type="password"
+                        placeholder="Enter your password"
+                        autoComplete="on"
+                        required/>
+                </Property>
+                <hr />
+                <div className="ascribe-login-text">
+                    Not an ascribe user&#63; Sign up...<br/>
+                    Forgot my password&#63; Rescue me...
+                </div>
+            </Form>
+        );
+    }
+});
 export default RegisterPiece;
--- 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 (
+                <div className="ascribe-login-wrapper">
+                    <br/>
+                    <div className="ascribe-login-text ascribe-login-header">
+                    {this.state.message}
+                    </div>
+                </div>
+            );
+        }
        return (
            <div className="ascribe-login-wrapper">
                <br/>
                <div className="ascribe-login-text ascribe-login-header">
                    Welcome to ascribe...
                </div>
-                <LoginForm />
+                <SignupForm handleSuccess={this.handleSuccess}/>
            </div>
        );
    }
 });


-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 (
            <Form
-                url={apiUrls.users_login}
-                handleSuccess={this.handleSuccess}>
+                ref='form'
+                url={apiUrls.users_signup}
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
+                        Sign up to ascribe
+                    </button>}
+                spinner={
+                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </button>
+                    }>
                <Property
                    name='email'
                    label="Email">
@ -58,15 +91,6 @@ let LoginForm = React.createClass({
                        autoComplete="on"
                        required/>
                </Property>
-                <Property
-                    name='username'
-                    label="Username">
-                    <input
-                        type="text"
-                        placeholder="Choose a username"
-                        autoComplete="on"
-                        required/>
-                </Property>
                <Property
                    name='password'
                    label="Password"
@ -89,26 +113,23 @@ let LoginForm = React.createClass({
                </Property>
                <Property
                    name='promo_code'
-                    label="Promocode (Optional)">
+                    label="Promocode">
                    <input
                        type="password"
-                        placeholder="Enter a promocode here"/>
+                        placeholder="Enter a promocode here (Optional)"/>
                </Property>
+                <hr />
                <InputCheckbox
-                    ref="terms"
+                    name='terms'
                    required="required"
                    label={
                        <div>
                            I agree to the&nbsp;
                            <a href="/terms" target="_blank"> Terms of Service</a>
                        </div>}/>
-                <hr />
-                <button type="submit" className="btn ascribe-btn ascribe-btn-login">
-                    Sign up to ascribe
-                </button>
            </Form>
        );
    }
 });

-export default LoginContainer;
+export default SignupContainer;
--- 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;
--- a/sass/ascribe_piece_register.scss
+++ b/sass/ascribe_piece_register.scss
@ -0,0 +1,7 @@
+$break-small: 764px;
+
+
+.ascribe-row {
+  max-width: 600px;
+  margin: 0 auto
+}
--- 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;