Browse Source

[+Elena] - #87 Restyle Atlantis to represent Bcn city council

Jordi Coscolla 1 year ago
parent
commit
18ab1b736c

+ 4 - 0
apps/atlantis/.babelrc

@@ -0,0 +1,4 @@
1
+
2
+{
3
+  "presets": ["env", "react"]
4
+}

+ 0 - 8
apps/atlantis/envConfig.json

@@ -1,8 +0,0 @@
1
-{
2
-  "development": {
3
-    "neptuneUrl": "http://localhost:3020/#/"
4
-  },
5
-  "production": {
6
-    "neptuneUrl" : "http://neptune-id.s3-website-eu-west-1.amazonaws.com/#/"
7
-  }
8
-}

+ 0 - 32
apps/atlantis/index.html

@@ -6,38 +6,6 @@
6 6
 <body>
7 7
 <div id='root'></div>
8 8
 
9
-<script>
10
-  document.addEventListener("DOMContentLoaded", function(event) {
11
-    var links = document.querySelectorAll('a');
12
-    var baseUri = 'exp://wg-qka.notbrent.app.exp.direct';
13
-    // Take the uri from the params
14
-    var qs = decodeURIComponent(window.location.hash);
15
-    if (qs) {
16
-      baseUri = qs.split('?linkingUri=')[1];
17
-      baseUri = baseUri.split('/+')[0];
18
-    }
19
-    // Update the link urls
20
-    for (var i = 0; i < links.length; ++i) {
21
-      if(!baseUri.includes("?")) {
22
-        baseUri = baseUri.concat("?");
23
-      }
24
-      links[i].href = links[i].href.replace('exp://REPLACE_ME', baseUri);
25
-    }
26
-    var redirectInterval = setInterval(function() {
27
-      var countdown = document.querySelector('.countdown');
28
-      if (countdown) {
29
-        var t = parseInt(countdown.innerText, 10);
30
-        t -= 1;
31
-        countdown.innerText = t;
32
-        if (t === 0) {
33
-          clearInterval(redirectInterval);
34
-          window.location.href = baseUri + 'message=' + encodeURIComponent('Redirected automatically by timer');
35
-        }
36
-      }
37
-    }, 1000);
38
-  });
39
-</script>
40
-
41 9
 <script src="build/bundle.js"></script>
42 10
 
43 11
 </body>

File diff suppressed because it is too large
+ 5962 - 2406
apps/atlantis/package-lock.json


+ 6 - 2
apps/atlantis/package.json

@@ -8,7 +8,7 @@
8 8
     "webpack": "./node_modules/.bin/webpack -w",
9 9
     "build:dev": "NODE_ENV='development' webpack",
10 10
     "build:prod": "NODE_ENV='production' webpack",
11
-    "test": "mocha --compilers babel-core/register ./test/*test.js"
11
+    "test": "jest"
12 12
   },
13 13
   "keywords": [],
14 14
   "author": "",
@@ -25,8 +25,10 @@
25 25
   },
26 26
   "devDependencies": {
27 27
     "babel": "^6.23.0",
28
-    "babel-core": "^6.26.0",
28
+    "babel-core": "^6.26.3",
29
+    "babel-jest": "^23.0.1",
29 30
     "babel-loader": "^7.1.2",
31
+    "babel-preset-env": "^1.7.0",
30 32
     "babel-preset-es2015": "^6.24.1",
31 33
     "babel-preset-react": "^6.24.1",
32 34
     "chai": "^4.1.2",
@@ -34,8 +36,10 @@
34 36
     "css-loader": "^0.28.7",
35 37
     "enzyme": "^3.2.0",
36 38
     "html-webpack-plugin": "^2.30.1",
39
+    "jest": "^23.1.0",
37 40
     "mocha": "^4.0.1",
38 41
     "node-sass": "^4.7.2",
42
+    "regenerator-runtime": "^0.11.1",
39 43
     "sass-loader": "^6.0.6",
40 44
     "style-loader": "^0.19.1",
41 45
     "webpack": "^3.10.0"

BIN
apps/atlantis/src/assets/bcnlogo.png


+ 0 - 43
apps/atlantis/src/client/components/Attribute.jsx

@@ -1,43 +0,0 @@
1
-import React from 'react';
2
-import styled from 'styled-components';
3
-import HeaderComponent from './Header';
4
-
5
-
6
-const Button = styled.button`
7
-  background: #efeeee;  font-size: 1em;
8
-  margin: 0.5em;
9
-  padding: 0.5em 1em;
10
-  border: 1px solid grey;
11
-  border-radius: 3px;
12
-`;
13
-
14
-const Link = styled.a`
15
-  color: black;
16
-  text-decoration: none;
17
-`;
18
-
19
-const Container = styled.div`
20
-  text-align: center;
21
-`;
22
-
23
-const Paragraph = styled.div`
24
-  display: block;
25
-  margin: 10px;
26
-  font-family: Verdana, sans-serif;
27
-  margin-top: 35px;
28
-`;
29
-
30
-const Attribute = () => (
31
-  <Container>
32
-    <HeaderComponent />
33
-    <Paragraph>Welcome, Jane Doe.</Paragraph>
34
-    <Paragraph>By clicking the button below, you are agreeing to request a verification
35
-     of Atlantis residency from Atlantis City Council.</Paragraph>
36
-    <Button>
37
-      <Link href="exp://REPLACE_ME&credential=0123456789">Request Attribute</Link>
38
-    </Button>
39
-  </Container>
40
-);
41
-
42
-export default Attribute;
43
-

+ 7 - 43
apps/atlantis/src/client/components/Header.jsx

@@ -5,62 +5,26 @@ const smallScreen = 'only screen and (max-width: 550px)';
5 5
 const mediumScreen = 'only screen and (max-width: 900px)';
6 6
 
7 7
 const Header = styled.div`
8
-  background-image: url(./assets/sealife.jpg);
9
-  background-position: center top;
8
+  background-image: url(./assets/bcnlogo.png);
9
+  background-position: left top;
10 10
   background-repeat: no-repeat;
11
-  background-size: 100% auto;
11
+  background-size: 50% auto;
12
+  overflow:hidden;
12 13
   height: 200px;
13
-  overflow: hidden;
14
-  padding-bottom: 24%;
15
-  margin-bottom: 20px;
16 14
   
17 15
   @media ${mediumScreen} {
18
-    padding-bottom: 10%;
16
+    background-size: 80% auto;
19 17
    }
20 18
     
21 19
   @media ${smallScreen} {
22 20
     padding-bottom: 0%;
21
+    background-size: 90% auto;
23 22
     height: 120px;
24 23
   }
25 24
  `;
26 25
 
27
-const Welcome = styled.div`
28
-  font-size: 25px;
29
-  font-weight: 100;
30
-  text-align: center;
31
-  color: white;
32
-  margin: auto;
33
-  margin-top: 17%;
34
-  background-color: rgba(104,107,111,0.9);
35
-  font-family: Verdana,sans-serif;
36
-  letter-spacing: 9px;
37
-  width: 550px;
38
-  padding: 5px;
39
-   
40
-  @media ${mediumScreen} {
41
-    font-size: 22px;
42
-    letter-spacing: 5px;
43
-    margin-top: 15%;
44
-    padding: 3px;
45
-    width: 420px;
46
-  }
47
-  
48
-  @media ${smallScreen} {
49
-     margin-top: 10%;
50
-     width: 200px;
51
-  }
52
-`;
53
-
54
-const WelcomeTo = styled.span`
55
-  @media ${smallScreen} {
56
-    display: none;
57
-  }
58
-`;
59
-
60 26
 const HeaderComponent = () => (
61
-  <Header>
62
-    <Welcome><WelcomeTo>WELCOME TO</WelcomeTo> ATLANTIS</Welcome>
63
-  </Header>
27
+  <Header />
64 28
 );
65 29
 
66 30
 export default HeaderComponent;

+ 0 - 2
apps/atlantis/src/client/components/Router.jsx

@@ -1,13 +1,11 @@
1 1
 import React from 'react';
2 2
 import { HashRouter, Route, Switch } from 'react-router-dom';
3 3
 import Verify from './Verify';
4
-import Attribute from './Attribute';
5 4
 
6 5
 const Routes = () => (
7 6
   <HashRouter>
8 7
     <Switch>
9 8
       <Route exact path="/" component={Verify} />
10
-      <Route exact path="/attribute" component={Attribute} />
11 9
     </Switch>
12 10
   </HashRouter>
13 11
 );

+ 45 - 34
apps/atlantis/src/client/components/Verify.jsx

@@ -3,68 +3,79 @@ import styled from 'styled-components';
3 3
 import PropTypes from 'prop-types';
4 4
 import HeaderComponent from './Header';
5 5
 
6
-const queryString = require('query-string');
7 6
 
8 7
 const Button = styled.button`
9
-  background: #efeeee;
8
+  background: #13A398;
9
+  color: white;
10 10
   font-size: 1em;
11
-  margin: 0.5em;
12
-  padding: 0.5em 1em;
13
-  border: 1px solid grey;
11
+  padding: 0.8em 2em;
12
+  border: 1px solid #13A398;
14 13
   border-radius: 3px;
15 14
 `;
16 15
 
17
-const Link = styled.a`
18
-  color: black;
19
-  text-decoration: none;
20
-`;
21 16
 
22 17
 const Container = styled.div`
23
-  text-align: center;
18
+  text-align: left;
19
+  margin-left: 5%;
24 20
 `;
25 21
 
26 22
 const Title = styled.div`
27 23
   display: block;
28
-  font-size: 25px;
24
+  font-size: 20px;
25
+  color: #13A398;
29 26
   margin: auto;
30 27
   font-family: Verdana, sans-serif;
31 28
   margin-bottom: 25px;
32 29
 `;
33 30
 
34
-const SubTitle = styled.p`
31
+const SubTitle = styled.div`
32
+  text-align: left;
35 33
   display: block;
36
-  margin: auto;
37 34
   font-family: Verdana, sans-serif;
38
-  font-style: italic;
39
-  margin-bottom: 25px;
35
+  font-size: 11px;
36
+  font-weight: bold;
37
+  margin-bottom: 18px;
40 38
   max-width: 450px;
41 39
 `;
42 40
 
43
-const Details = styled.p`
41
+const TextInput = styled.input`
44 42
   display: block;
45
-  margin: auto;
46
-  font-family: Verdana, sans-serif;
47
-  margin-bottom: 10px;
48
-  max-width: 450px;
43
+  font-size: 20px;
44
+  padding: 10px; 
45
+  border: 1px solid #13A398;
46
+  border-radius: 3px;
47
+  margin-bottom: 18px;
48
+  width: 90%;
49 49
 `;
50 50
 
51
+export const formUrl = (locationHash, credential) => {
52
+  let baseUri = 'exp://wg-qka.notbrent.app.exp.direct';
53
+  // Take the uri from the params
54
+  const qs = decodeURIComponent(locationHash);
55
+  if (qs) {
56
+    baseUri = qs.split('?linkingUri=')[1];
57
+    baseUri = baseUri.split('/+')[0];
58
+  }
59
+
60
+  if (!baseUri.includes('?')) {
61
+    baseUri = baseUri.concat('?');
62
+  }
51 63
 
52
-const Verify = (props) => {
53
-  const parsed = queryString.parse(props.location.search);
54
-  const linkingUri = encodeURIComponent(parsed.linkingUri);
55
-
56
-  return (<Container>
57
-    <HeaderComponent />
58
-    <Title>Atlantis City Council</Title>
59
-    <SubTitle>Your DECODE attributes from Atlantis City Council, via Neptune ID.</SubTitle>
60
-    <Details>Use your Neptune ID to request attributes (your name, address, etc.) from
61
-      the Atlantis City Council.</Details>
62
-    <Button>
63
-      <Link href={`${neptuneUrl}?linkingUri=${linkingUri}`}>Login with Neptune ID</Link>
64
-    </Button>
65
-  </Container>);
64
+  return `${baseUri}&credential=${credential}`;
66 65
 };
67 66
 
67
+const sendCredential = () => {
68
+  location.href = formUrl(window.location.hash, '1234567890');
69
+};
70
+
71
+const Verify = () => (<Container>
72
+  <HeaderComponent />
73
+  <Title>Climate change petition</Title>
74
+  <SubTitle>To confirm your redisency enter your NIF or NIE.</SubTitle>
75
+  <TextInput type="text" />
76
+  <Button onClick={sendCredential}>Next</Button>
77
+</Container>);
78
+
68 79
 Verify.propTypes = {
69 80
   location: PropTypes.shape({ search: PropTypes.string.isRequired }),
70 81
 };

+ 33 - 0
apps/atlantis/test/Verify.test.js

@@ -0,0 +1,33 @@
1
+const { formUrl } = require('../src/client/components/Verify');
2
+
3
+const assert = require('assert');
4
+
5
+describe('VerifyComponent', () => {
6
+  describe('if url does not have ?', () => {
7
+    it('formUrl should add ? and return correctly formatted url', () => {
8
+      // #/?linkingUri=some-url/+
9
+      const locationHash = '%23%2F%3FlinkingUri%3Dsome-url%2F%2B';
10
+      const credential = 'some-credential';
11
+
12
+      const formattedUrl = formUrl(locationHash, credential);
13
+
14
+      const expectedUrl = 'some-url?&credential=some-credential';
15
+
16
+      assert.equal(formattedUrl, expectedUrl);
17
+    });
18
+  });
19
+
20
+  describe('if url has ?', () => {
21
+    it('formUrl should not add ? and return correctly formatted url', () => {
22
+      // #/?linkingUri=some-url?/+
23
+      const locationHash = '%23%2F%3FlinkingUri%3Dsome-url%3F%2F%2B';
24
+      const credential = 'some-credential';
25
+
26
+      const formattedUrl = formUrl(locationHash, credential);
27
+
28
+      const expectedUrl = 'some-url?&credential=some-credential';
29
+
30
+      assert.equal(formattedUrl, expectedUrl);
31
+    });
32
+  });
33
+});

+ 1 - 13
apps/atlantis/webpack.config.js

@@ -2,20 +2,10 @@ const path = require('path');
2 2
 const webpack = require('webpack');
3 3
 const CopyWebpackPlugin = require('copy-webpack-plugin');
4 4
 const HtmlWebpackPlugin = require('html-webpack-plugin');
5
-const envConfig = require('./envConfig.json');
6 5
 
7 6
 const BUILD_DIR = path.resolve(__dirname, './build');
8 7
 const APP_DIR = path.resolve(__dirname, './src/client');
9 8
 
10
-const getNeptuneURL = () => {
11
-  switch (process.env.NODE_ENV) {
12
-    case 'production':
13
-      return envConfig.production.neptuneUrl;
14
-    default:
15
-      return envConfig.development.neptuneUrl;
16
-  }
17
-};
18
-
19 9
 const config = {
20 10
   entry: {
21 11
     main: `${APP_DIR}/index.jsx`,
@@ -55,9 +45,7 @@ const config = {
55 45
     new CopyWebpackPlugin([
56 46
       // {output}/to/file.txt
57 47
       { from: './src/assets', to: './assets' }]),
58
-    new webpack.DefinePlugin({
59
-      neptuneUrl: JSON.stringify(getNeptuneURL()),
60
-    })],
48
+    new webpack.DefinePlugin({})],
61 49
   resolve: {
62 50
     extensions: ['.js', '.json', '.jsx'],
63 51
   },