[#169647021] added registration page 3 #54
Conversation
added translations for page 3 moved token setting and user profile api call to DefaultContainer (as token and profile info are used in every child component of DefaultContainer) added registration step 3 added integration with get documents api moved loading page to default container (as it is used only after login) added new env variable to api env file
d-al-ibm
requested review from
francescopersico,
gunzip and
LucaPrete
as code owners
| * Given a cookie key `cookieName`, returns the value of | ||
| * the cookie or empty string, if the key is not found. | ||
| */ | ||
| function getCookie(cookieName: string): string { |
There was a problem hiding this comment.
please move this function in a utility package or - better - use some library like https://www.npmjs.com/package/react-cookie
| // if getCookie returns an empty string and the user is not in pre login page (where token still has to be set), | ||
| // it means the token has expired and user browser deleted it -> redirect user to login, otherwise set tokenContext.token | ||
| if ( | ||
| NonEmptyString.is(token) || |
There was a problem hiding this comment.
please name conditions ie. const isTokenExpired = NonEmptyString.is(token) || ...
| useEffect(() => { | ||
| // make api call only after onMount because token is string in any case, no longer undefined, and only if userProfile is not set and user is not on spid login page | ||
| if ( | ||
| NonEmptyString.is(tokenContext.token) && |
| ":" + | ||
| customWindow._env_.IO_ONBOARDING_PA_API_PORT + | ||
| "/profile"; | ||
| fetch(url, { |
There was a problem hiding this comment.
please add a todo comment linked to pivotal story to refactor these calls with io.utils generated code
|
|
||
| const tokenContext = useContext(TokenContext); | ||
|
|
||
| const showFile = (blob: Blob, documentName: string) => { |
There was a problem hiding this comment.
please move this method into some utility module
There was a problem hiding this comment.
better: conider using something like http://danml.com/download.html
| const url = | ||
| urlDomainPort + | ||
| `/organizations/${props.ipaCode}/documents/${props.documentName}`; | ||
| fetch(url, { |
added react-cookie to manage session token and remove token context added consts for long boolean conditions added todo comments for api generated classes use remove custom method and added FileSave package to manage documents download
Affected stories
New dependencies added: file-saverAuthor: Eli Grey Description: An HTML5 saveAs() FileSaver implementation Homepage: /~https://github.com/eligrey/FileSaver.js#readme
|
| Browser | Constructs as | Filenames | Max Blob Size | Dependencies |
|---|---|---|---|---|
| Firefox 20+ | Blob | Yes | 800 MiB | None |
| Firefox < 20 | data: URI | No | n/a | Blob.js |
| Chrome | Blob | Yes | 2GB | None |
| Chrome for Android | Blob | Yes | RAM/5 | None |
| Edge | Blob | Yes | ? | None |
| IE 10+ | Blob | Yes | 600 MiB | None |
| Opera 15+ | Blob | Yes | 500 MiB | None |
| Opera < 15 | data: URI | No | n/a | Blob.js |
| Safari 6.1+* | Blob | No | ? | None |
| Safari < 6 | data: URI | No | n/a | Blob.js |
| Safari 10.1+ | Blob | Yes | n/a | None |
Feature detection is possible:
try {
var isFileSaverSupported = !!new Blob;
} catch (e) {}IE < 10
It is possible to save text files in IE < 10 without Flash-based polyfills.
See ChenWenBrian and koffsyrup's saveTextAs() for more details.
Safari 6.1+
Blobs may be opened instead of saved sometimes—you may have to direct your Safari users to manually
press ⌘+S to save the file after it is opened. Using the application/octet-stream MIME type to force downloads can cause issues in Safari.
iOS
saveAs must be run within a user interaction event such as onTouchDown or onClick; setTimeout will prevent saveAs from triggering. Due to restrictions in iOS saveAs opens in a new window instead of downloading, if you want this fixed please tell Apple how this WebKit bug is affecting you.
Syntax
Import saveAs() from file-saver
import { saveAs } from 'file-saver';FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })Pass { autoBom: true } if you want FileSaver.js to automatically provide Unicode text encoding hints (see: byte order mark). Note that this is only done if your blob type has charset=utf-8 set.
Examples
Saving text using require()
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");Saving text
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");Saving URLs
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");Using URLs within the same origin will just use a[download].
Otherwise, it will first check if it supports cors header with a synchronous head request.
If it does, it will download the data and save using blob URLs.
If not, it will try to download it using a[download].
The standard W3C File API Blob interface is not available in all browsers.
Blob.js is a cross-browser Blob implementation that solves this.
Saving a canvas
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});Note: The standard HTML5 canvas.toBlob() method is not available in all browsers.
canvas-toBlob.js is a cross-browser canvas.toBlob() that polyfills this.
Saving File
You can save a File constructor without specifying a filename. If the
file itself already contains a name, there is a hand full of ways to get a file
instance (from storage, file input, new constructor, clipboard event).
If you still want to change the name, then you can change it in the 2nd argument.
// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);
Installation
# Basic Node.JS installation
npm install file-saver --save
bower install file-saverAdditionally, TypeScript definitions can be installed via:
# Additional typescript definitions
npm install @types/file-saver --save-devreact-cookie
Author: Benoit Tremblay
Description: Universal cookies for React
Homepage: /~https://github.com/reactivestack/cookies/tree/master/packages/react-cookie/#readme
| Created | over 4 years ago |
| Last Updated | 4 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 63 |
| Direct Dependencies | @types/hoist-non-react-statics, hoist-non-react-statics and universal-cookie |
| Keywords | universal, isomophic, cookie and react |
README
react-cookie
Universal cookies for React
Integrations
universal-cookie- Universal cookies for JavaScriptuniversal-cookie-express- Hook cookies get/set on Express for server-rendering
Minimum requirement
react-cookie @ v3.0+
- React.js >= 16.3.0 (new context API + forward ref)
react-cookie @ v0.0-v2.2
- React.js >= 15
Getting started
npm install react-cookie
or in the browser (global variable ReactCookie):
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.production.js"
></script>
<script
crossorigin
src="https://unpkg.com/universal-cookie@3/umd/universalCookie.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-cookie@3/umd/reactCookie.min.js"
></script><CookiesProvider />
Set the user cookies
On the server, the cookies props must be set using req.universalCookies or new Cookie(cookieHeader)
useCookies([dependencies])
Access and modify cookies using React hooks.
const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);React hooks are available starting from React 16.8
dependencies (optional)
Let you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.
cookies
Javascript object with all your cookies. The key is the cookie name.
setCookie(name, value, [options])
Set a cookie value
- name (string): cookie name
- value (string|object): save the value and stringify the object if needed
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use
/as the path if you want your cookie to be accessible on all pages - expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in second
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Is only the server can access the cookie?
- sameSite (boolean|lax|strict): Strict or Lax enforcement
- path (string): cookie path, use
removeCookie(name, [options])
Remove a cookie
- name (string): cookie name
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use
/as the path if you want your cookie to be accessible on all pages - expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in second
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Is only the server can access the cookie?
- sameSite (boolean|lax|strict): Strict or Lax enforcement
- path (string): cookie path, use
withCookies(Component)
Give access to your cookies anywhere. Add the following props to your component:
- cookies: Cookies instance allowing you to get, set and remove cookies.
- allCookies: All your current cookies in an object.
Your original static properties will be hoisted on the returned component. You can also access the original component by using the WrappedComponent static property. Example:
function MyComponent() {
return null;
}
const NewComponent = withCookies(MyComponent);
NewComponent.WrappedComponent === MyComponent;Cookies
get(name, [options])
Get a cookie value
- name (string): cookie name
- options (object):
- doNotParse (boolean): do not convert the cookie into an object no matter what
getAll([options])
Get all cookies
- options (object):
- doNotParse (boolean): do not convert the cookie into an object no matter what
set(name, value, [options])
Set a cookie value
- name (string): cookie name
- value (string|object): save the value and stringify the object if needed
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use
/as the path if you want your cookie to be accessible on all pages - expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in second
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Is only the server can access the cookie?
- sameSite (boolean|lax|strict): Strict or Lax enforcement
- path (string): cookie path, use
remove(name, [options])
Remove a cookie
- name (string): cookie name
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use
/as the path if you want your cookie to be accessible on all pages - expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in second
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Is only the server can access the cookie?
- sameSite (boolean|lax|strict): Strict or Lax enforcement
- path (string): cookie path, use
Simple Example with React hooks
// Root.jsx
import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';
export default function Root() {
return (
<CookiesProvider>
<App />
</CookiesProvider>
);
}// App.jsx
import React from 'react';
import { useCookies } from 'react-cookie';
import NameForm from './NameForm';
function App() {
const [cookies, setCookie] = useCookies(['name']);
function onChange(newName) {
setCookie('name', newName, { path: '/' });
}
return (
<div>
<NameForm name={cookies.name} onChange={onChange} />
{cookies.name && <h1>Hello {cookies.name}!</h1>}
</div>
);
}
export default App;Simple Example with Higher-Order Component
// Root.jsx
import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';
export default function Root() {
return (
<CookiesProvider>
<App />
</CookiesProvider>
);
}// App.jsx
import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
import NameForm from './NameForm';
class App extends Component {
static propTypes = {
cookies: instanceOf(Cookies).isRequired
};
constructor(props) {
super(props);
const { cookies } = props;
this.state = {
name: cookies.get('name') || 'Ben'
};
}
handleNameChange(name) {
const { cookies } = this.props;
cookies.set('name', name, { path: '/' });
this.setState({ name });
}
render() {
const { name } = this.state;
return (
<div>
<NameForm name={name} onChange={this.handleNameChange.bind(this)} />
{this.state.name && <h1>Hello {this.state.name}!</h1>}
</div>
);
}
}
export default withCookies(App);Server-Rendering Example
// src/components/App.js
import React from 'react';
import { useCookies } from 'react-cookie';
import NameForm from './NameForm';
function App() {
const [cookies, setCookie] = useCookies(['name']);
function onChange(newName) {
setCookie('name', newName, { path: '/' });
}
return (
<div>
<NameForm name={cookies.name} onChange={onChange} />
{cookies.name && <h1>Hello {cookies.name}!</h1>}
</div>
);
}
export default App;// src/server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { CookiesProvider } from 'react-cookie';
import Html from './components/Html';
import App from './components/App';
export default function middleware(req, res) {
const markup = ReactDOMServer.renderToString(
<CookiesProvider cookies={req.universalCookies}>
<App />
</CookiesProvider>
);
const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />);
res.send('<!DOCTYPE html>' + html);
}// src/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from 'react-cookie';
import App from './components/App';
const appEl = document.getElementById('main-app');
ReactDOM.render(
<CookiesProvider>
<App />
</CookiesProvider>,
appEl
);// server.js
require('@babel/register');
const express = require('express');
const serverMiddleware = require('./src/server').default;
const cookiesMiddleware = require('universal-cookie-express');
const app = express();
app
.use('/assets', express.static('dist'))
.use(cookiesMiddleware())
.use(serverMiddleware);
app.listen(8080, function() {
console.log('Listening on 8080...');
});@types/file-saver
Author: Unknown
Description: TypeScript definitions for FileSaver.js
Homepage: http://npmjs.com/package/@types/file-saver
| Created | about 3 years ago |
| Last Updated | 9 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 6 |
| Direct Dependencies |
README
Installation
npm install --save @types/file-saver
Summary
This package contains type definitions for FileSaver.js ( /~https://github.com/eligrey/FileSaver.js/ ).
Details
Files were exported from /~https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/file-saver
Additional Details
- Last updated: Tue, 21 May 2019 19:56:14 GMT
- Dependencies: none
- Global values: none
Credits
These definitions were written by Cyril Schumacher /~https://github.com/cyrilschumacher, Daniel Roth /~https://github.com/DaIgeb, Chris Barr /~https://github.com/chrismbarr, HitkoDev /~https://github.com/HitkoDev.
added translations for page 3
moved token setting and user profile api call to DefaultContainer (as token and profile info are used in every child component of DefaultContainer)
added registration step 3
added integration with get documents api
moved loading page to default container (as it is used only after login)
added new env variable to api env file