Working on containers

This commit is contained in:
okbel
2018-03-23 16:03:33 -03:00
parent a53194b4a0
commit 2fe17d29e3
5 changed files with 9273 additions and 43 deletions
File diff suppressed because it is too large Load Diff
@@ -3,3 +3,5 @@ const prefix = 'TALK_AUTH';
export const SET_VIEW = `${prefix}_SET_VIEW`;
export const SET_EMAIL = `${prefix}_SET_EMAIL`;
export const SET_PASSWORD = `${prefix}_SET_PASSWORD`;
export const ENABLE_SUBMIT = `${prefix}_ENABLE_SUBMIT`;
export const DISABLE_SUBMIT = `${prefix}_DISABLE_SUBMIT`;
@@ -5,10 +5,21 @@ const initialState = {
view: views.SIGN_IN,
email: '',
password: '',
enableSubmit: true,
};
export default function reducer(state = initialState, action) {
switch (action.type) {
case actions.ENABLE_SUBMIT:
return {
...state,
enableSubmit: true,
};
case actions.DISABLE_SUBMIT:
return {
...state,
enableSubmit: false,
};
case actions.SET_VIEW:
return {
...state,
@@ -1,3 +1,10 @@
.dialogusername {
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: 400px;
top: 10px;
}
.yourusername {
display: block;
}
@@ -1,7 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './SetUsernameDialog.css';
import { Alert, TextField, Button } from 'plugin-api/beta/client/components/ui';
import {
Dialog,
Alert,
TextField,
Button,
} from 'plugin-api/beta/client/components/ui';
import { FakeComment } from './FakeComment';
import { t } from 'plugin-api/beta/client/services';
@@ -17,50 +22,52 @@ class SetUsernameDialog extends React.Component {
const { username, usernameError, errorMessage } = this.props;
return (
<div>
<div className={styles.header}>
<h1>
{t('talk-plugin-auth.set_username_dialog.write_your_username')}
</h1>
</div>
<Dialog className={styles.dialogusername} id="createUsernameDialog" open>
<div>
<p className={styles.yourusername}>
{t('talk-plugin-auth.set_username_dialog.your_username')}
</p>
<FakeComment
className={styles.fakeComment}
username={username}
created_at={new Date().toISOString()}
body={t('talk-plugin-auth.set_username_dialog.fake_comment_body')}
/>
{errorMessage && <Alert>{errorMessage}</Alert>}
<form id="saveUsername" onSubmit={this.handleSubmit}>
{usernameError && (
<span className={styles.hint}>
{' '}
{t(
'talk-plugin-auth.set_username_dialog.special_characters'
)}{' '}
</span>
)}
<div className={styles.saveusername}>
<TextField
id="username"
style={{ fontSize: 16 }}
type="string"
label={t('talk-plugin-auth.set_username_dialog.username')}
value={username}
showErrors={!!usernameError}
errorMsg={usernameError}
onChange={this.handleUsernameChange}
/>
<Button id="save" type="submit" className={styles.saveButton}>
{t('talk-plugin-auth.set_username_dialog.save')}
</Button>
</div>
</form>
<div className={styles.header}>
<h1>
{t('talk-plugin-auth.set_username_dialog.write_your_username')}
</h1>
</div>
<div>
<p className={styles.yourusername}>
{t('talk-plugin-auth.set_username_dialog.your_username')}
</p>
<FakeComment
className={styles.fakeComment}
username={username}
created_at={new Date().toISOString()}
body={t('talk-plugin-auth.set_username_dialog.fake_comment_body')}
/>
{errorMessage && <Alert>{errorMessage}</Alert>}
<form id="saveUsername" onSubmit={this.handleSubmit}>
{usernameError && (
<span className={styles.hint}>
{' '}
{t(
'talk-plugin-auth.set_username_dialog.special_characters'
)}{' '}
</span>
)}
<div className={styles.saveusername}>
<TextField
id="username"
style={{ fontSize: 16 }}
type="string"
label={t('talk-plugin-auth.set_username_dialog.username')}
value={username}
showErrors={!!usernameError}
errorMsg={usernameError}
onChange={this.handleUsernameChange}
/>
<Button id="save" type="submit" className={styles.saveButton}>
{t('talk-plugin-auth.set_username_dialog.save')}
</Button>
</div>
</form>
</div>
</div>
</div>
</Dialog>
);
}
}