ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-11-26 16:52:06 +05:30
Code Issues Packages Projects Releases Wiki Activity

Очень грубо раскидал верстку на компоненты

Browse Source
This commit is contained in:
SleepWalker 2016-01-16 14:06:22 +02:00
parent e01259d517
commit 0f5781a3a7
10 changed files with 286 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/auth/Activation.jsx Normal file
View File

@ -0,0 +1,48 @@
import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import buttons from 'components/ui/buttons.scss';
import { Panel, PanelBody, PanelFooter } from 'components/ui/Panel';
import { Input } from 'components/ui/Form';
import styles from './signIn.scss';
import messages from './SignIn.messages';
export default class Activation extends Component {
displayName = 'Activation';
render() {
return (
<div className={styles.signIn}>
<Panel icon="arrowLeft" title={<Message {...messages.accountActivationTitle} />}>
<PanelBody>
<div className={styles.description}>
<div className={styles.descriptionImage} />
<div className={styles.descriptionText}>
<Message {...messages.activationMailWasSent} values={{
email: (<b>erickskrauch@yandex.ru</b>)
}} />
</div>
</div>
<div className={styles.formRow}>
{/* TODO: E-mail i18n*/}
<Input type="email" color="blue" className={styles.activationCodeInput} placeholder="Enter the code from E-mail here" />
</div>
</PanelBody>
<PanelFooter>
<button className={buttons.blue}>
<Message {...messages.confirmEmail} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.didNotReceivedEmail} />
</a>
</div>
</div>
);
}
}

37
src/components/auth/Login.jsx Normal file
View File

@ -0,0 +1,37 @@
import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import buttons from 'components/ui/buttons.scss';
import icons from 'components/ui/icons.scss';
import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
import { Input, Checkbox } from 'components/ui/Form';
import styles from './signIn.scss';
import messages from './SignIn.messages';
export default class Login extends Component {
displayName = 'Login';
render() {
return (
<div className={styles.signIn}>
<Panel title={<Message {...messages.signInTitle} />}>
<PanelBody>
<Input icon="envelope" type="email" placeholder="E-mail or username" />
</PanelBody>
<PanelFooter>
<button className={buttons.green}>
<Message {...messages.next} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.forgotPassword} />
</a>
</div>
</div>
);
}
}

60
src/components/auth/Password.jsx Normal file
View File

@ -0,0 +1,60 @@
import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import buttons from 'components/ui/buttons.scss';
import icons from 'components/ui/icons.scss';
import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
import { Input, Checkbox } from 'components/ui/Form';
import styles from './signIn.scss';
import messages from './SignIn.messages';
export default class Password extends Component {
displayName = 'Password';
render() {
return (
<div className={styles.signIn}>
<Panel icon="arrowLeft" title={<Message {...messages.enterPassword} />}>
<PanelBody>
<PanelBodyHeader type="error">
<Message {...messages.invalidPassword} />
<br/>
<Message {...messages.suggestResetPassword} values={{
link: (
<a href="#">
<Message {...messages.forgotYourPassword} />
</a>
)
}} />
</PanelBodyHeader>
<div className={styles.miniProfile}>
<div className={styles.avatar}>
{/*<img src="//lorempixel.com/g/90/90" />*/}
<span className={icons.user} />
</div>
<div className={styles.email}>
{/* На деле тут может быть и ник, в зависимости от того, что введут в 1 вьюху */}
erickskrauch@yandex.ru
</div>
</div>
<Input icon="key" type="password" placeholder="Account password" />
<Checkbox label={<Message {...messages.rememberMe} />} />
</PanelBody>
<PanelFooter>
<button className={buttons.green}>
<Message {...messages.signInButton} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.forgotPassword} />
</a>
</div>
</div>
);
}
}

59
src/components/auth/Permissions.jsx Normal file
View File

@ -0,0 +1,59 @@
import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import buttons from 'components/ui/buttons.scss';
import icons from 'components/ui/icons.scss';
import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
import { Input, Checkbox } from 'components/ui/Form';
import styles from './signIn.scss';
import messages from './SignIn.messages';
export default class Permissions extends Component {
displayName = 'Permissions';
render() {
return (
<div className={styles.signIn}>
<Panel title={<Message {...messages.permissionsTitle} />}>
<PanelBody className={styles.authBody}>
<PanelBodyHeader className={styles.authBodyHeader}>
<div className={styles.authInfo}>
<div className={styles.authInfoAvatar}>
{/*<img src="//lorempixel.com/g/90/90" />*/}
<span className={icons.user} />
</div>
<div className={styles.authInfoTitle}>
<Message {...messages.youAuthorizedAs} />
</div>
<div className={styles.authInfoEmail}>
erickskrauch@yandex.ru
</div>
</div>
</PanelBodyHeader>
<div className={styles.disclaimer}>
<Message {...messages.theAppNeedsAccess} />
</div>
<ul className={styles.permissionsList}>
<li>Authorization for Minecraft servers</li>
<li>Manage your skins directory and additional rows for multiline</li>
<li>Change the active skin</li>
<li>View your E-mail address</li>
</ul>
</PanelBody>
<PanelFooter>
<button className={buttons.green}>
<Message {...messages.approve} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.decline} />
</a>
</div>
</div>
);
}
}

54
src/components/auth/Register.jsx Normal file
View File

@ -0,0 +1,54 @@
import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import buttons from 'components/ui/buttons.scss';
import icons from 'components/ui/icons.scss';
import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
import { Input, Checkbox } from 'components/ui/Form';
import styles from './signIn.scss';
import messages from './SignIn.messages';
export default class Register extends Component {
displayName = 'Register';
render() {
return (
<div className={styles.signIn}>
<Panel title={<Message {...messages.signUpTitle} />}>
<PanelBody>
{/* TODO: E-mail i18n*/}
<Input icon="user" color="blue" type="text" placeholder="Your nickname" />
{/* TODO: E-mail i18n*/}
<Input icon="envelope" color="blue" type="email" placeholder="Your E-mail" />
{/* TODO: Account password i18n*/}
<Input icon="key" color="blue" type="password" placeholder="Account password" />
{/* TODO: Account password i18n*/}
<Input icon="key" color="blue" type="password" placeholder="Repeat password" />
<Checkbox color="blue" label={
<Message {...messages.acceptRules} values={{
link: (
<a href="#">
<Message {...messages.termsOfService} />
</a>
)
}} />
} />
</PanelBody>
<PanelFooter>
<button className={buttons.blue}>
<Message {...messages.signUpButton} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.didNotReceivedEmail} />
</a>
</div>
</div>
);
}
}

197
src/components/auth/SignIn.jsx
View File

@ -1,197 +0,0 @@
import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import classNames from 'classnames';
import buttons from 'components/ui/buttons.scss';
import icons from 'components/ui/icons.scss';
import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
import { Input, Checkbox } from 'components/ui/Form';
import styles from './signIn.scss';
import messages from './SignIn.messages';
// 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)
/**
* Forms:
* Register
* - RegisterForm
* - ConfirmRegister
*
* SignIn
* - Email
* - Password
* - Permissions
*/
export default class SignIn extends Component {
displayName = 'SignIn';
render() {
return (
<div>
<div className={styles.signIn}>
<Panel title={<Message {...messages.signInTitle} />}>
<PanelBody>
<Input icon="envelope" type="email" placeholder="E-mail or username" />
</PanelBody>
<PanelFooter>
<button className={buttons.green}>
<Message {...messages.next} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.forgotPassword} />
</a>
</div>
</div>
<div className={styles.signIn}>
<Panel icon="arrowLeft" title={<Message {...messages.enterPassword} />}>
<PanelBody>
<PanelBodyHeader type="error">
<Message {...messages.invalidPassword} />
<br/>
<Message {...messages.suggestResetPassword} values={{
link: (
<a href="#">
<Message {...messages.forgotYourPassword} />
</a>
)
}} />
</PanelBodyHeader>
<div className={styles.miniProfile}>
<div className={styles.avatar}>
{/*<img src="//lorempixel.com/g/90/90" />*/}
<span className={icons.user} />
</div>
<div className={styles.email}>
{/* На деле тут может быть и ник, в зависимости от того, что введут в 1 вьюху */}
erickskrauch@yandex.ru
</div>
</div>
<Input icon="key" type="password" placeholder="Account password" />
<Checkbox label={<Message {...messages.rememberMe} />} />
</PanelBody>
<PanelFooter>
<button className={buttons.green}>
<Message {...messages.signInButton} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.forgotPassword} />
</a>
</div>
</div>
<div className={styles.signIn}>
<Panel title={<Message {...messages.permissionsTitle} />}>
<PanelBody className={styles.authBody}>
<PanelBodyHeader className={styles.authBodyHeader}>
<div className={styles.authInfo}>
<div className={styles.authInfoAvatar}>
{/*<img src="//lorempixel.com/g/90/90" />*/}
<span className={icons.user} />
</div>
<div className={styles.authInfoTitle}>
<Message {...messages.youAuthorizedAs} />
</div>
<div className={styles.authInfoEmail}>
erickskrauch@yandex.ru
</div>
</div>
</PanelBodyHeader>
<div className={styles.disclaimer}>
<Message {...messages.theAppNeedsAccess} />
</div>
<ul className={styles.permissionsList}>
<li>Authorization for Minecraft servers</li>
<li>Manage your skins directory and additional rows for multiline</li>
<li>Change the active skin</li>
<li>View your E-mail address</li>
</ul>
</PanelBody>
<PanelFooter>
<button className={buttons.green}>
<Message {...messages.approve} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.decline} />
</a>
</div>
</div>
<div className={styles.signIn}>
<Panel title={<Message {...messages.signUpTitle} />}>
<PanelBody>
{/* TODO: E-mail i18n*/}
<Input icon="user" color="blue" type="text" placeholder="Your nickname" />
{/* TODO: E-mail i18n*/}
<Input icon="envelope" color="blue" type="email" placeholder="Your E-mail" />
{/* TODO: Account password i18n*/}
<Input icon="key" color="blue" type="password" placeholder="Account password" />
{/* TODO: Account password i18n*/}
<Input icon="key" color="blue" type="password" placeholder="Repeat password" />
<Checkbox color="blue" label={
<Message {...messages.acceptRules} values={{
link: (
<a href="#">
<Message {...messages.termsOfService} />
</a>
)
}} />
} />
</PanelBody>
<PanelFooter>
<button className={buttons.blue}>
<Message {...messages.signUpButton} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.didNotReceivedEmail} />
</a>
</div>
</div>
<div className={styles.signIn}>
<Panel icon="arrowLeft" title={<Message {...messages.accountActivationTitle} />}>
<PanelBody>
<div className={styles.description}>
<div className={styles.descriptionImage} />
<div className={styles.descriptionText}>
<Message {...messages.activationMailWasSent} values={{
email: (<b>erickskrauch@yandex.ru</b>)
}} />
</div>
</div>
<div className={styles.formRow}>
{/* TODO: E-mail i18n*/}
<Input type="email" color="blue" className={styles.activationCodeInput} placeholder="Enter the code from E-mail here" />
</div>
</PanelBody>
<PanelFooter>
<button className={buttons.blue}>
<Message {...messages.confirmEmail} />
</button>
</PanelFooter>
</Panel>
<div className={styles.helpLinks}>
<a href="#">
<Message {...messages.didNotReceivedEmail} />
</a>
</div>
</div>
</div>
);
}
}

7
src/pages/auth/SignInPage.jsx → src/pages/auth/AuthPage.jsx
View File

@ -1,11 +1,12 @@
import React, { Component } from 'react';
import SignIn from 'components/auth/SignIn';
import AppInfo from 'components/auth/AppInfo';
import styles from './auth.scss';
export default class SignInPage extends Component {
export default class AuthPage extends Component {
displayName = 'AuthPage';
render() {
var appInfo = {
name: 'TLauncher',
@ -18,7 +19,7 @@ export default class SignInPage extends Component {
<AppInfo {...appInfo} />
</div>
<div className={styles.content}>
<SignIn />
{this.props.children}
</div>
</div>
);

9
src/pages/index/IndexPage.jsx
View File

@ -1,11 +1,16 @@
import React, { Component } from 'react';
import SignInPage from 'pages/auth/SignInPage';
import AuthPage from 'pages/auth/AuthPage';
import Login from 'components/auth/Login';
export default class IndexPage extends Component {
displayName = 'IndexPage';
render() {
return (
<SignInPage />
<AuthPage>
<Login />
</AuthPage>
);
}
}

18
src/routes.js
View File

@ -3,11 +3,25 @@ import { Route, IndexRoute } from 'react-router';
import RootPage from 'pages/root/RootPage';
import IndexPage from 'pages/index/IndexPage';
import SignInPage from 'pages/auth/SignInPage';
import AuthPage from 'pages/auth/AuthPage';
import Register from 'components/auth/Register';
import Login from 'components/auth/Login';
import Permissions from 'components/auth/Permissions';
import Activation from 'components/auth/Activation';
import Password from 'components/auth/Password';
export default (
<Route path="/" component={RootPage}>
<IndexRoute component={IndexPage} />
<Route path="/signin" component={SignInPage} />
<Route path="auth" component={AuthPage}>
<Route path="/login" component={Login} />
<Route path="/password" component={Password} />
<Route path="/register" component={Register} />
<Route path="/activation" component={Activation} />
<Route path="/oauth/permissions" component={Permissions} />
<Route path="/oauth/:id" component={Permissions} />
</Route>
</Route>
);

1
webpack.config.js
View File

@ -48,6 +48,7 @@ var webpackConfig = {
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},