feat: initial commit

ausgaben · Mar 18, 2019 · e94c63f · e94c63f
commit e94c63f
Show file tree

Hide file tree

Showing 38 changed files with 18,251 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,19 @@
+/node_modules/
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Ausgaben web frontend
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1 @@
+module.exports = {extends: ['@commitlint/config-angular']}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "@ausgaben/ui",
+  "version": "5.0.0",
+  "description": "Ausgaben web frontend",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "prettier": "prettier --single-quote --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
+  },
+  "author": "Markus Tacker <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "@commitlint/cli": "^7.5.2",
+    "@commitlint/config-angular": "^7.5.0",
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
+    "@types/jest": "^24.0.11",
+    "@types/node": "^11.11.3",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.2",
+    "@types/react-router-dom": "^4.3.1",
+    "aws-amplify": "^1.1.22",
+    "aws-amplify-react": "^2.3.3-beta.5",
+    "bootstrap": "^4.3.1",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
+    "node-sass": "^4.11.0",
+    "prettier": "^1.16.4",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-router-dom": "^5.0.0",
+    "react-scripts": "2.1.8",
+    "reactstrap": "^7.1.0",
+    "typescript": "^3.3.3333"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --single-quote --write",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -e",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">3%",
+    "last 1 version",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@types/reactstrap": "^7.1.3"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon/apple-touch-icon-114x114.png b/public/favicon/apple-touch-icon-114x114.png
diff --git a/public/favicon/apple-touch-icon-120x120.png b/public/favicon/apple-touch-icon-120x120.png
diff --git a/public/favicon/apple-touch-icon-144x144.png b/public/favicon/apple-touch-icon-144x144.png
diff --git a/public/favicon/apple-touch-icon-152x152.png b/public/favicon/apple-touch-icon-152x152.png
diff --git a/public/favicon/apple-touch-icon-57x57.png b/public/favicon/apple-touch-icon-57x57.png
diff --git a/public/favicon/apple-touch-icon-60x60.png b/public/favicon/apple-touch-icon-60x60.png
diff --git a/public/favicon/apple-touch-icon-72x72.png b/public/favicon/apple-touch-icon-72x72.png
diff --git a/public/favicon/apple-touch-icon-76x76.png b/public/favicon/apple-touch-icon-76x76.png
diff --git a/public/favicon/favicon-128.png b/public/favicon/favicon-128.png
diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
diff --git a/public/favicon/favicon-196x196.png b/public/favicon/favicon-196x196.png
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
diff --git a/public/favicon/favicon-96x96.png b/public/favicon/favicon-96x96.png
diff --git a/public/favicon/mstile-144x144.png b/public/favicon/mstile-144x144.png
diff --git a/public/favicon/mstile-150x150.png b/public/favicon/mstile-150x150.png
diff --git a/public/favicon/mstile-310x150.png b/public/favicon/mstile-310x150.png
diff --git a/public/favicon/mstile-310x310.png b/public/favicon/mstile-310x310.png
diff --git a/public/favicon/mstile-70x70.png b/public/favicon/mstile-70x70.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="%PUBLIC_URL%/favicon/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="%PUBLIC_URL%/favicon/apple-touch-icon-114x114.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="%PUBLIC_URL%/favicon/apple-touch-icon-72x72.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="%PUBLIC_URL%/favicon/apple-touch-icon-144x144.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="60x60" href="%PUBLIC_URL%/favicon/apple-touch-icon-60x60.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="%PUBLIC_URL%/favicon/apple-touch-icon-120x120.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="%PUBLIC_URL%/favicon/apple-touch-icon-76x76.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="%PUBLIC_URL%/favicon/apple-touch-icon-152x152.png" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon/favicon-196x196.png" sizes="196x196" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon/favicon-128.png" sizes="128x128" />
+    <meta name="application-name" content="Ausgaben"/>
+    <meta name="msapplication-TileColor" content="#8e14cb" />
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/favicon/mstile-144x144.png" />
+    <meta name="msapplication-square70x70logo" content="%PUBLIC_URL%/favicon/mstile-70x70.png" />
+    <meta name="msapplication-square150x150logo" content="%PUBLIC_URL%/favicon/mstile-150x150.png" />
+    <meta name="msapplication-wide310x150logo" content="%PUBLIC_URL%/favicon/mstile-310x150.png" />
+    <meta name="msapplication-square310x310logo" content="%PUBLIC_URL%/favicon/mstile-310x310.png" />
+    <title>Ausgaben</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/Accounts/Accounts.tsx b/src/Accounts/Accounts.tsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { graphqlOperation } from 'aws-amplify';
+import { Connect } from 'aws-amplify-react';
+
+export const accountsQuery = `
+  query accounts {
+    accounts {
+      items {
+        name
+        isSavingsAccount
+      }
+    }
+  }
+`;
+
+export class Accounts extends Component<{}, {}> {
+  render() {
+    return (
+      <Connect query={graphqlOperation(accountsQuery)}>
+        {({ data, loading, errors }: any) => {
+          if (errors) {
+            return (
+              <>
+                <h3>Error</h3>
+                {JSON.stringify(errors)}
+              </>
+            );
+          }
+          if (loading || !data) return <h3>Loading...</h3>;
+          return JSON.stringify(data);
+        }}
+      </Connect>
+    );
+  }
+}
diff --git a/src/Accounts/Page.tsx b/src/Accounts/Page.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Accounts } from './Accounts';
+
+export const AccountsPage = () => (
+  <>
+    <Accounts />
+  </>
+);
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { withAuthenticator } from 'aws-amplify-react';
+import Amplify, { Auth } from 'aws-amplify';
+import {
+  Navbar,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  Button,
+  NavbarToggler,
+  Collapse,
+  NavLink
+} from 'reactstrap';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link,
+  Redirect
+} from 'react-router-dom';
+import { AccountsPage } from './Accounts/Page';
+
+Amplify.configure({
+  Auth: {
+    identityPoolId: process.env.REACT_APP_AWS_COGNITO_IDENTITYPOOL_ID,
+    region: process.env.REACT_APP_AWS_REGION,
+    userPoolId: process.env.REACT_APP_AWS_COGNITO_USERPOOL_ID,
+    userPoolWebClientId: process.env.REACT_APP_AWS_USERPOOL_WEBCLIENT_ID,
+    mandatorySignIn: true
+  },
+  aws_appsync_graphqlEndpoint: process.env.REACT_APP_API_ENDPOINT,
+  aws_appsync_region: process.env.REACT_APP_AWS_REGION,
+  aws_appsync_authenticationType: 'AWS_IAM'
+});
+
+type authState =
+  | 'signIn'
+  | 'signUp'
+  | 'confirmSignIn'
+  | 'confirmSignUp'
+  | 'forgotPassword'
+  | 'verifyContact'
+  | 'signedIn';
+
+class App extends Component<{}, { navigationVisible: boolean }> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      navigationVisible: false
+    };
+  }
+
+  logout = async () => {
+    await Auth.signOut();
+    window.location.reload();
+  };
+
+  toggleNavigation = () => {
+    this.setState({ navigationVisible: !this.state.navigationVisible });
+  };
+
+  render() {
+    return (
+      <Router>
+        <header>
+          <Navbar color="light" light>
+            <NavbarBrand href="/">Ausgaben</NavbarBrand>
+            <NavbarToggler onClick={() => this.toggleNavigation()} />
+            <Collapse isOpen={this.state.navigationVisible} navbar>
+              <Nav navbar>
+                <NavItem>
+                  <Link className="nav-link" to="/accounts">
+                    Accounts
+                  </Link>
+                </NavItem>
+                <NavItem>
+                  <Button onClick={() => this.logout()} outline color="danger">
+                    Log out
+                  </Button>
+                </NavItem>
+              </Nav>
+            </Collapse>
+          </Navbar>
+        </header>
+        <main>
+          <Route exact path="/" render={() => <Redirect to="/accounts" />} />
+          <Route exact path="/accounts" component={AccountsPage} />
+        </main>
+      </Router>
+    );
+  }
+}
+
+export default withAuthenticator(App);
diff --git a/src/aws-amplify-react.d.ts b/src/aws-amplify-react.d.ts
@@ -0,0 +1 @@
+declare module 'aws-amplify-react';
diff --git a/src/bootstrap.scss b/src/bootstrap.scss
@@ -0,0 +1,36 @@
+form {
+  .card-footer {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    .alert {
+      flex-grow: 1;
+      margin-right: 1rem;
+      margin-bottom: 0;
+    }
+    button {
+      flex-grow: 0;
+    }
+  }
+}
+
+.card-title {
+  font-weight: bold;
+  margin-bottom: 0;
+  & + .card-subtitle {
+    margin-top: 0.5rem;
+  }
+}
+
+.card-subtitle {
+  font-weight: 300;
+  font-size: 85%;
+}
+
+.card-body > dl:last-child {
+  margin-bottom: 0;
+}
+
+button + button {
+  margin-left: 0.5rem;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './typography.scss';
+import './bootstrap.scss';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Ausgaben web frontend

		This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = {extends: ['@commitlint/config-angular']}