121 | Show UAL Modal 125 |
126 | ) 127 | } 128 | 129 | public renderTransferButton() { 130 | return ( 131 |132 | 133 | {'Transfer 1 eos to example'} 134 | 135 |
136 | ) 137 | } 138 | 139 | public renderLogoutBtn = () => { 140 | const { ual: { activeUser, activeAuthenticator, logout } } = this.props 141 | if (!!activeUser && !!activeAuthenticator) { 142 | return ( 143 |144 | 145 | {'Logout'} 146 | 147 |
148 | ) 149 | } 150 | } 151 | 152 | public render() { 153 | const { ual: { activeUser } } = this.props 154 | const { accountBalance, accountName } = this.state 155 | const modalButton = !activeUser && this.renderModalButton() 156 | const loggedIn = accountName ? `Logged in as ${accountName}` : '' 157 | const myBalance = accountBalance ? `Balance: ${accountBalance}` : '' 158 | const transferBtn = accountBalance && this.renderTransferButton() 159 | return ( 160 |
161 | {modalButton}
162 |
167 | )
168 | }
169 | }
170 |
171 | const TestAppConsumer = withUAL(TransactionApp)
172 |
173 | TestAppConsumer.displayName = 'TestAppConsumer'
174 |
175 | const appName = 'My App'
176 | const lynx = new Lynx([exampleNet])
177 | const ledger = new Ledger([exampleNet])
178 | const scatter = new Scatter([exampleNet], { appName })
179 |
180 | ReactDOM.render(
181 | {loggedIn}
163 |{myBalance}
164 | {transferBtn} 165 | {this.renderLogoutBtn()} 166 |
104 | { this.inputField = input }}
113 | autoCapitalize='none'
114 | />
115 |
127 | )
128 | }
129 |
130 | render() {
131 | return !this.props.loading ? this.renderInput() : accountInput && submitAccountForLogin(accountInput, authenticator)}
123 | >
124 |
126 | {i18n.t('continue')}
125 |
197 | {toolTip}
198 | 
199 |
204 | )
205 | }
206 | }
207 |
208 | /**
209 | * @memberof UALAuthButton
210 | * @name props
211 | * @prop {string} instructions - current instructions on UAL modal
212 | * @prop {function} onAuthenticatorSelect - triggered when authenticator button is clicked
213 | * @prop {function} onRequestInstall - triggered when authenticator install button is clicked
214 | * @prop {function} onErroredState - triggered when authenticator initialization ends in error
215 | * @prop {Authenticator} authenticator - reference to current authenticator instance
216 | * @prop {number} index - authenticator's index in list
217 | */
218 | UALAuthButton.propTypes = {
219 | instructions: PropTypes.string.isRequired,
220 | onAuthenticatorSelect: PropTypes.func.isRequired,
221 | onRequestInstall: PropTypes.func.isRequired,
222 | onErroredState: PropTypes.func.isRequired,
223 | authenticator: PropTypes.object.isRequired,
224 | index: PropTypes.number.isRequired,
225 | }
226 |
--------------------------------------------------------------------------------
/src/components/authentication/UALInstallAuth.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import i18n from '../../i18n'
5 |
6 | import { installButton, installButtonWrapper, buttonText } from '../../styles/installation'
7 | import { baseLink } from '../../styles/base'
8 | import { buttonHover } from '../../styles/authenticator'
9 |
10 | /**
11 | * Component for rendering the authenticator install screen
12 | */
13 | export class UALInstallAuth extends Component {
14 | static displayName = 'UALInstallAuth'
15 |
16 | constructor(props) {
17 | super(props)
18 | /**
19 | * @memberof UALInstallAuth
20 | * @name state
21 | * @prop {Object} hoverStyle - additional button style on hover
22 | */
23 | this.state = {
24 | hoverStyle: {},
25 | }
26 | }
27 |
28 | /**
29 | * @method
30 | * @return {Void}
31 | */
32 | activateGenericSize = () => {
33 | this.setState({ hoverStyle: {} })
34 | }
35 |
36 | /**
37 | * @method
38 | * @return {Void}
39 | */
40 | activateHoverSize = () => {
41 | this.setState({ hoverStyle: buttonHover })
42 | }
43 |
44 | render() {
45 | const { hoverStyle } = this.state
46 | const { authenticator } = this.props
47 | const background = authenticator.getStyle().background
48 | return (
49 |
200 | {text}
201 | { this.renderIcon() }
202 |
203 |
50 |
68 | )
69 | }
70 | }
71 |
72 | /**
73 | * @memberof UALInstallAuth
74 | * @name props
75 | * @prop {Authenticator} authenticator - authenticator from which to render an install button
76 | */
77 | UALInstallAuth.propTypes = {
78 | authenticator: PropTypes.object.isRequired,
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/info/UALErrorMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { UALError } from 'universal-authenticator-library'
4 |
5 | import { IoMdInformationCircleOutline } from 'react-icons/io'
6 |
7 | import { base } from '../../styles/base'
8 | import { errorMessage } from '../../styles/error'
9 |
10 | /**
11 | * @class
12 | * @name UALErrorMessage
13 | * @desc component for rendering error messages
14 | */
15 | export const UALErrorMessage = ({ error: { message } }) => (
16 |
58 |
64 |
67 | {i18n.t('leaveAndInstall')}
65 |
66 |
17 |
23 | )
24 |
25 | UALErrorMessage.displayName = 'UALErrorMessage'
26 |
27 | /**
28 | * @memberof UALErrorMessage
29 | * @name props
30 | * @prop {UALError|Object} chains - list of chains the app supports
31 | */
32 | UALErrorMessage.propTypes = {
33 | error: PropTypes.oneOfType([
34 | PropTypes.instanceOf(UALError),
35 | PropTypes.object,
36 | ]).isRequired,
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/info/UALLearnMore.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { IoMdInformationCircleOutline, IoMdCloseCircleOutline } from 'react-icons/io'
3 | import i18n from '../../i18n'
4 |
5 | import { base } from '../../styles/base'
6 | import {
7 | learnMore,
8 | infoExpanded,
9 | learnMoreText,
10 | learnMoreButton,
11 | learnMoreIcon,
12 | } from '../../styles/info'
13 |
14 | /**
15 | * Component for rendering the "Learn More" text.
16 | */
17 | export class UALLearnMore extends Component {
18 | static displayName = 'UALLearnMore'
19 |
20 | /**
21 | * @memberof UALLearnMore
22 | * @name state
23 | * @prop {boolean} [false] open - state of learn more text accordion
24 | */
25 | constructor(props) {
26 | super(props)
27 | this.state = { open: false }
28 | }
29 |
30 | /**
31 | * @method
32 | * @return {Void}
33 | */
34 | toggleMoreInfo = () => {
35 | const { open } = this.state
36 | this.setState({ open: !open })
37 | }
38 |
39 | render() {
40 | const { open } = this.state
41 | const buttonMessage = open ? i18n.t('learnMoreAccept') : i18n.t('learnMore')
42 | const info = i18n.t('learnMoreText')
43 | const accordionStyles = open ? infoExpanded : {}
44 | const buttonIcon = open ?
18 |
48 |
68 | )
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/misc/UALExitButton.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import { FaTimes } from 'react-icons/fa'
5 |
6 | import { exitWrapper, exit, exitHover } from '../../styles/buttons/exit'
7 |
8 | /**
9 | * Component for rendering a modal close button.
10 | */
11 | export class UALExitButton extends Component {
12 | static displayName = 'UALExitButton'
13 |
14 | constructor(props) {
15 | super(props)
16 | /**
17 | * @memberof UALExitButton
18 | * @name state
19 | * @prop {Object} hoverStyle - additional button style on hover
20 | */
21 | this.state = {
22 | hoverStyle: {},
23 | }
24 | }
25 |
26 | /**
27 | * @method
28 | * @return {Void}
29 | */
30 | scaleUp = () => {
31 | this.setState({ hoverStyle: exitHover })
32 | }
33 |
34 | /**
35 | * @method
36 | * @return {Void}
37 | */
38 | scaleDown = () => {
39 | this.setState({ hoverStyle: {} })
40 | }
41 |
42 | render() {
43 | const { hideModal, isSecondaryStyle } = this.props
44 | const { hoverStyle } = this.state
45 | const buttonColor = isSecondaryStyle ? { color: 'white' } : {}
46 | return (
47 |
49 |
53 | 50 | {info} 51 |
52 |54 | 62 | {buttonIcon} 63 | {' '} 64 | {buttonMessage} 65 | 66 |
67 |
48 |
57 |
20 |
21 |
22 |
23 |
24 |
25 | )
26 |
27 | UALLoadingIcon.displayName = 'UALLoadingIcon'
28 |
29 | UALLoadingIcon.defaultProps = {
30 | withContainer: false,
31 | }
32 |
33 | /**
34 | * @memberof UALInstallAuth
35 | * @name props
36 | * @prop {boolean} [false] withAuthenticator - authenticator from which to render an install button
37 | */
38 | UALLoadingIcon.propTypes = {
39 | withContainer: PropTypes.bool,
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/modal/UALBox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import i18n from '../../i18n'
5 |
6 | import { UALContainer } from './UALContainer'
7 | import { withUAL } from '../provider/withUAL'
8 | import { UALBoxParts } from './UALBoxParts'
9 |
10 | import { box } from '../../styles/box'
11 | import { titleWrapper } from '../../styles/title'
12 | import { mediaQuery } from '../../styles/mediaQuery'
13 |
14 | import { boxTitles, installGuide, defaultBoxState } from '../../constants/box'
15 |
16 | /**
17 | * Component for rendering the box containing the AuthButtons, account input, and handling
18 | * basic preparatory authentication logic
19 | */
20 | class UALBoxBase extends Component {
21 | static displayName = 'UALBoxBase'
22 |
23 | constructor(props) {
24 | super(props)
25 | this.state = defaultBoxState
26 | }
27 |
28 | componentDidMount() {
29 | const { ual: { activeUser, modal, hideModal } } = this.props
30 | if (activeUser && modal) {
31 | hideModal()
32 | } else {
33 | setTimeout(() => this.setState({ containerEnter: true }), 300)
34 | }
35 | }
36 |
37 | componentDidUpdate() {
38 | const { ual: { activeUser, modal, hideModal } } = this.props
39 | if (activeUser && modal) {
40 | hideModal()
41 | }
42 | }
43 |
44 | /**
45 | * Attempts authentication
46 | *
47 | * @method
48 | * @return {Void}
49 | * @param {Authenticator} authenticator
50 | */
51 | authenticate = async (authenticator) => {
52 | const { ual: { authenticateWithoutAccountInput } } = this.props
53 | const needsAccountName = await authenticator.shouldRequestAccountName()
54 | if (needsAccountName) {
55 | this.authenticateWithAccountInput(authenticator)
56 | } else {
57 | authenticateWithoutAccountInput(authenticator)
58 | }
59 | }
60 |
61 | /**
62 | * Checks if all available authenticators have errored
63 | *
64 | * @method
65 | * @return {Void}
66 | */
67 | checkAuthenticators = () => {
68 | const { availableAuthenticators } = this.props.ual
69 | const nonErroredAuthenticators = availableAuthenticators.filter(auth => !auth.isErrored())
70 | if (!nonErroredAuthenticators.length) {
71 | this.setState({
72 | instructions: boxTitles.ERROR,
73 | secondaryInstructions: installGuide,
74 | })
75 | }
76 | }
77 |
78 | /**
79 | * Transitions to authenticator's account input screen
80 | *
81 | * @method
82 | * @return {Void}
83 | * @param {Authenticator} authenticator
84 | */
85 | authenticateWithAccountInput = (authenticator) => {
86 | const loginState = {
87 | containerEnter: true,
88 | showAccountInput: true,
89 | showInstallScreen: false,
90 | instructions: i18n.t('enterUsername'),
91 | secondaryInstructions: '',
92 | }
93 | this.setState({
94 | authenticator,
95 | containerExit: true,
96 | containerEnter: false,
97 | transitionForward: true,
98 | },
99 | this.transitionToReset(loginState))
100 | }
101 |
102 | /**
103 | * Transitions to authenticator's install screen
104 | *
105 | * @method
106 | * @return {Void}
107 | * @param {Authenticator} authenticator
108 | */
109 | enterInstallScreen = (authenticator) => {
110 | const authName = authenticator.getStyle().text
111 | const secondaryInstructions = i18n.t('getStarted', { authName })
112 | const installState = {
113 | containerEnter: true,
114 | showInstallScreen: true,
115 | showAccountInput: false,
116 | instructions: i18n.t('welcomeAccount', { authName }),
117 | secondaryInstructions,
118 | }
119 | this.setState({
120 | authenticator,
121 | containerExit: true,
122 | containerEnter: false,
123 | transitionForward: true,
124 | },
125 | this.transitionToReset(installState))
126 | }
127 |
128 | /**
129 | * Returns to authenticator select screen
130 | *
131 | * @method
132 | * @return {Void}
133 | */
134 | goBackToAuthSelect = () => {
135 | const { showInstallScreen } = this.state
136 | const instructions = showInstallScreen ? boxTitles.ERROR : boxTitles.NORMAL
137 | const secondaryInstructions = showInstallScreen ? installGuide : ''
138 | const previousSelectState = {
139 | containerEnter: true,
140 | showAccountInput: false,
141 | showInstallScreen: false,
142 | instructions,
143 | secondaryInstructions,
144 | }
145 | this.setState({
146 | containerExit: true,
147 | containerEnter: false,
148 | transitionForward: false,
149 | },
150 | this.transitionToReset(previousSelectState))
151 | }
152 |
153 | /**
154 | * Attempts authentication
155 | *
156 | * @method
157 | * @return {Void}
158 | * @param {Authenticator} authenticator
159 | */
160 | refreshBox = () => {
161 | const { restart } = this.props.ual
162 | this.setState({ ...defaultBoxState, containerEnter: true }, restart)
163 | }
164 |
165 | /**
166 | * @method
167 | * @return {Void}
168 | * @param {Object} nextState
169 | */
170 | resetContainer = (nextState) => {
171 | this.setState({ containerExit: false, containerEnter: false }, this.transitionToComplete(nextState))
172 | }
173 |
174 | /**
175 | * @method
176 | * @return {Void}
177 | * @param {Object} nextState
178 | */
179 | transitionToReset = (nextState) => {
180 | setTimeout(() => { this.resetContainer(nextState) }, 300)
181 | }
182 |
183 | /**
184 | * @method
185 | * @return {Void}
186 | * @param {Object} nextState
187 | */
188 | transitionToComplete = (nextState) => {
189 | setTimeout(() => { this.setState(nextState) }, 50)
190 | }
191 |
192 | render() {
193 | const {
194 | containerEnter,
195 | containerExit,
196 | transitionForward,
197 | ...state
198 | } = this.state
199 | const { ual } = this.props
200 | const app = { ...state, ...ual }
201 | const background = UALBoxParts.boxBackground(app)
202 | return (
203 |
204 | {UALBoxParts.exitButton(app)}
205 |
209 | {UALBoxParts.secondaryInstructions(app, this.refreshBox)}
210 | {UALBoxParts.mainContent(app, this.authenticate, this.checkAuthenticators, this.enterInstallScreen)}
211 | {UALBoxParts.errorMessage(ual)}
212 | {UALBoxParts.backButton(app, this.goBackToAuthSelect)}
213 | {UALBoxParts.learnMore(app)}
214 |
215 |
216 |
217 | )
218 | }
219 | }
220 |
221 | export const UALBox = withUAL(UALBoxBase)
222 |
223 | UALBox.displayName = 'UALBox'
224 |
225 | /**
226 | * @typeDef ual
227 | * @desc the ual context that UALBox consumes
228 | * @prop {Chain[]} chains - chain list from props
229 | * @prop {Authenticator[]} authenticators - authenticator instances from props
230 | * @prop {Authenticator[]} availableAuthenticators - available authenticator list
231 | * @prop {boolean} loading - loading state of UAL
232 | * @prop {User} activeUser - logged in user
233 | * @prop {string} message - message, if any, accompanying current UAL state
234 | * @prop {function} broadcastStatus - dispatches a provider state update
235 | * @prop {function} hideModal - hides the modal
236 | * @prop {boolean} modal - whether or not show modal, initialized via props
237 | * @prop {string} appName - name of app
238 | * @prop {function} logout - logs user out of authenticator and resets UAL state
239 | * @prop {function} restart - resets all available authenticators and resets UAL state
240 | * @prop {UALError|null} error - captured error if any
241 | * @prop {function} authenticateWithoutAccountInput - attempts authentication with an authenticator not requiring account input
242 | * @prop {function} submitAccountForLogin - attempts authentication
243 | */
244 | /**
245 | * @memberof UALBoxBase
246 | * @name props
247 | * @prop {ual} ual
248 | */
249 | UALBoxBase.propTypes = {
250 | ual: PropTypes.shape({
251 | chains: PropTypes.arrayOf(PropTypes.object).isRequired,
252 | authenticators: PropTypes.arrayOf(PropTypes.object).isRequired,
253 | availableAuthenticators: PropTypes.arrayOf(PropTypes.object).isRequired,
254 | loading: PropTypes.bool.isRequired,
255 | activeUser: PropTypes.object,
256 | message: PropTypes.string.isRequired,
257 | broadcastStatus: PropTypes.func.isRequired,
258 | hideModal: PropTypes.func.isRequired,
259 | modal: PropTypes.bool.isRequired,
260 | appName: PropTypes.string.isRequired,
261 | logout: PropTypes.func.isRequired,
262 | restart: PropTypes.func.isRequired,
263 | error: PropTypes.object,
264 | authenticateWithoutAccountInput: PropTypes.func.isRequired,
265 | submitAccountForLogin: PropTypes.func.isRequired,
266 | }).isRequired,
267 | }
268 |
--------------------------------------------------------------------------------
/src/components/modal/UALBoxParts.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import i18n from '../../i18n'
3 |
4 | import { UALAccountInput } from '../authentication/UALAccountInput'
5 | import { UALAuthButton } from '../authentication/UALAuthButton'
6 | import { UALLearnMore } from '../info/UALLearnMore'
7 | import { UALExitButton } from '../misc/UALExitButton'
8 | import { UALErrorMessage } from '../info/UALErrorMessage'
9 | import { UALLoadingIcon } from '../misc/UALLoadingIcon'
10 | import { UALInstallAuth } from '../authentication/UALInstallAuth'
11 |
12 | import { title, titleSecondary } from '../../styles/title'
13 | import { backButton, backButtonWrapper, backButtonText } from '../../styles/buttons/back'
14 | import { retryButton } from '../../styles/buttons/retry'
15 | import { secondaryInstructionsText, secondaryInstructionsLight } from '../../styles/instructions'
16 | import { darkenColor } from '../../utils'
17 |
18 | /**
19 | * @class
20 | * @name UALBoxParts
21 | * @desc class for rendering sections of the UALBox Component
22 | */
23 | export class UALBoxParts {
24 | static displayName = 'UALBoxParts'
25 |
26 | /**
27 | * returns an instance of UALAuthButton
28 | *
29 | * @memberof UALBoxParts
30 | * @method
31 | * @name authButton
32 | * @return {ReactElement}
33 | */
34 | static authButton(authenticator, index, instructions, authenticate, checkAuthenticators, enterInstallScreen) {
35 | return (
36 |
206 | {UALBoxParts.boxTitle(app)}
207 |
208 | 90 | {secondaryInstructions} 91 | {' '} 92 | {!showInstallScreen && retry} 93 | {!showInstallScreen && '.'} 94 |
95 | ) 96 | } 97 | return null 98 | } 99 | 100 | /** 101 | * returns an instance of UALInstallAuth 102 | * 103 | * @memberof UALBoxParts 104 | * @method 105 | * @name installAuthenticatorSection 106 | * @return {ReactElement} 107 | */ 108 | static installAuthenticatorSection(authenticator) { 109 | return125 | 126 | {i18n.t('goBack')} 127 | 128 |
129 | ) 130 | } 131 | return null 132 | } 133 | 134 | /** 135 | * returns instructions on dealing with no available authenticators 136 | * 137 | * @memberof UALBoxParts 138 | * @method 139 | * @name noAvailableAuthenticators 140 | * @return {HTML} 141 | */ 142 | static noAvailableAuthenticators() { 143 | return ( 144 |147 | {i18n.t('noAuthenticatorsAvailableForDevice')} 148 |
149 | ) 150 | } 151 | 152 | /** 153 | * returns the main content of UALBox 154 | * 155 | * @memberof UALBoxParts 156 | * @method 157 | * @name mainContent 158 | * @return {ReactElement[]} 159 | */ 160 | static mainContent(app, authenticate, checkAuthenticators, enterInstallScreen) { 161 | const { 162 | submitAccountForLogin, 163 | authenticator, 164 | loading, 165 | error, 166 | showAccountInput, 167 | showInstallScreen, 168 | availableAuthenticators, 169 | instructions, 170 | } = app 171 | const authProps = [ 172 | authenticate, 173 | checkAuthenticators, 174 | enterInstallScreen, 175 | ] 176 | let mainContent = !loading 177 | ? availableAuthenticators.map((auth, index) => this.authButton(auth, index, instructions, ...authProps)) 178 | :{titleContent}
255 | } 256 | 257 | /** 258 | * returns an instance of UALExitButton 259 | * 260 | * @memberof UALBoxParts 261 | * @method 262 | * @name exitButton 263 | * @return {ReactElement} 264 | */ 265 | static exitButton({ error, showAccountInput, showInstallScreen, loading, hideModal }) { 266 | return ( 267 |
25 | {children}
26 |
27 | )
28 | }
29 |
30 | UALContainer.displayName = 'UALContainer'
31 |
32 | /**
33 | * @memberof UALContainer
34 | * @name props
35 | * @prop {boolean} enter - whether or not the screen has entered the user's view
36 | * @prop {boolean} exit - whether or not the screen has exited the user's view
37 | * @prop {boolean} transitionForward - whether or not user is progressing forward through screens
38 | * @prop {Node[]|Node} children - nested components
39 | */
40 | UALContainer.propTypes = {
41 | enter: PropTypes.bool.isRequired,
42 | exit: PropTypes.bool.isRequired,
43 | transitionForward: PropTypes.bool.isRequired,
44 | children: PropTypes.oneOfType([
45 | PropTypes.arrayOf(PropTypes.node),
46 | PropTypes.node,
47 | ]).isRequired,
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/provider/UALContext.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const UALContext = React.createContext()
4 |
--------------------------------------------------------------------------------
/src/components/provider/UALProvider.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import i18n from '../../i18n'
4 | import '../../types'
5 | import { UAL, UALError, UALErrorType } from 'universal-authenticator-library'
6 |
7 | import { UALContext } from './UALContext'
8 | import { DEFAULT_STATUS } from '../../constants/provider'
9 | import { UALBox } from '../modal/UALBox'
10 |
11 | import { modalStyles } from '../../styles/provider'
12 | import { baseFont } from '../../styles/base'
13 |
14 | /**
15 | * Wrapper component that provides a child app with access to UAL functionality
16 | */
17 | export class UALProvider extends Component {
18 | static displayName = 'UALProvider'
19 |
20 | constructor(props) {
21 | super(props)
22 | /**
23 | * @namespace UAL
24 | */
25 | this.state = {
26 | /**
27 | * @memberof UAL
28 | * @desc chain list from props
29 | * @type {Chain[]} chains
30 | */
31 | chains: props.chains,
32 | /**
33 | * @memberof UAL
34 | * @desc authenticator instances from props
35 | * @type {Authenticator[]} authenticators
36 | */
37 | authenticators: props.authenticators,
38 | /**
39 | * @memberof UAL
40 | * @desc available authenticator list
41 | * @type {Authenticator[]} availableAuthenticators
42 | */
43 | availableAuthenticators: [],
44 | /**
45 | * @memberof UAL
46 | * @desc name of app
47 | * @type {string} appName
48 | */
49 | appName: props.appName,
50 | /**
51 | * @memberof UAL
52 | * @desc whether or not show modal, initialized via props
53 | * @type {boolean} modal
54 | */
55 | modal: props.modal,
56 | /**
57 | * @memberof UAL
58 | * @desc loading state of UAL
59 | * @type {boolean} loading
60 | */
61 | loading: false,
62 | /**
63 | * @memberof UAL
64 | * @desc list of authenticated users
65 | * @type {User[]} users
66 | */
67 | users: [],
68 | /**
69 | * @memberof UAL
70 | * @desc authenticator currently used
71 | * @type {Authenticator} activeAuthenticator
72 | */
73 | activeAuthenticator: null,
74 | /**
75 | * @memberof UAL
76 | * @desc logged in user
77 | * @type {User} activeUser
78 | */
79 | activeUser: null,
80 | /**
81 | * @memberof UAL
82 | * @desc whether or not activeAuthenticator should auto login
83 | * @type {boolean} isAutoLogin
84 | */
85 | isAutoLogin: false,
86 | /**
87 | * @memberof UAL
88 | * @desc captured error if any
89 | * @type {UALError|null} error
90 | */
91 | error: null,
92 | /**
93 | * @memberof UAL
94 | * @desc message, if any, accompanying current UAL state
95 | * @type {string} message
96 | */
97 | message: '',
98 | /**
99 | * @memberof UAL
100 | * @function
101 | * @name hideModal
102 | * @desc hides the modal
103 | * @return {Void}
104 | */
105 | hideModal: () => this.setState({ modal: false, loading: true, message: i18n.t('loadingAuthenticators') }),
106 | /**
107 | * @memberof UAL
108 | * @function
109 | * @name showModal
110 | * @desc shows the modal
111 | * @return {Void}
112 | */
113 | showModal: () => {
114 | this.setState({ modal: true })
115 | },
116 | /**
117 | * @memberof UAL
118 | * @function
119 | * @name logout
120 | * @desc logs user out of authenticator and resets UAL state
121 | * @return {Void}
122 | */
123 | logout: () => {
124 | const { activeAuthenticator } = this.state
125 | this.setState(DEFAULT_STATUS, () => activeAuthenticator && this.fullLogout(activeAuthenticator))
126 | },
127 | /**
128 | * @memberof UAL
129 | * @function
130 | * @name restart
131 | * @desc resets all available authenticators and resets UAL state
132 | * @return {Void}
133 | */
134 | restart: () => {
135 | this.setState({ DEFAULT_STATUS }, () => {
136 | const { availableAuthenticators } = this.state
137 | availableAuthenticators.forEach(auth => auth.reset())
138 | this.setState(availableAuthenticators)
139 | })
140 | },
141 | /**
142 | * @memberof UAL
143 | * @function
144 | * @name broadcastStatus
145 | * @desc dispatches a provider state update
146 | * @return {Void}
147 | */
148 | broadcastStatus: (status = DEFAULT_STATUS) => this.setState(status),
149 | /**
150 | * @memberof UAL
151 | * @function
152 | * @name authenticateWithoutAccountInput
153 | * @desc attempts authentication with an authenticator not requiring account input
154 | * @return {Void}
155 | * @param {Authenticator} authenticator
156 | * @param {boolean} [false] isAutoLogin
157 | */
158 | authenticateWithoutAccountInput: async (authenticator, isAutoLogin = false) => {
159 | const { broadcastStatus } = this.state
160 | broadcastStatus({
161 | loading: true,
162 | message: i18n.t('continueWithAuthenticator', { authenticatorName: authenticator.getStyle().text }),
163 | activeAuthenticator: authenticator,
164 | })
165 | try {
166 | const users = await authenticator.login()
167 | const accountName = await users[0].getAccountName()
168 | if (!isAutoLogin) {
169 | window.localStorage.setItem('UALLoggedInAuthType', authenticator.getName())
170 | this.setUALInvalidateAt(authenticator)
171 | }
172 | broadcastStatus({
173 | activeUser: users[users.length - 1],
174 | users,
175 | isAutoLogin,
176 | message: i18n.t('currentlyLoggedInAs', { accountName }),
177 | })
178 | } catch (err) {
179 | broadcastStatus({
180 | loading: false,
181 | error: err,
182 | message: err.message,
183 | })
184 | }
185 | },
186 | /**
187 | * @memberof UAL
188 | * @function
189 | * @name submitAccountForLogin
190 | * @desc attempts authentication
191 | * @return {Void}
192 | * @param {string} accountInput
193 | * @param {Authenticator} authenticator
194 | */
195 | submitAccountForLogin: async (accountInput, authenticator) => {
196 | const { broadcastStatus } = this.state
197 | broadcastStatus({
198 | loading: true,
199 | message: authenticator.requiresGetKeyConfirmation()
200 | ? i18n.t('waitWhileFindAccountWithConfirmation')
201 | : i18n.t('waitWhileFindAccount'),
202 | })
203 | try {
204 | const users = await authenticator.login(accountInput)
205 | window.localStorage.setItem('UALLoggedInAuthType', authenticator.getName())
206 | window.localStorage.setItem('UALAccountName', accountInput)
207 | broadcastStatus({
208 | activeUser: users[users.length - 1],
209 | activeAuthenticator: authenticator,
210 | users,
211 | message: i18n.t('currentlyLoggedInAs', { accountName: accountInput }),
212 | })
213 | this.setUALInvalidateAt(authenticator)
214 | } catch (err) {
215 | broadcastStatus({
216 | error: err,
217 | message: err.message,
218 | loading: false,
219 | })
220 | }
221 | },
222 | }
223 | }
224 |
225 | componentDidMount() {
226 | const { chains, appName, authenticators, authenticateWithoutAccountInput, submitAccountForLogin } = this.state
227 | let type = window.localStorage.getItem('UALLoggedInAuthType')
228 | const invalidate = window.localStorage.getItem('UALInvalidateAt')
229 | const accountName = window.localStorage.getItem('UALAccountName')
230 | type = this.checkForInvalidatedSession(type, invalidate)
231 | const ual = new UAL(chains, appName, authenticators)
232 | const { availableAuthenticators, autoLoginAuthenticator } = ual.getAuthenticators()
233 | try {
234 | if (type) {
235 | const authenticator = this.getAuthenticatorInstance(type, availableAuthenticators)
236 | if (!authenticator) {
237 | throw new Error('authenticator instance not found')
238 | }
239 | const availableCheck = setInterval(() => {
240 | if (!authenticator.isLoading()) {
241 | clearInterval(availableCheck)
242 | // Only Ledger requires an account name
243 | if (accountName) {
244 | submitAccountForLogin(accountName, authenticator)
245 | } else {
246 | authenticateWithoutAccountInput(authenticator)
247 | }
248 | }
249 | }, 250)
250 | }
251 | } catch (e) {
252 | this.clearCache()
253 | const msg = i18n.t('sessionEndedNeedLogin')
254 | const source = type || 'Universal Authenticator Library'
255 | const errType = UALErrorType.Login
256 | console.warn(new UALError(msg, errType, e, source))
257 | } finally {
258 | this.fetchAuthenticators(availableAuthenticators, autoLoginAuthenticator)
259 | }
260 | }
261 |
262 | componentDidUpdate() {
263 | const { loading, message, availableAuthenticators, broadcastStatus } = this.state
264 | if (loading && message === i18n.t('loadingAuthenticators') && availableAuthenticators.length) {
265 | broadcastStatus({ message: i18n.t('authenticatorsLoaded'), loading: false })
266 | }
267 | }
268 |
269 | /**
270 | * Verifies a logged in user's authenticator is still app supported
271 | *
272 | * @method
273 | * @param {string} type - authenticator type of sessioned user
274 | * @param {Object[]} availableAuthenticators - list of available app supported authenticators
275 | * @return {number|boolean}
276 | */
277 | getAuthenticatorInstance = (type, availableAuthenticators) => {
278 | const loggedIn = availableAuthenticators.filter(auth => auth.getName() === type)
279 | if (!loggedIn.length) {
280 | this.clearCache()
281 | }
282 | return loggedIn.length ? loggedIn[0] : false
283 | }
284 |
285 | /**
286 | * Checks if the saved browser session has passed the UALInvalidateAt date and clear the cache if true
287 | *
288 | * @method
289 | * @param {string} type - UALLoggedInAuthType value
290 | * @param {string} invalidate - UALInvalidateAt value in string formatted date
291 | * @return {string|undefined} - UALLoggedInAuthType value or undefined if no longer valid
292 | */
293 | checkForInvalidatedSession = (type, invalidate) => {
294 | if (type && invalidate && new Date(invalidate) <= new Date()) {
295 | this.clearCache()
296 | return undefined
297 | }
298 | return type
299 | }
300 |
301 | /**
302 | * Sets UALInvalidateAt value to local storage depending on amount of seconds set in authenticator
303 | *
304 | * @method
305 | * @param {Authenticator} authenticator - should-invalidate-after authenticator
306 | * @return {Void}
307 | */
308 | setUALInvalidateAt = (authenticator) => {
309 | const invalidateSeconds = authenticator.shouldInvalidateAfter()
310 | const invalidateAt = new Date()
311 | invalidateAt.setSeconds(invalidateAt.getSeconds() + invalidateSeconds)
312 | window.localStorage.setItem('UALInvalidateAt', invalidateAt)
313 | }
314 |
315 | /**
316 | * Renders available authenticators or starts auto-login process if applicable
317 | *
318 | * @method
319 | * @param {Authenticator[]} availableAuthenticators - list of available app supported authenticators
320 | * @param {Authenticator} autoLoginAuthenticator - auto-login authenticator
321 | * @return {Void}
322 | */
323 | fetchAuthenticators = (availableAuthenticators, autoLoginAuthenticator) => {
324 | const { authenticateWithoutAccountInput } = this.state
325 | if (autoLoginAuthenticator) {
326 | this.setState({ availableAuthenticators: [autoLoginAuthenticator] }, () => {
327 | const availableCheck = setInterval(() => {
328 | if (!autoLoginAuthenticator.isLoading()) {
329 | clearInterval(availableCheck)
330 | authenticateWithoutAccountInput(autoLoginAuthenticator, true)
331 | }
332 | }, 250)
333 | })
334 | } else {
335 | this.setState({ availableAuthenticators }, () => {
336 | this.setState({ message: i18n.t('authenticatorsLoaded') })
337 | })
338 | }
339 | }
340 |
341 | /**
342 | * Clears locally stored user session
343 | *
344 | * @method
345 | * @return {Void}
346 | */
347 | clearCache = () => {
348 | window.localStorage.removeItem('UALLoggedInAuthType')
349 | window.localStorage.removeItem('UALAccountName')
350 | window.localStorage.removeItem('UALInvalidateAt')
351 | }
352 |
353 | /**
354 | * Clears localStorage and logs out user
355 | *
356 | * @method
357 | * @param {Authenticator} authenticator - used authenticator
358 | * @return {Void}
359 | */
360 | fullLogout = (authenticator) => {
361 | this.clearCache()
362 | authenticator.logout()
363 | .catch(e => console.warn(e))
364 | }
365 |
366 | render() {
367 | const modal = this.state.modal &&