Moves create displayname dialog to sign-in plugin.

client/coral-framework/components/Alert.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-
-const Alert = ({cStyle = 'error', children, className, ...props}) => (
-  <div
-    className={`${styles.alert} ${styles[`alert--${cStyle}`]} ${className}`}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-export default Alert;

client/coral-framework/components/CreateDisplayNameDialog.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import FormField from './FormField';
-import Alert from './Alert';
-import Button from 'coral-ui/components/Button';
-import {Dialog} from 'coral-ui';
-import styles from './styles.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
-const lang = new I18n(translations);
-
-const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSubmitDisplayName, handleChange, ...props}) => (
-  <Dialog
-    className={styles.dialog}
-    id="createDisplayNameDialog"
-    open={open}
-    style={{
-      position: 'relative',
-      top: offset !== 0 && offset
-    }}>
-    <span className={styles.close} onClick={handleClose}>×</span>
-    <div>
-      <div className={styles.header}>
-        <h1>
-          {lang.t('createdisplay.writeyourusername')}
-        </h1>
-      </div>
-      <div>
-        <p>{lang.t('createdisplay.yourusername')}</p>
-        { props.auth.error && <Alert>{props.auth.error}</Alert> }
-        <form id="saveDisplayName" onSubmit={handleSubmitDisplayName}>
-          <FormField
-            id="displayName"
-            type="string"
-            label={lang.t('createdisplay.displayName')}
-            value={formData.displayName}
-            onChange={handleChange}
-          />
-          { props.errors.displayName && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
-          <div className={styles.action}>
-            <Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
-          </div>
-      </form>
-      </div>
-    </div>
-  </Dialog>
-);
-
-export default CreateDisplayNameDialog;

client/coral-framework/components/FormField.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-
-const FormField = ({className, showErrors = false, errorMsg, label, ...props}) => (
-  <div className={`${styles.formField} ${className ? className : ''}`}>
-    <label htmlFor={props.id}>
-      {label}
-    </label>
-    <input
-      className={showErrors && errorMsg ? styles.error : ''}
-      name={props.id}
-      {...props}
-    />
-    {showErrors && errorMsg && <span className={styles.errorMsg}><span className={styles.attention}>!</span>{errorMsg}</span>}
-  </div>
-);
-
-export default FormField;

client/coral-framework/components/styles.css

@@ -1,140 +0,0 @@
-.dialog {
-    border: none;
-    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
-    width: 280px;
-    top: 10px;
-}
-
-.header {
-    margin-bottom: 20px;
-}
-
-.header h1, .separator h1{
-    text-align: center;
-    font-size: 1.2em;
-}
-
-.formField {
-    margin-top: 15px;
-}
-
-.formField label {
-    font-size: 1.08em;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.formField input {
-    width: 100%;
-    display: block;
-    border: none;
-    outline: none;
-    border: 1px solid rgba(0,0,0,.12);
-    padding: 10px 6px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin: 5px auto;
-}
-
-.footer {
-    margin: 20px auto 10px;
-    text-align: center;
-}
-
-.footer span {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.footer a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0 5px;
-}
-
-.socialConnections {
-    margin-bottom: 20px;
-}
-
-.signInButton {
-    margin-top: 10px;
-}
-
-.close {
-    font-size: 20px;
-    line-height: 14px;
-    top: 10px;
-    right: 10px;
-    position: absolute;
-    display: block;
-    font-weight: bold;
-    color: #363636;
-    cursor: pointer;
-}
-
-.close:hover {
-    color: #6b6b6b;
-}
-
-input.error{
-    border: solid 2px #f44336;
-}
-
-.errorMsg, .hint {
-    color: grey;
-    font-weight: 600;
-    padding: 3px 0 16px;
-}
-
-.alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-}
-
-.alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
-}
-
-.alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
-}
-
-.userBox {
-  padding: 10px 0 20px;
-  letter-spacing: 0.1px;
-}
-
-.userBox a {
-    color: black;
-    font-weight: bold;
-    cursor: pointer;
-    margin: 0px;
-    margin-left: 4px;
-    padding-bottom: 2px;
-    border-bottom: solid 1px black;
-}
-
-.attention {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    background: #B71C1C;
-    color: #FFEBEE;
-    font-weight: bolder;
-    padding: 4px;
-    vertical-align: middle;
-    border-radius: 20px;
-    box-sizing: border-box;
-    font-size: 9px;
-    line-height: 7px;
-    text-align: center;
-    margin-right: 5px;
-}
-
-.action {
-    margin-top: 15px;
-}