Commit d2e1298251284bb2c8e3802ccd0f45762e03f70d
1 parent
878ca8a152
Exists in
master
added reactstrap
Showing
2 changed files
with
37 additions
and
7 deletions
Show diff stats
imports/client/views/nonOrg/app/module/AppLayout.js
| 1 | import _ from 'lodash'; | 1 | import _ from 'lodash'; |
| 2 | import { Meteor } from 'meteor/meteor'; | 2 | import { Meteor } from 'meteor/meteor'; |
| 3 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
| 4 | import { Link } from 'react-router'; | 4 | import { Link } from 'react-router'; |
| 5 | import { Avatar } from '/imports/client/components/Avatar'; | 5 | import { Avatar } from '/imports/client/components/Avatar'; |
| 6 | import { Icon } from '/imports/client/components/Icon'; | 6 | import { Icon } from '/imports/client/components/Icon'; |
| 7 | import classNames from 'classnames'; | 7 | import classNames from 'classnames'; |
| 8 | 8 | ||
| 9 | import { logout } from '/imports/client/app/utils/loginMethods'; | 9 | import { logout } from '/imports/client/app/utils/loginMethods'; |
| 10 | 10 | ||
| 11 | import Signup from '/imports/client/views/nonOrg/enter/SignupView'; | 11 | import Signup from '/imports/client/views/nonOrg/enter/SignupView'; |
| 12 | import { VerifyModule } from '/imports/client/views/verify/module/index'; | 12 | import { Collapse, Navbar, NavbarToggler, |
| 13 | import ReactSVG from 'react-svg' | 13 | NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; |
| 14 | |||
| 14 | 15 | ||
| 15 | export class AppLayout extends Component { | 16 | export class AppLayout extends Component { |
| 17 | constructor(props) { | ||
| 18 | super(props); | ||
| 19 | |||
| 20 | this.toggle = this.toggle.bind(this); | ||
| 21 | this.state = { | ||
| 22 | isOpen: false | ||
| 23 | }; | ||
| 24 | } | ||
| 25 | toggle() { | ||
| 26 | this.setState({ | ||
| 27 | isOpen: !this.state.isOpen | ||
| 28 | }); | ||
| 29 | } | ||
| 16 | render() { | 30 | render() { |
| 17 | const {user, org} = this.props.data; | 31 | const {user, org} = this.props.data; |
| 18 | console.log(user); | 32 | console.log(user); |
| 33 | console.log(org); | ||
| 19 | if(!user) { | 34 | if(!user) { |
| 20 | return ( | 35 | return ( |
| 21 | <Signup | 36 | <Signup |
| 22 | /> | 37 | /> |
| 23 | ); | 38 | ); |
| 24 | } | 39 | } |
| 25 | 40 | ||
| 26 | if(!user.isEmailVerified()) { | 41 | if(!user.isEmailVerified()) { |
| 27 | return ( | 42 | return ( |
| 28 | <VerifyModule | 43 | <VerifyModule |
| 29 | pane = {this.props.location.query.verify} | 44 | pane = {this.props.location.query.verify} |
| 30 | location = {this.props.location} | 45 | location = {this.props.location} |
| 31 | /> | 46 | /> |
| 32 | ); | 47 | ); |
| 33 | } | 48 | } |
| 34 | 49 | const theUrl = Meteor.absoluteUrl(); | |
| 35 | 50 | OrgUrl = theUrl.replace("http://","http://"+org.slug+"."); | |
| 36 | return ( | 51 | return ( |
| 37 | <div className = "appLayout-box"> | 52 | <div className = "appLayout-box"> |
| 53 | <Navbar color="faded" light toggleable> | ||
| 54 | <NavbarToggler right onClick={this.toggle} /> | ||
| 55 | <NavbarBrand href="/">reactstrap</NavbarBrand> | ||
| 56 | <Collapse isOpen={this.state.isOpen} navbar> | ||
| 57 | <Nav className="ml-auto" navbar> | ||
| 58 | <NavItem> | ||
| 59 | <NavLink href="/components/">Components</NavLink> | ||
| 60 | </NavItem> | ||
| 61 | <NavItem> | ||
| 62 | <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink> | ||
| 63 | </NavItem> | ||
| 64 | </Nav> | ||
| 65 | </Collapse> | ||
| 66 | </Navbar> | ||
| 38 | <div className = "appLayout-wrapOuter"> | 67 | <div className = "appLayout-wrapOuter"> |
| 39 | <div className = "appLayout-wrapInner"> | 68 | <div className = "appLayout-wrapInner"> |
| 40 | <div className = "appLayout-menuWrap"> | 69 | <div className = "appLayout-menuWrap"> |
| 41 | </div> | 70 | </div> |
| 42 | <div className = "appLayout-contentWrap"> | 71 | <div className = "appLayout-contentWrap"> |
| 43 | <div className = "appLayout-content"> | 72 | <div className = "appLayout-content"> |
| 44 | 73 | Hi, {user.getFullName()}, | |
| 74 | Please visit your organization page by <a href={OrgUrl}>clicking here </a> and login using your credentials! | ||
| 45 | </div> | 75 | </div> |
| 46 | </div> | 76 | </div> |
| 47 | </div> | 77 | </div> |
| 48 | </div> | 78 | </div> |
| 49 | </div> | 79 | </div> |
| 50 | ); | 80 | ); |
| 51 | }; | 81 | }; |
| 52 | 82 | ||
| 53 | }; | 83 | }; |
| 54 | 84 |
package.json
| 1 | { | 1 | { |
| 2 | "name": "application-name", | 2 | "name": "application-name", |
| 3 | "version": "1.0.0", | 3 | "version": "1.0.0", |
| 4 | "description": "Application description.", | 4 | "description": "Application description.", |
| 5 | "scripts": { | 5 | "scripts": { |
| 6 | "start": "meteor --settings settings-development.json", | 6 | "start": "meteor --settings settings-development.json", |
| 7 | "test": "meteor test --driver-package practicalmeteor:mocha --port 5000", | 7 | "test": "meteor test --driver-package practicalmeteor:mocha --port 5000", |
| 8 | "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests", | 8 | "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests", |
| 9 | "chimp-test": "chimp --ddp=http://localhost:3000 --mocha --path=tests", | 9 | "chimp-test": "chimp --ddp=http://localhost:3000 --mocha --path=tests", |
| 10 | "staging": "meteor deploy staging.meteor.com --settings settings-development.json", | 10 | "staging": "meteor deploy staging.meteor.com --settings settings-development.json", |
| 11 | "production": "meteor deploy production.meteor.com --settings settings-production.json" | 11 | "production": "meteor deploy production.meteor.com --settings settings-production.json" |
| 12 | }, | 12 | }, |
| 13 | "devDependencies": { | 13 | "devDependencies": { |
| 14 | "chimp": "^0.41.2", | 14 | "chimp": "^0.41.2", |
| 15 | "eslint": "^3.8.1", | 15 | "eslint": "^3.8.1", |
| 16 | "eslint-config-airbnb": "^12.0.0", | 16 | "eslint-config-airbnb": "^12.0.0", |
| 17 | "eslint-plugin-import": "^1.16.0", | 17 | "eslint-plugin-import": "^1.16.0", |
| 18 | "eslint-plugin-jsx-a11y": "^2.2.3", | 18 | "eslint-plugin-jsx-a11y": "^2.2.3", |
| 19 | "eslint-plugin-meteor": "^4.0.1", | 19 | "eslint-plugin-meteor": "^4.0.1", |
| 20 | "eslint-plugin-react": "^6.4.1" | 20 | "eslint-plugin-react": "^6.4.1" |
| 21 | }, | 21 | }, |
| 22 | "eslintConfig": { | 22 | "eslintConfig": { |
| 23 | "parserOptions": { | 23 | "parserOptions": { |
| 24 | "ecmaFeatures": { | 24 | "ecmaFeatures": { |
| 25 | "jsx": true | 25 | "jsx": true |
| 26 | } | 26 | } |
| 27 | }, | 27 | }, |
| 28 | "plugins": [ | 28 | "plugins": [ |
| 29 | "meteor", | 29 | "meteor", |
| 30 | "react" | 30 | "react" |
| 31 | ], | 31 | ], |
| 32 | "extends": [ | 32 | "extends": [ |
| 33 | "airbnb/base", | 33 | "airbnb/base", |
| 34 | "plugin:meteor/guide", | 34 | "plugin:meteor/guide", |
| 35 | "plugin:react/recommended" | 35 | "plugin:react/recommended" |
| 36 | ], | 36 | ], |
| 37 | "env": { | 37 | "env": { |
| 38 | "browser": true | 38 | "browser": true |
| 39 | }, | 39 | }, |
| 40 | "globals": { | 40 | "globals": { |
| 41 | "server": false, | 41 | "server": false, |
| 42 | "browser": false, | 42 | "browser": false, |
| 43 | "expect": false | 43 | "expect": false |
| 44 | }, | 44 | }, |
| 45 | "rules": { | 45 | "rules": { |
| 46 | "import/no-unresolved": 0, | 46 | "import/no-unresolved": 0, |
| 47 | "import/no-extraneous-dependencies": 0, | 47 | "import/no-extraneous-dependencies": 0, |
| 48 | "import/extensions": 0, | 48 | "import/extensions": 0, |
| 49 | "no-underscore-dangle": [ | 49 | "no-underscore-dangle": [ |
| 50 | "error", | 50 | "error", |
| 51 | { | 51 | { |
| 52 | "allow": [ | 52 | "allow": [ |
| 53 | "_id", | 53 | "_id", |
| 54 | "_ensureIndex", | 54 | "_ensureIndex", |
| 55 | "_verifyEmailToken", | 55 | "_verifyEmailToken", |
| 56 | "_resetPasswordToken", | 56 | "_resetPasswordToken", |
| 57 | "_name" | 57 | "_name" |
| 58 | ] | 58 | ] |
| 59 | } | 59 | } |
| 60 | ], | 60 | ], |
| 61 | "class-methods-use-this": 0 | 61 | "class-methods-use-this": 0 |
| 62 | } | 62 | } |
| 63 | }, | 63 | }, |
| 64 | "dependencies": { | 64 | "dependencies": { |
| 65 | "babel-runtime": "^6.18.0", | 65 | "babel-runtime": "^6.18.0", |
| 66 | "bcrypt": "^0.8.7", | 66 | "bcrypt": "^0.8.7", |
| 67 | "bootstrap": "^3.3.7", | 67 | "bootstrap": "^4.0.0-alpha.6", |
| 68 | "jquery": "^2.2.4", | 68 | "jquery": "^2.2.4", |
| 69 | "jquery-validation": "^1.15.1", | 69 | "jquery-validation": "^1.15.1", |
| 70 | "moment": "^2.18.0", | 70 | "moment": "^2.18.0", |
| 71 | "react": "^15.4.2", | 71 | "react": "^15.4.2", |
| 72 | "react-addons-css-transition-group": "^15.4.2", | 72 | "react-addons-css-transition-group": "^15.4.2", |
| 73 | "react-addons-pure-render-mixin": "^15.3.2", | 73 | "react-addons-pure-render-mixin": "^15.3.2", |
| 74 | "react-addons-transition-group": "^15.4.2", | 74 | "react-addons-transition-group": "^15.4.2", |
| 75 | "react-bootstrap": "^0.30.8", | 75 | "react-bootstrap": "^0.30.8", |
| 76 | "react-bootstrap-date-picker": "^4.0.0", | 76 | "react-bootstrap-date-picker": "^4.0.0", |
| 77 | "react-dom": "^15.4.2", | 77 | "react-dom": "^15.4.2", |
| 78 | "react-fontawesome": "^1.5.0", | 78 | "react-fontawesome": "^1.5.0", |
| 79 | "react-komposer": "^1.13.1", | 79 | "react-komposer": "^1.13.1", |
| 80 | "react-router": "^2.6.1", | 80 | "react-router": "^2.6.1", |
| 81 | "react-router-bootstrap": "^0.23.1", | 81 | "react-router-bootstrap": "^0.23.1", |
| 82 | "react-svg": "^2.1.19", | 82 | "react-svg": "^2.1.19", |
| 83 | "reactstrap": "^4.2.0", | 83 | "reactstrap": "^4.3.0", |
| 84 | "velocity-animate": "^1.4.3", | 84 | "velocity-animate": "^1.4.3", |
| 85 | "velocity-react": "^1.2.1" | 85 | "velocity-react": "^1.2.1" |
| 86 | } | 86 | } |
| 87 | } | 87 | } |
| 88 | 88 |