Skip to content
This repository has been archived by the owner on Mar 9, 2018. It is now read-only.

Commit

Permalink
universal front-end
Browse files Browse the repository at this point in the history
  • Loading branch information
jedireza committed Aug 7, 2017
1 parent 0ada765 commit 7a83051
Show file tree
Hide file tree
Showing 104 changed files with 1,454 additions and 1,267 deletions.
75 changes: 45 additions & 30 deletions README.md
Expand Up @@ -3,21 +3,30 @@
A website and user system starter.

[![Build Status](https://travis-ci.org/jedireza/aqua.svg?branch=master)](https://travis-ci.org/jedireza/aqua)
[![Dependency Status](https://david-dm.org/jedireza/aqua.svg?style=flat)](https://david-dm.org/jedireza/aqua)
[![devDependency Status](https://david-dm.org/jedireza/aqua/dev-status.svg?style=flat)](https://david-dm.org/jedireza/aqua#info=devDependencies)


## Features

- Basic front end web pages (home, about)
- Contact page with form that emails submissions
- Account sign-up page
- Login system with forgot password and reset password
- Abusive login attempt detection
- User roles for accounts and admins
- Admins only notes and status history for accounts
- Admin groups with shared permissions
- Admin level permissions that override group permissions
- Universal front-end website
- Basic web pages ready to customize
- Contact page with form to email
- Account sign-up page
- Login pages including forgot and reset password
- My account area
- Stub dashboard ready to customize
- Settings screen to update contact info and login credentials
- Admin back office
- Stub dashboard ready to customize
- Manage accounts, admins, groups and users
- Use groups (like departments) for shared permissions
- Granular permissions override group permissions


## Live demo

| url | username | password |
|:------------------------------ |:-------- |:-------- |
| https://getaqua.herokuapp.com/ | root | root |


## Technology
Expand All @@ -30,31 +39,18 @@ The front-end is built with [React](https://github.com/facebook/react). We use
routing is done with [React Router](https://github.com/reactjs/react-router).
We're using [Gulp](http://gulpjs.com/) for the build system.

We use [`bcrypt`](https://github.com/ncb000gt/node.bcrypt.js) for hashing
secrets. If you have issues during installation related to `bcrypt` then [refer
to this wiki
page](https://github.com/jedireza/aqua/wiki/bcrypt-Installation-Trouble).


## API only

If you don't use React and/or would rather bring your own front-end, checkout
[Frame](https://github.com/jedireza/frame). It's just the HTTP API parts of Aqua.


## Live demo

| url | username | password |
|:---------------------------------------------------------------- |:-------- |:-------- |
| [https://getaqua.herokuapp.com/](https://getaqua.herokuapp.com/) | root | root |


## Requirements

You need [Node.js](http://nodejs.org/download/) installed and you'll need
[MongoDB](http://www.mongodb.org/downloads) installed and running.

We use [`bcrypt`](https://github.com/ncb000gt/node.bcrypt.js) for hashing
secrets. If you have issues during installation related to `bcrypt` then [refer
to this wiki
page](https://github.com/jedireza/aqua/wiki/bcrypt-Installation-Trouble).


## Installation

```bash
Expand Down Expand Up @@ -143,7 +139,11 @@ these environment variables in your production environment:
## Have a question?

Any issues or questions (no matter how basic), open an issue. Please take the
initiative to read relevant documentation and be pro-active with debugging.
initiative to read relevant documentation and be proactive with debugging.

- There are some guides in [the wiki](https://github.com/jedireza/aqua/wiki)
- Read through [previously asked
questions](https://github.com/jedireza/aqua/issues?q=label%3Aquestion%20)


## Want to contribute?
Expand Down Expand Up @@ -189,6 +189,21 @@ $ npm test
# Linting results: No issues
```

### Targeted tests

If you'd like to run a specific test or subset of tests you can use the
`test-client` and `test-server` scripts included in the `package.json` file.

You specificy the path(s) via the `TEST_TARGET` environment variable like:

```bash
$ TEST_TARGET=test/server/web/main.js npm run test-server

# or

$ TEST_TARGET=test/client/actions/api.js npm run test-client
```


## License

Expand Down
29 changes: 29 additions & 0 deletions client/components/route-redirect.jsx
@@ -0,0 +1,29 @@
'use strict';
const React = require('react');
const ReactRouter = require('react-router-dom');


const Redirect = ReactRouter.Redirect;
const Route = ReactRouter.Route;


const RouteRedirect = function (outerProps) {

const inline = function (innerProps) {

if (innerProps.staticContext) {
innerProps.staticContext.code = outerProps.code;
}

return (
<Redirect from={outerProps.from} to={outerProps.to}/>
);
};

return (
<Route render={inline}/>
);
};


module.exports = RouteRedirect;
26 changes: 26 additions & 0 deletions client/components/route-status.jsx
@@ -0,0 +1,26 @@
'use strict';
const React = require('react');
const ReactRouter = require('react-router-dom');


const Route = ReactRouter.Route;


const RouteStatus = function (outerProps) {

const inline = function (innerProps) {

if (innerProps.staticContext) {
innerProps.staticContext.code = outerProps.code;
}

return outerProps.children;
};

return (
<Route render={inline} />
);
};


module.exports = RouteStatus;
8 changes: 7 additions & 1 deletion client/helpers/json-fetch.js
Expand Up @@ -37,6 +37,10 @@ const jsonFetch = function (options, callback) {

if (response.statusCode >= 200 && response.statusCode < 300) {
if (response.headers.hasOwnProperty('x-auth-required')) {
if (window.location.pathname === '/login') {
return callback(Error('Auth required.'));
}

let returnUrl = window.location.pathname;

if (window.location.search.length > 0) {
Expand All @@ -60,7 +64,9 @@ const jsonFetch = function (options, callback) {
};


window.jsonFetch = jsonFetch;
if (global.window) {
window.jsonFetch = jsonFetch;
}


module.exports = jsonFetch;
7 changes: 4 additions & 3 deletions client/pages/account/app.jsx
@@ -1,6 +1,6 @@
'use strict';
const Footer = require('./footer.jsx');
const Home = require('./home.jsx');
const Home = require('./home/index.jsx');
const Navbar = require('./navbar.jsx');
const NotFound = require('./not-found.jsx');
const React = require('react');
Expand All @@ -18,8 +18,9 @@ const App = (
<div>
<Route component={Navbar} />
<Switch>
<Route exact path="/account" component={Home} />
<Route path="/account/settings" component={Settings} />
<Route path="/account" exact component={Home} />
<Route path="/account/settings" exact component={Settings} />

<Route component={NotFound} />
</Switch>
<Footer />
Expand Down
Expand Up @@ -98,11 +98,9 @@ class HomePage extends React.Component {
</div>
</div>
</div>
<div className="col-sm-5">
<div className="col-sm-5 text-center">
<h1 className="page-header">Throttle guage</h1>
<div className="text-center">
<i className="fa fa-dashboard bamf"></i>
</div>
<i className="fa fa-dashboard bamf"></i>
</div>
</div>
</section>
Expand Down
11 changes: 11 additions & 0 deletions client/pages/account/home/index.less
@@ -0,0 +1,11 @@
.section-home {
.stat-label {
color: #777;
text-transform: uppercase;
font-weight: bold;
}
.stat-value {
font-weight: bold;
font-size: 3em;
}
}
77 changes: 70 additions & 7 deletions client/pages/account/index.less
@@ -1,11 +1,74 @@
.section-home {
.stat-label {
color: #777;
text-transform: uppercase;
@import "../../../node_modules/bootstrap/less/variables.less";
@import "./home/index.less";


body {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-top: 50px;
}

.bamf {
font-size: 20em;
}

/* prevent ios zoom on input */
select, textarea, input, .form-control {
font-size: 16px;
}

.navbar {
.navbar-brand {
font-weight: bold;
color: #333;
position: relative;
display: inline-block;

.navbar-logo {
position: relative;
display: inline-block;
top: -5px;
height: 32px;
width: 32px;
}
}
.stat-value {
font-weight: bold;
font-size: 3em;

.navbar-brand-label {
position: relative;
top: -2px;
margin-left: 10px;

img {
height: 28px;
}
}
}

.footer {
margin-top: 50px;
color: #999;

.container {
border-top: 1px solid #ccc;
padding: 20px 15px;
}
a, a:visited {
color: #999;
}
.links {
margin: 0;
padding: 0;

li {
display: inline-block;
padding-right: 10px;
margin-right: 10px;
list-style: none;
border-right: 1px dotted #999;
}
li:last-child {
padding-right: 0;
margin-right: 0;
border: none;
}
}
}
26 changes: 26 additions & 0 deletions client/pages/admin/accounts/details/index.less
@@ -0,0 +1,26 @@
.section-account-details {
.list-group-statuses,
.list-group-notes {
.badge {
color: #666;
font-weight: normal;
background-color: transparent;
border: 1px solid #ccc;
}

li:nth-child(odd) {
background-color: #eee;
}
}

.form-group-notes {
textarea {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-block {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
}
15 changes: 8 additions & 7 deletions client/pages/admin/app.jsx
Expand Up @@ -6,7 +6,7 @@ const AdminGroupDetails = require('./admin-groups/details/index.jsx');
const AdminGroupSearch = require('./admin-groups/search/index.jsx');
const AdminSearch = require('./admins/search/index.jsx');
const Footer = require('./footer.jsx');
const Home = require('./home.jsx');
const Home = require('./home/index.jsx');
const Navbar = require('./navbar.jsx');
const NotFound = require('./not-found.jsx');
const React = require('react');
Expand All @@ -27,17 +27,18 @@ const App = (
<div>
<Route component={Navbar} />
<Switch>
<Route exact path="/admin" component={Home} />
<Route exact path="/admin/accounts" component={AccountSearch} />
<Route path="/admin" exact component={Home} />
<Route path="/admin/accounts" exact component={AccountSearch} />
<Route path="/admin/accounts/:id" component={AccountDetails} />
<Route exact path="/admin/admins" component={AdminSearch} />
<Route path="/admin/admins" exact component={AdminSearch} />
<Route path="/admin/admins/:id" component={AdminDetails} />
<Route exact path="/admin/admin-groups" component={AdminGroupSearch} />
<Route path="/admin/admin-groups" exact component={AdminGroupSearch} />
<Route path="/admin/admin-groups/:id" component={AdminGroupDetails} />
<Route exact path="/admin/statuses" component={StatusSearch} />
<Route path="/admin/statuses" exact component={StatusSearch} />
<Route path="/admin/statuses/:id" component={StatusDetails} />
<Route exact path="/admin/users" component={UserSearch} />
<Route path="/admin/users" exact component={UserSearch} />
<Route path="/admin/users/:id" component={UserDetails} />

<Route component={NotFound} />
</Switch>
<Footer />
Expand Down
Expand Up @@ -98,11 +98,9 @@ class HomePage extends React.Component {
</div>
</div>
</div>
<div className="col-sm-5">
<div className="col-sm-5 text-center">
<h1 className="page-header">Throttle guage</h1>
<div className="text-center">
<i className="fa fa-dashboard bamf"></i>
</div>
<i className="fa fa-dashboard bamf"></i>
</div>
</div>
</section>
Expand Down

0 comments on commit 7a83051

Please sign in to comment.