diff options
Diffstat (limited to 'web-ui/signup')
-rw-r--r-- | web-ui/signup/css/normalize.css | 461 | ||||
-rw-r--r-- | web-ui/signup/css/style.css | 174 | ||||
-rw-r--r-- | web-ui/signup/images/pixelated-logo-orange.svg | 29 | ||||
-rw-r--r-- | web-ui/signup/images/sent_email.png | bin | 9160 -> 0 bytes | |||
-rw-r--r-- | web-ui/signup/index.html | 18 | ||||
-rw-r--r-- | web-ui/signup/src/index.js | 223 |
6 files changed, 0 insertions, 905 deletions
diff --git a/web-ui/signup/css/normalize.css b/web-ui/signup/css/normalize.css deleted file mode 100644 index 9b77e0eb..00000000 --- a/web-ui/signup/css/normalize.css +++ /dev/null @@ -1,461 +0,0 @@ -/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Correct the line height in all browsers. - * 3. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - */ - -/* Document - ========================================================================== */ - -html { - font-family: sans-serif; /* 1 */ - line-height: 1.15; /* 2 */ - -ms-text-size-adjust: 100%; /* 3 */ - -webkit-text-size-adjust: 100%; /* 3 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/** - * Add the correct display in IE 9-. - */ - -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ - -figcaption, -figure, -main { /* 1 */ - display: block; -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ - -a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ -} - -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ - -a:active, -a:hover { - outline-width: 0; -} - -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Change the border, margin, and padding in all browsers (opinionated). - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - */ - -details, /* 1 */ -menu { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Scripting - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* Hidden - ========================================================================== */ - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} diff --git a/web-ui/signup/css/style.css b/web-ui/signup/css/style.css deleted file mode 100644 index 61ac8587..00000000 --- a/web-ui/signup/css/style.css +++ /dev/null @@ -1,174 +0,0 @@ -body { - font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; -} - -.field-group { - position:relative; - margin-bottom: 35px; -} - -label { - font-size: 0.9em; - margin-bottom: 10px; - display: inline-block; -} - -input { - display: block; - border: solid 1px #4da3b6; - width: 100%; - height: auto; - padding: 10px 5px; - margin-bottom: 20px; -} - -.animated-label { - color:#999; - position:absolute; - pointer-events:none; - left: 6px; - top:10px; - transition:0.2s ease all; - -moz-transition:0.2s ease all; - -webkit-transition:0.2s ease all; -} - -input:focus { - outline:none; -} - -input:focus ~ .animated-label, input:valid ~ .animated-label{ - top:-20px; - left: 0; - font-size:0.8em; - color:#4da3b6; -} - -.blue-button { - background: #178ca6; - color: white; - display: block; - text-decoration: none; - text-align: center; - padding: 10px 0 10px 0; - width: 104%; - margin: 0 auto; -} - -.blue-button:hover { - background: #4da3b6; -} - -a { - text-decoration: none; - color: #4da3b6; -} - -h1 { - font-size: 1.5em; - text-align: center; -} - -header { - width: 18%; - margin: 0 auto; -} - -.link-message { - text-align: center; - font-size: 0.8em; -} - -.logo { - width: 100%; - height: auto; - padding-top: 20%; - margin-bottom: 30px; -} - -.message h1 { - margin-bottom: 35px; -} - -.message p { - padding-left: 5%; - padding-right: 5%; - width: 40%; - margin: 0 auto; - text-align: center; - line-height: 1.8em; - font-size: 0.9em; -} - -.form-container { - width: 20%; - margin: 0 auto; - padding-top: 40px; -} - -.domain-label { - position: relative; - top: 26px; - padding-left: 20px; - left: 100%; -} - -.sent-email-icon { - width: 60px; -} - -.disabled { - pointer-events: none; - background: #d4d4d4; -} - -.link-message .disabled { - pointer-events: none; - color: #d4d4d4; - background: none; -} - -/* Medium Devices, Desktops */ -@media only screen and (max-width : 992px) { - header { - width: 20%; - } - - .form-container { - width: 30%; - } - - .message p { - width: 70% - } -} - -/* Small Devices, Tablets */ -@media only screen and (max-width : 768px) { - header { - width: 30%; - } - - .form-container { - width: 50%; - } - - .message p { - width: 80% - } -} - -/* Extra Small Devices, Phones */ -@media only screen and (max-width : 480px) { - header { - width: 60%; - } - - .form-container { - width: 80%; - } - - .message p { - width: 85% - } -} diff --git a/web-ui/signup/images/pixelated-logo-orange.svg b/web-ui/signup/images/pixelated-logo-orange.svg deleted file mode 100644 index 7e0ef43d..00000000 --- a/web-ui/signup/images/pixelated-logo-orange.svg +++ /dev/null @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - width="509.707px" height="142.439px" viewBox="0 0 509.707 142.439" enable-background="new 0 0 509.707 142.439" - xml:space="preserve"> -<g> - <path fill="#F9A731" d="M0,35.469v71.365l62.837,35.605l62.833-35.605V35.469L62.813,0L0,35.469z M60.262,116.617L23.735,96.332 - V52.46l36.586,20.999L60.262,116.617z M101.936,96.332l-36.148,20.285l0.067-43.123l36.081-21.034V96.332z M101.936,46.44 - L62.951,69.553L23.733,46.44l39.218-21.131L101.936,46.44z"/> - <path fill="#F9A731" d="M169.505,42.332h-19.968v59.328h13.52V79.655h6.448c11.579,0,20.279-6.832,20.279-19.056 - C189.784,48.302,181.084,42.332,169.505,42.332z M166.866,68.868h-3.809v-15.75h3.809c5.323,0,10.357,1.798,10.357,7.91 - C177.224,67.07,172.189,68.868,166.866,68.868z"/> - <rect x="194.309" y="42.332" fill="#F9A731" width="13.52" height="59.328"/> - <polygon fill="#F9A731" points="266.516,42.332 249.689,42.332 238.759,58.514 227.827,42.332 211.721,42.332 230.417,69.73 - 210.228,101.66 226.982,101.66 238.759,81.453 250.534,101.66 268.01,101.66 247.099,69.73 "/> - <polygon fill="#F9A731" points="270.128,101.66 304.069,101.66 304.069,89.795 283.647,89.795 283.647,77.857 303.207,77.857 - 303.207,65.991 283.647,65.991 283.647,54.199 304.069,54.199 304.069,42.332 270.128,42.332 "/> - <path fill="#F9A731" d="M354.807,42.332l-19.156,47.463H322.33V42.332h-13.52v59.328h22.053h11.888h2.636l4.386-11.865h22.578 - l4.391,11.865h14.524l-23.944-59.328H354.807z M354.377,77.928l6.614-17.257h0.145l6.615,17.257H354.377z"/> - <polygon fill="#F9A731" points="379.939,54.199 394.073,54.199 394.073,101.66 407.592,101.66 407.592,54.199 421.687,54.199 - 421.687,42.332 379.939,42.332 "/> - <polygon fill="#F9A731" points="426.265,101.66 460.207,101.66 460.207,89.795 439.785,89.795 439.785,77.857 459.344,77.857 - 459.344,65.991 439.785,65.991 439.785,54.199 460.207,54.199 460.207,42.332 426.265,42.332 "/> - <path fill="#F9A731" d="M479.792,42.332h-14.94v59.328h14.94c16.324,0,29.914-12.37,29.914-29.699 - C509.707,54.701,496.044,42.332,479.792,42.332z M480.457,89.577h-2.084V54.414h2.084c10.067,0,16.9,7.695,16.9,17.619 - C497.285,81.955,490.455,89.577,480.457,89.577z"/> -</g> -</svg> diff --git a/web-ui/signup/images/sent_email.png b/web-ui/signup/images/sent_email.png Binary files differdeleted file mode 100644 index ddaa11d0..00000000 --- a/web-ui/signup/images/sent_email.png +++ /dev/null diff --git a/web-ui/signup/index.html b/web-ui/signup/index.html deleted file mode 100644 index a1836721..00000000 --- a/web-ui/signup/index.html +++ /dev/null @@ -1,18 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - <title>Pixelated Mail</title> - <meta name="description" content=""> - <meta name="viewport" content="width=device-width"> - <link rel="stylesheet" href="bundle.css"> - </head> - <body> - <header><img src="images/pixelated-logo-orange.svg" alt="Pixelated" class="logo"/></header> - <div class="message"> - <div id="app"></div> - <script src="bundle.js"></script> - </div> - </body> -</html> diff --git a/web-ui/signup/src/index.js b/web-ui/signup/src/index.js deleted file mode 100644 index 35de6407..00000000 --- a/web-ui/signup/src/index.js +++ /dev/null @@ -1,223 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {createStore} from 'redux'; -import {Map} from 'immutable'; -import 'whatwg-fetch'; - - -class PixelatedComponent extends React.Component { - _updateStateFromStore() { - this.setState(this.props.store.getState().toJS()); - } - - componentWillMount() { - this.unsubscribe = this.props.store.subscribe(() => this._updateStateFromStore()); - this._updateStateFromStore(); - } - - componentWillUnmount() { - this.unsubscribe() - } -} - - -class PixelatedForm extends PixelatedComponent { - _fetchAndDispatch(url, actionProperties) { - const immutableActionProperties = new Map(actionProperties); - this.props.store.dispatch(immutableActionProperties.merge({status: 'STARTED'}).toJS()); - fetch(url).then((response) => { - console.debug('got a reply', response); - return response.json() - }).then((json) => { - console.debug('got json', json); - setTimeout(() => { - this.props.store.dispatch(immutableActionProperties.merge({status: 'SUCCESS', json: json}).toJS()); - }, 3000); - }).catch((error) => { - console.error('something went wrong', error); - this.props.store.dispatch(immutableActionProperties.merge({status: 'ERROR', error: error}).toJS()); - }); - } -} - - -class InviteCodeForm extends PixelatedForm { - render() { - return ( - <form onSubmit={this._handleClick.bind(this)}> - <div className="field-group"> - <input type="text" name="invite-code" className="invite-code" required/> - <label className="animated-label" htmlFor="invite-code">invite code</label> - </div> - <input type="submit" value="Get Started" className="blue-button validation-link" /> - </form> - ); - } - - _handleClick(event) { - event.stopPropagation(); - event.preventDefault(); - this.props.store.dispatch({type: 'SUBMIT_INVITE_CODE', inviteCode: event.target['invite-code'].value}); - } -} - - -class CreateAccountForm extends PixelatedForm { - render() { - return ( - <form onSubmit={this._handleClick.bind(this)}> - <span className="domain-label"> @domain.com </span> - <div className="field-group"> - <input type="text" name="username" className="username" required/> - <label className="animated-label" htmlFor="username">username</label> - </div> - - <div className="field-group"> - <input type="password" name="password" className="password" required/> - <label className="animated-label" htmlFor="password">password</label> - </div> - - <input type="submit" value="Create my account" className="blue-button validation-link" /> - </form> - ); - } - - _handleClick(event) { - event.stopPropagation(); - event.preventDefault(); - this.props.store.dispatch({type: 'SUBMIT_CREATE_ACCOUNT', username: event.target['username'].value, password: event.target['password'].value}); - } -} - - -class BackupEmailForm extends PixelatedForm { - render() { - return ( - <form onSubmit={this._handleClick.bind(this)}> - <div className="field-group"> - <input type="text" name="backup-email" required/> - <label className="animated-label" htmlFor="password">type your backup email</label> - </div> - - <input type="submit" value="Send Email" className="blue-button validation-link" /> - <p className="link-message"> - <a href="#" className="validation-link">I didn't receive anything. Send the email again</a> - </p> - </form> - ); - } - - _handleClick(event) { - event.stopPropagation(); - event.preventDefault(); - this._fetchAndDispatch('dummy.json', {type: 'SUBMIT_BACKUP_EMAIL', backupEmail: event.target['backup-email'].value}); - } -} - - -class BackupEmailSentForm extends PixelatedForm { - render() { - return ( - <form onSubmit={this._handleClick.bind(this)}> - {this.state.isFetching || <a href="/" className="blue-button">I received the codes. <br/>Go to my inbox</a>} - <p className="link-message"> - <a href="#">I didn't receive anything. Send the email again</a> - </p> - </form> - ); - } - - _handleClick(event) { - event.stopPropagation(); - event.preventDefault(); - } -} - - -class SignUp extends PixelatedComponent { - render() { - return ( - <div> - <div className="message"> - <h1>{this.state.header}</h1> - {this.state.icon} - <p>{this.state.summary}</p> - </div> - <div className="form-container"> - {this._form()} - </div> - </div> - ); - } - - _form() { - switch(this.state.form) { - case 'invite_code': return <InviteCodeForm store={store} />; - case 'create_account': return <CreateAccountForm store={store} />; - case 'backup_email': return <BackupEmailForm store={store} />; - case 'backup_email_sent': return <BackupEmailSentForm store={store} />; - default: throw Error('TODO'); - } - } -} - - -const initialState = new Map({ - isFetching: false, - form: 'invite_code', - header: 'Welcome', - icon: null, - summary: ['Do you have an invite code?', <br key='br1' />, 'Type it below'], -}); - - -const store = createStore((state=initialState, action) => { - switch (action.type) { - case 'SUBMIT_INVITE_CODE': - return state.merge({ - inviteCode: action.inviteCode, - form: 'create_account', - header: 'Create your account', - summary: 'Choose your username, and be careful about your password, it must be strong and easy to remember. If you have a password manager, we strongly advise you to use one.', - }); - case 'SUBMIT_CREATE_ACCOUNT': - return state.merge({ - username: action.username, - password: action.password, - form: 'backup_email', - header: 'In case you lose your password...', - summary: 'Set up a backup email account. You\'ll receive an email with a code so you can recover your account in the future, other will be sent to your account administrator.', - }); - case 'SUBMIT_BACKUP_EMAIL': - switch (action.status) { - case 'STARTED': - return state.merge({ - isFetching: true, - backupEmail: action.backupEmail, - form: 'backup_email_sent', - icon: <p><img key="img1" src="images/sent_email.png" className="sent-email-icon"/></p>, - summary: 'An email was sent to the email you provided. Check your spam folder, just in case.', - }); - case 'SUCCESS': - return state.merge({ - isFetching: false, - }); - case 'ERROR': - return state.merge({ - isFetching: false, - }); - default: - return state; - } - case 'SUBMIT_BACKUP_EMAIL_SENT': - return state.merge({}); - default: - return state; - } -}); - - -ReactDOM.render( - <SignUp store={store}/>, - document.getElementById('app') -); |