diff --git a/client/coral-admin/src/components/ui/Drawer.css b/client/coral-admin/src/components/ui/Drawer.css new file mode 100644 index 000000000..e69de29bb diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js index 2003ed34d..8fdf4f19d 100644 --- a/client/coral-admin/src/components/ui/Drawer.js +++ b/client/coral-admin/src/components/ui/Drawer.js @@ -1,18 +1,49 @@ import React from 'react'; import {Navigation, Drawer} from 'react-mdl'; -import {Link} from 'react-router'; -import styles from './Header.css'; +import {IndexLink, Link} from 'react-router'; +import styles from './Drawer.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; -export default () => ( - - - {lang.t('configure.moderate')} - {lang.t('configure.community')} - {lang.t('configure.configure')} - +export default ({handleLogout, restricted = false}) => ( + + { !restricted ? +
+ + + {lang.t('configure.dashboard')} + + + {lang.t('configure.moderate')} + + + {lang.t('configure.streams')} + + + {lang.t('configure.community')} + + + {lang.t('configure.configure')} + + Sign Out + {`v${process.env.VERSION}`} + +
: null } ); const lang = new I18n(translations); + diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css index e6cf85d23..e30cb46d7 100644 --- a/client/coral-admin/src/components/ui/Header.css +++ b/client/coral-admin/src/components/ui/Header.css @@ -1,7 +1,25 @@ +@custom-media --table-viewport (max-width: 1024px); + +@media (--table-viewport) { + .logo { + margin-left: 58px; + h1 { + background: #696969; + } + span { + color: #fcfcfc; + } + } + .nav { + display: none; + } +} + .header { background-color: transparent; box-shadow: none; min-height: 58px; + display: block; } .header > div { diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index 141d7fecf..556b33b6c 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/client/coral-admin/src/components/ui/Header.js @@ -8,7 +8,7 @@ import {Logo} from './Logo'; export default ({handleLogout, restricted = false}) => (
- + { !restricted ?
diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js index 46c7aa7fa..f28e8dd80 100644 --- a/client/coral-admin/src/components/ui/Layout.js +++ b/client/coral-admin/src/components/ui/Layout.js @@ -6,8 +6,8 @@ import styles from './Layout.css'; export const Layout = ({children, ...props}) => ( -
- +
+
{children}
diff --git a/client/coral-admin/src/components/ui/Logo.js b/client/coral-admin/src/components/ui/Logo.js index 05a7707d7..8c57cde11 100644 --- a/client/coral-admin/src/components/ui/Logo.js +++ b/client/coral-admin/src/components/ui/Logo.js @@ -2,8 +2,8 @@ import React from 'react'; import styles from './Logo.css'; import {CoralLogo} from 'coral-ui'; -export const Logo = () => ( -
+export const Logo = ({className = ''}) => ( +

Talk diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js index 306461dd0..00190847a 100644 --- a/client/coral-admin/src/index.js +++ b/client/coral-admin/src/index.js @@ -7,6 +7,9 @@ import store from './services/store'; import App from './components/App'; +import 'react-mdl/extra/material.css'; +import 'react-mdl/extra/material.js'; + render( diff --git a/client/coral-framework/helpers/response.js b/client/coral-framework/helpers/response.js index 64803faef..0fce878cd 100644 --- a/client/coral-framework/helpers/response.js +++ b/client/coral-framework/helpers/response.js @@ -45,7 +45,7 @@ const handleResp = res => { } if (err.error && err.error.translation_key) { - message = err.error.translation_key; + error.translation_key = err.error.translation_key; } error.message = message; diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/client/coral-sign-in/components/CreateUsernameDialog.js index d245b38ac..d0e348046 100644 --- a/client/coral-sign-in/components/CreateUsernameDialog.js +++ b/client/coral-sign-in/components/CreateUsernameDialog.js @@ -3,14 +3,18 @@ import TextField from 'coral-ui/components/TextField'; import Alert from './Alert'; import Button from 'coral-ui/components/Button'; import {Dialog} from 'coral-ui'; +import FakeComment from './FakeComment'; + import styles from './styles.css'; + import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations'; const lang = new I18n(translations); -const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmitUsername, handleChange, ...props}) => ( +const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmitUsername, handleChange, ...props}) => { + return (

- +

{lang.t('createdisplay.yourusername')}

+ +

{lang.t('createdisplay.ifyoudontchangeyourname')}

{ props.auth.error && {props.auth.error} }
- - { props.errors.username && {lang.t('createdisplay.specialCharacters')} } -
+ { props.errors.username && {lang.t('createdisplay.specialCharacters')} } +
+
-); + ); +}; export default CreateUsernameDialog; diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js new file mode 100644 index 000000000..b5af6bf1c --- /dev/null +++ b/client/coral-sign-in/components/FakeComment.js @@ -0,0 +1,66 @@ +import React from 'react'; +import styles from 'coral-embed-stream/src/Comment.css'; + +import AuthorName from 'coral-plugin-author-name/AuthorName'; +import Content from 'coral-plugin-commentcontent/CommentContent'; +import PubDate from 'coral-plugin-pubdate/PubDate'; +import {ReplyButton} from 'coral-plugin-replies'; + +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../translations'; + +const lang = new I18n(translations); + +class FakeComment extends React.Component { + constructor (props) { + super(props); + } + + render () { + const {username, created_at, body} = this.props; + + return ( +
+
+ + + +
+
+ +
+ {}} + parentCommentId={'commentID'} + currentUserId={{}} + banned={false} + /> +
+
+
+ +
+
+ +
+
+
+ ); + } +} + +export default FakeComment; diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 87e762ebf..31d4a4fed 100644 --- a/client/coral-sign-in/components/styles.css +++ b/client/coral-sign-in/components/styles.css @@ -118,7 +118,7 @@ input.error{ } .action { - margin-top: 15px; + margin-top: 0px; } .passwordRequestSuccess { @@ -141,6 +141,40 @@ input.error{ display: block; } -.confirmSubmit { +/* Change username Dialog*/ +.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; +} + +.example { + display: block; +} + +.ifyoudont { + display: block; + margin-top: 15px; +} + +.saveusername { + display: block; + width: 100%; +} + +.savebutton { + display: inline; + background-color: rgb(105,105,105); + color: white; +} + +.fakeComment { + display: block; + margin-bottom: 5px; } diff --git a/client/coral-sign-in/containers/ChangeUsernameContainer.js b/client/coral-sign-in/containers/ChangeUsernameContainer.js index 33ae63614..c4450aa56 100644 --- a/client/coral-sign-in/containers/ChangeUsernameContainer.js +++ b/client/coral-sign-in/containers/ChangeUsernameContainer.js @@ -29,6 +29,7 @@ class ChangeUsernameContainer extends Component { constructor(props) { super(props); + this.initialState.formData.username = props.user.username; this.state = this.initialState; this.handleChange = this.handleChange.bind(this); this.handleSubmitUsername = this.handleSubmitUsername.bind(this); @@ -103,7 +104,7 @@ class ChangeUsernameContainer extends Component { return (
(err, user) => { /** * Returns the response to the login attempt via a popup callback with some JS. */ + const HandleAuthPopupCallback = (req, res, next) => (err, user) => { if (err) { return res.render('auth-callback', {err: JSON.stringify(err), data: null}); @@ -70,20 +70,15 @@ const HandleAuthPopupCallback = (req, res, next) => (err, user) => { return res.render('auth-callback', {err: JSON.stringify(errors.ErrNotAuthorized), data: null}); } - // Authorize the user to edit their username. - UsersService.toggleNameEdit(user.id, true) - .then(() => { - - // Perform the login of the user! - req.logIn(user, (err) => { - if (err) { - return res.render('auth-callback', {err: JSON.stringify(err), data: null}); - } + // Perform the login of the user! + req.logIn(user, (err) => { + if (err) { + return res.render('auth-callback', {err: JSON.stringify(err), data: null}); + } - // We logged in the user! Let's send back the user data. - res.render('auth-callback', {err: null, data: JSON.stringify(user)}); - }); - }); + // We logged in the user! Let's send back the user data. + res.render('auth-callback', {err: null, data: JSON.stringify(user)}); + }); }; /** diff --git a/services/users.js b/services/users.js index cf3a0063d..b58776a75 100644 --- a/services/users.js +++ b/services/users.js @@ -124,6 +124,8 @@ module.exports = class UsersService { return user; } + // User does not exist and need to be created. + let username = UsersService.castUsername(displayName); // The user was not found, lets create them! @@ -131,7 +133,8 @@ module.exports = class UsersService { username, lowercaseUsername: username.toLowerCase(), roles: [], - profiles: [{id, provider}] + profiles: [{id, provider}], + canEditName: true }); return user.save();