Skip to content

Commit

Permalink
[component] Add login component #18
Browse files Browse the repository at this point in the history
Closes #18
  • Loading branch information
Vivekrajput20 committed Jul 28, 2019
1 parent d1dc857 commit 8a1b8f1
Show file tree
Hide file tree
Showing 13 changed files with 871 additions and 95 deletions.
65 changes: 33 additions & 32 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
{
"extends": [
"airbnb",
"prettier",
"prettier/react",
"jest-enzyme",
"plugin:jest/recommended"
],
"parser": "babel-eslint",
"plugins": ["prettier", "jest"],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"rules": {
"array-bracket-spacing": [2, "never"],
"semi": [2, "always"],
"react/prefer-stateless-function": [0],
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
]
}
"extends": [
"airbnb",
"prettier",
"prettier/react",
"jest-enzyme",
"plugin:jest/recommended"
],
"parser": "babel-eslint",
"plugins": ["prettier", "jest"],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"rules": {
"array-bracket-spacing": [2, "never"],
"semi": [2, "always"],
"jsx-a11y/label-has-for": 0,
"react/prefer-stateless-function": [0],
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
]
}
}
1 change: 1 addition & 0 deletions client/assets/default/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* */
213 changes: 213 additions & 0 deletions client/components/login/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
.owisp-login-container {
flex-grow: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
background: #f2f2f2;
width: 100%;
}
.owisp-login-form {
font-family: sans-serif;
background: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px 50px;
}
.owisp-login-form.success .owisp-login-input:invalid {
box-shadow: none;
}
.owisp-login-header-content {
text-transform: capitalize;
color: #444;
font-size: 28px;
margin-bottom: 4px;
}
.owisp-login-fieldset {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
align-self: flex-start;
}
.owisp-login-label {
margin-top: 15px;
margin-bottom: 5px;
}
.owisp-login-label-text {
color: #6b6b6b;
text-transform: capitalize;
}
.owisp-login-input {
padding: 10px;
border-radius: 3px;
font-size: 18px;
border: 2px solid #e7e7e7;
margin-top: 5px;
width: 380px;
box-sizing: border-box;
}
.owisp-login-input:focus {
border-color: #a7a7a7;
}
.owisp-login-input.error {
border-color: #d93025;
}
.owisp-login-form-btn {
width: 100%;
font-size: 18px;
height: 50px;
background: #293b52;
color: #ffffff;
text-transform: capitalize;
border: 0;
border-radius: 3px;
cursor: pointer;
}
.owisp-login-form-btn:focus {
outline: dotted 1px #444;
outline-offset: 0.5px;
}
.owisp-login-login-btn {
margin-top: 4px;
}
.owisp-login-form-btn:hover {
background: #223144;
}
.owisp-login-error {
font-size: 12px;
color: #d93025;
width: 324px;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
}
.owisp-login-error-icon {
display: inline-block;
background: #d93025;
color: #ffffff;
min-width: 16px;
align-self: center;
height: 16px;
border-radius: 50%;
text-align: center;
margin-right: 8px;
font-weight: 600;
}
.owisp-login-register-link {
text-decoration: none;
width: 100%;
}
.owisp-login-add-info {
margin-top: 15px;
color: #444;
max-width: 380px;
}
.owisp-login-additional-link {
color: #444;
}
.owisp-login-additional-link:hover,
.owisp-login-additional-link:focus {
outline: dotted 1px #444;
outline-offset: 0.5px;
}
.owisp-login-social-hr {
outline: 0;
border: 0;
text-align: center;
height: 1.5em;
line-height: 1em;
position: relative;
width: 100%;
}
.owisp-login-social-hr:before {
content: "";
background: #e6e6e6;
position: absolute;
left: 0;
top: 48%;
width: 100%;
height: 2px;
}
.owisp-login-social-hr:after {
content: attr(data-content);
position: relative;
display: inline-block;
padding: 0 0.5em;
line-height: 1.5em;
color: #798993;
background-color: #fcfcfa;
}
.owisp-login-divider-description {
color: #798993;
text-transform: uppercase;
font-size: 0.9rem;
width: 100%;
text-align: center;
}
.owisp-login-social-links-div {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin-top: 8px;
}
.owisp-login-social-link {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 4px 8px;
align-items: center;
text-decoration: none;
color: #798993;
border-radius: 3px;
margin-right: 12px;
box-shadow: 1px 1px 1px 1px hsla(0, 0%, 53%, 0.33);
}
.owisp-login-social-link:hover {
background: #efefef;
}
.owisp-login-social-link:focus {
outline: dotted 1px #444;
outline-offset: 0.5px;
}
.owisp-login-social-link-icon {
width: 28px;
height: auto;
}
.owisp-login-social-link-text {
margin-left: 3px;
text-transform: capitalize;
}
.owisp-login-links-div {
display: flex;
flex-direction: column;
width: 100%;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
}
.owisp-login-link {
line-height: 1.4;
text-decoration: none;
text-transform: capitalize;
color: #444;
}
.owisp-login-link:focus {
outline: dotted 1px #444;
outline-offset: 0.5px;
}
.owisp-login-link:hover {
text-decoration: underline;
}
.owisp-login-error-non-field {
box-sizing: border-box;
font-size: 16px;
width: 100%;
max-width: 380px;
margin-top: 15px;
}
18 changes: 18 additions & 0 deletions client/components/login/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import {connect} from "react-redux";

import Component from "./login";

const mapStateToProps = state => {
return {
loginForm: state.organization.configuration.components.login_form,
privacyPolicy: state.organization.configuration.privacy_policy,
termsAndConditions: state.organization.configuration.terms_and_conditions,
language: state.language,
orgSlug: state.organization.configuration.slug,
};
};

export default connect(
mapStateToProps,
null,
)(Component);
Loading

0 comments on commit 8a1b8f1

Please sign in to comment.