diff --git a/src/components/auth/SignIn.jsx b/src/components/auth/SignIn.jsx
index 80b7f83..bca8731 100644
--- a/src/components/auth/SignIn.jsx
+++ b/src/components/auth/SignIn.jsx
@@ -1,12 +1,252 @@
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, PanelHeader, PanelBody, PanelFooter } from 'components/ui/Panel';
+import { Input } from 'components/ui/Form';
+
+import styles from './signIn.scss';
+import messages from './SignIn.messages';
+
+
+import panel from 'components/ui/panel.scss';
+styles.headerControl = panel.headerControl;
+
// 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 (
- Hello World
+
+
}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }} />
+
+
+
+
![](//lorempixel.com/g/90/90)
+
+
+ erickskrauch@yandex.ru
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
}>
+
+
+
+
![](//lorempixel.com/g/90/90)
+
+
+
+
+
+ erickskrauch@yandex.ru
+
+
+
+
+
+
+ -
+ one two three
+
+ -
+ one two three
+
+ -
+ one two three
+
+ -
+ one two three
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ erickskrauch@yandex.ru)
+ }} />
+
+
+
+ {/* TODO: E-mail i18n*/}
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/auth/SignIn.messages.js b/src/components/auth/SignIn.messages.js
new file mode 100644
index 0000000..6fe44d3
--- /dev/null
+++ b/src/components/auth/SignIn.messages.js
@@ -0,0 +1,124 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+ signInTitle: {
+ id: 'signInTitle',
+ defaultMessage: 'Sign in'
+ },
+
+ next: {
+ id: 'next',
+ defaultMessage: 'Next'
+ },
+
+ enterPassword: {
+ id: 'enterPassword',
+ defaultMessage: 'Enter password'
+ },
+
+ rememberMe: {
+ id: 'rememberMe',
+ defaultMessage: 'Remember me on this device'
+ },
+
+ signInButton: {
+ id: 'signInButton',
+ defaultMessage: 'Sign in'
+ },
+
+ invalidPassword: {
+ id: 'invalidPassword',
+ defaultMessage: 'You entered wrong account password.'
+ },
+
+ suggestResetPassword: {
+ id: 'suggestResetPassword',
+ defaultMessage: 'Are you have {link}?'
+ },
+
+ forgotYourPassword: {
+ id: 'forgotYourPassword',
+ defaultMessage: 'forgot your password'
+ },
+
+ forgotPassword: {
+ id: 'forgotPassword',
+ defaultMessage: 'Forgot password'
+ },
+
+ contactSupport: {
+ id: 'contactSupport',
+ defaultMessage: 'Contact support'
+ },
+
+
+
+ permissionsTitle: {
+ id: 'permissionsTitle',
+ defaultMessage: 'Application permissions'
+ },
+
+ youAuthorizedAs: {
+ id: 'youAuthorizedAs',
+ defaultMessage: 'You authorized as:'
+ },
+
+ theAppNeedsAccess: {
+ id: 'theAppNeedsAccess',
+ defaultMessage: 'This applications needs access to your data'
+ },
+
+ decline: {
+ id: 'decline',
+ defaultMessage: 'Decline'
+ },
+
+ approve: {
+ id: 'approve',
+ defaultMessage: 'Approve'
+ },
+
+
+
+ signUpTitle: {
+ id: 'signUpTitle',
+ defaultMessage: 'Sign Up'
+ },
+
+ signUpButton: {
+ id: 'signUpButton',
+ defaultMessage: 'Register'
+ },
+
+ acceptRules: {
+ id: 'acceptRules',
+ defaultMessage: 'I agree with {link}'
+ },
+
+ termsOfService: {
+ id: 'termsOfService',
+ defaultMessage: 'Terms of service'
+ },
+
+
+
+ accountActivationTitle: {
+ id: 'accountActivationTitle',
+ defaultMessage: 'Account activation'
+ },
+
+ activationMailWasSent: {
+ id: 'activationMailWasSent',
+ defaultMessage: 'Please check {email} for the message with the last registration step'
+ },
+
+ confirmEmail: {
+ id: 'confirmEmail',
+ defaultMessage: 'Confirm E-mail'
+ },
+
+ didNotReceivedEmail: {
+ id: 'didNotReceivedEmail',
+ defaultMessage: 'Did not received E-mail?'
+ },
+});
diff --git a/src/components/auth/signIn.scss b/src/components/auth/signIn.scss
new file mode 100644
index 0000000..afefafb
--- /dev/null
+++ b/src/components/auth/signIn.scss
@@ -0,0 +1,31 @@
+@import '~components/ui/colors.scss';
+
+.signIn {
+ margin-bottom: 10px;
+}
+
+.decline {
+ border-top: 1px solid lighter($black);
+ width: 42%;
+ flex-grow: 0;
+}
+
+.helpLinks {
+ margin: 8px 0;
+
+ color: #444;
+ text-align: center;
+ font-size: 16px;
+
+ a {
+ color: #444;
+ border-bottom: 1px dotted #444;
+ text-decoration: none;
+ transition: .25s;
+
+ &:hover {
+ border-bottom-color: #777;
+ color: #777;
+ }
+ }
+}
diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx
new file mode 100644
index 0000000..0bf7d05
--- /dev/null
+++ b/src/components/ui/Form.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import icons from './icons.scss';
+import styles from './form.scss';
+
+export function Input(props) {
+ props = {
+ type: 'text',
+ ...props
+ };
+
+ var baseClass = styles.formRow;
+ var icon;
+ if (props.icon) {
+ baseClass = styles.formIconRow;
+ icon = (
+
+ );
+ }
+
+ return (
+
+
+ {icon}
+
+ );
+}
diff --git a/src/components/ui/Panel.jsx b/src/components/ui/Panel.jsx
new file mode 100644
index 0000000..955a7a4
--- /dev/null
+++ b/src/components/ui/Panel.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import styles from './panel.scss';
+
+export function Panel(props) {
+ var { title } = props;
+
+ if (title) {
+ title = (
+
+ {title}
+
+ );
+ }
+
+ return (
+
+ {title}
+
+ {props.children}
+
+ );
+}
+
+export function PanelHeader(props) {
+ return (
+
+ {props.children}
+
+ );
+}
+
+export function PanelBody(props) {
+ return (
+
+ {props.children}
+
+ );
+}
+
+export function PanelFooter(props) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss
index 3cdbb33..f89c346 100644
--- a/src/components/ui/buttons.scss
+++ b/src/components/ui/buttons.scss
@@ -21,16 +21,20 @@
}
}
-.button {
+.button,
+.black {
display: inline-block;
+ box-sizing: border-box;
height: 50px;
padding: 0 15px;
+ border: none;
font-family: $font-family-title;
color: $defaultButtonTextColor;
font-size: 18px;
line-height: 50px;
text-decoration: none;
+ cursor: pointer;
transition: background-color 0.25s;
@@ -46,3 +50,4 @@
}
@include button-color('blue', $blue);
+@include button-color('green', $green);
diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss
new file mode 100644
index 0000000..800b1ca
--- /dev/null
+++ b/src/components/ui/form.scss
@@ -0,0 +1,76 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+.formRow {
+ position: relative;
+ height: 50px;
+ max-width: 100%;
+ margin: 10px 0;
+}
+
+.formIconRow {
+ composes: formRow;
+
+ .textField {
+ padding-left: 60px;
+ }
+}
+
+.textField {
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 50px;
+ width: 100%;
+
+ border: 2px solid lighter($black);
+ background: $black;
+
+ font-size: 20px;
+ color: #aaa;
+ font-family: $font-family-base;
+ padding: 0 10px;
+
+ transition: border-color .25s;
+
+ &::placeholder {
+ opacity: 1;
+ color: #444;
+ }
+
+ &:hover {
+ border-color: #aaa;
+
+ ~ .formFieldIcon {
+ border-color: #aaa;
+ }
+ }
+
+ &:focus {
+ border-color: $green;
+ color: #fff;
+
+ ~ .formFieldIcon {
+ background: $green;
+ border-color: $green;
+ color: #fff;
+ }
+ }
+}
+
+
+.formFieldIcon {
+ box-sizing: border-box;
+ position: absolute;
+ height: 50px;
+ width: 50px;
+ line-height: 46px;
+ text-align: center;
+ border: 2px solid lighter($black);
+ color: #444;
+
+ transition: border-color .25s;
+}
diff --git a/src/components/ui/panel.scss b/src/components/ui/panel.scss
new file mode 100644
index 0000000..70a234a
--- /dev/null
+++ b/src/components/ui/panel.scss
@@ -0,0 +1,56 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+.panel {
+ background: $black;
+}
+
+.header {
+ box-sizing: border-box;
+ height: 50px;
+ border-bottom: 1px solid lighter($black);
+
+ font-family: $font-family-title;
+ text-align: center;
+ line-height: 48px;
+ font-size: 20px;
+ color: #fff;
+}
+
+.headerControl {
+ float: left;
+ line-height: 1;
+ border-right: 1px solid lighter($black);
+ overflow: hidden;
+ height: 49px;
+}
+
+.body {
+ padding: 15px;
+ color: #ccc;
+ font-size: 18px;
+
+ b {
+ color: #fff;
+ }
+
+ a {
+ color: #fff;
+ border-bottom: 1px dotted #ede9e2;
+ text-decoration: none;
+ transition: .25s;
+
+ &:hover {
+ border-bottom-color: #ccc;
+ color: #ccc;
+ }
+ }
+}
+
+.footer {
+ display: flex;
+
+ > * {
+ flex-grow: 1;
+ }
+}
diff --git a/src/icons.css.hbs b/src/icons.css.hbs
index 8867089..1ae51ba 100644
--- a/src/icons.css.hbs
+++ b/src/icons.css.hbs
@@ -5,13 +5,17 @@
.{{baseClass}} {
line-height: 1;
+ vertical-align: middle;
+ display: inline-block;
+ speak: none;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
.{{baseClass}}:before {
font-family: {{fontName}} !important;
font-style: normal;
font-weight: normal !important;
- vertical-align: top;
}
{{#each codepoints}}
diff --git a/src/index.scss b/src/index.scss
index 440b50f..0e471b0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,6 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
html,
body,
:global(.app) {
@@ -6,6 +9,11 @@ body,
padding: 0;
}
+body {
+ font-family: $font-family-base;
+ background: $light;
+}
+
a {
text-decoration: none;
}
diff --git a/src/pages/auth/auth.scss b/src/pages/auth/auth.scss
index c818c25..a403a1c 100644
--- a/src/pages/auth/auth.scss
+++ b/src/pages/auth/auth.scss
@@ -2,7 +2,7 @@
.sidebar {
position: absolute;
- top: 0;
+ top: 50px;
bottom: 0;
left: 0;
width: 300px;
@@ -12,4 +12,5 @@
.content {
margin-left: 300px;
+ padding: 55px 50px;
}
diff --git a/src/pages/root/root.scss b/src/pages/root/root.scss
index 16905c7..e3d3a86 100644
--- a/src/pages/root/root.scss
+++ b/src/pages/root/root.scss
@@ -2,8 +2,7 @@
@import '~components/ui/fonts.scss';
.root {
- background: $light;
- min-height: 100%;
+ height: 100%;
}
.wrapper {
@@ -12,6 +11,7 @@
}
.header {
+ position: relative;
height: 50px;
background: $green;
}
@@ -33,25 +33,13 @@
.body {
composes: wrapper;
- position: absolute;
- top: 50px;
- left: 0;
- right: 0;
- bottom: 0;
-}
+ position: relative;
-.sidebar {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- width: 300px;
-
- background: $black;
-}
-
-.content {
- margin-left: 300px;
+ // place for header
+ min-height: 100%;
+ box-sizing: border-box;
+ padding-top: 50px;
+ margin-top: -50px;
}
.userbar {