Skip to content

Commit

Permalink
refacto
Browse files Browse the repository at this point in the history
  • Loading branch information
@baudelotphilippe
baudelotphilippe committed Nov 5, 2024
1 parent 70ef3dc commit 7b4814c
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 160 deletions.
9 changes: 3 additions & 6 deletions otoroshi/javascript/src/components/window.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,12 @@ import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import { WizardFrame } from './wizardframe';

const KEY_NAME_ESC = 'Escape';
const KEY_EVENT_TYPE = 'keyup';

function EscapeModalListener({ close, children }) {

const ref = useRef()

const handleEscKey = (event, onClose) => {
if (event.key === KEY_NAME_ESC) {
if (event.key === 'Escape') {
onClose();
}
};
Expand All @@ -24,11 +21,11 @@ function EscapeModalListener({ close, children }) {
};

useEffect(() => {
document.addEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, close), false);
document.addEventListener('keyup', (event) => handleEscKey(event, close), false);
document.addEventListener('mousedown', (event) => handleClickOutside(event, ref, close));

return () => {
document.removeEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, close), false);
document.removeEventListener('keyup', (event) => handleEscKey(event, close), false);
document.removeEventListener('mousedown', (event) => handleClickOutside(event, ref, close));
}
}, [])
Expand Down
317 changes: 163 additions & 154 deletions otoroshi/javascript/src/forms/wizards/AuthenticationWizard.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import * as BackOfficeServices from '../../services/BackOfficeServices';
import { TextInput } from '../../components/inputs';
import {
Expand Down Expand Up @@ -176,23 +176,37 @@ function GoBackSelection({ goBack }) {
);
}

const handleEscKey = (event, onClose) => {
if (event.key === 'Escape') {
onClose();
}
};

const handleClickOutside = (event, ref, onClose) => {
if (ref.current && !ref.current.contains(event.target)) {
onClose();
}
};
function EscapeModalListener({ hide, children }) {

const ref = useRef()

const handleEscKey = (event, onHide) => {
if (event.key === 'Escape') {
onHide();
}
};

const handleClickOutside = (event, ref, onHide) => {
if (ref.current && !ref.current.contains(event.target)) {
onHide();
}
};

useEffect(() => {
document.addEventListener('keyup', (event) => handleEscKey(event, hide), false);
document.addEventListener('mousedown', (event) => handleClickOutside(event, ref, hide));

return () => {
document.removeEventListener('keyup', (event) => handleEscKey(event, hide), false);
document.removeEventListener('mousedown', (event) => handleClickOutside(event, ref, hide));
}
}, [])

return React.cloneElement(children, { ref })
}

export class AuthenticationWizard extends React.Component {
constructor(props) {
super(props);
this.modalRef = React.createRef();
}

state = {
step: 1,
Expand Down Expand Up @@ -240,46 +254,39 @@ export class AuthenticationWizard extends React.Component {
}
};

componentDidMount() {
document.addEventListener('keyup', (event) => handleEscKey(event, this.props.hide), false);
document.addEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.hide));
}
componentWillUnmount() {
document.removeEventListener('keyup', (event) => handleEscKey(event, this.props.hide), false);
document.removeEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.hide));
}

render() {
const { step, authenticationConfig, mode } = this.state;

if (mode === 'update_in_wizard') {
return (
<div className="wizard">
<div className="wizard-container" ref={this.modalRef}>
<div className="d-flex" style={{ flexDirection: 'column', padding: '2.5rem', flex: 1 }}>
<Header onClose={this.props.hide} mode={mode} />
<div className="wizard-content">
<AuthModuleConfig
value={authenticationConfig}
onChange={(authenticationConfig) => this.setState({ authenticationConfig })}
/>

<div className="d-flex mt-auto ms-auto justify-content-between align-items-center">
<FeedbackButton
style={{
backgroundColor: 'var(--color-primary)',
borderColor: 'var(--color-primary)',
padding: '12px 48px',
}}
onPress={() => BackOfficeServices.updateAuthConfig(authenticationConfig)}
onSuccess={this.props.hide}
icon={() => <i className="fas fa-paper-plane" />}
text="Save the authentication configuration"
<EscapeModalListener hide={this.props.hide}>
<div className="wizard-container" ref={this.props.ref}>
<div className="d-flex" style={{ flexDirection: 'column', padding: '2.5rem', flex: 1 }}>
<Header onClose={this.props.hide} mode={mode} />
<div className="wizard-content">
<AuthModuleConfig
value={authenticationConfig}
onChange={(authenticationConfig) => this.setState({ authenticationConfig })}
/>

<div className="d-flex mt-auto ms-auto justify-content-between align-items-center">
<FeedbackButton
style={{
backgroundColor: 'var(--color-primary)',
borderColor: 'var(--color-primary)',
padding: '12px 48px',
}}
onPress={() => BackOfficeServices.updateAuthConfig(authenticationConfig)}
onSuccess={this.props.hide}
icon={() => <i className="fas fa-paper-plane" />}
text="Save the authentication configuration"
/>
</div>
</div>
</div>
</div>
</div>
</EscapeModalListener>
</div>
);
} else {
Expand Down Expand Up @@ -415,119 +422,121 @@ export class AuthenticationWizard extends React.Component {

return (
<div className="wizard">
<div className="wizard-container" ref={this.modalRef}>
<div className="d-flex" style={{ flexDirection: 'column', padding: '2.5rem', flex: 1 }}>
<Header onClose={this.props.hide} mode={mode} />

{mode === 'selector' && (
<Selector
setMode={(mode) => this.setState({ mode })}
disableSelectMode={this.props.disableSelectMode}
/>
)}

{mode !== 'selector' && (
<>
{['edition', 'clone'].includes(mode) ? (
<AuthenticationSelector
mode={mode}
handleSelect={(authentication) => {
if (this.props.onConfirm && mode === 'edition') {
this.props.onConfirm(authentication.id);
} else {
this.setState({
mode: 'continue',
authenticationConfig: {
...authentication,
id: `auth_mod_${uuid()}`,
},
});
}
}}
/>
) : (
<>
<Breadcrumb
value={this.state.breadcrumb}
onClick={(i) => this.setState({ step: i + 1 })}
/>
<div className="wizard-content">
{STEPS.map(({ component, props, condition, onChange, index }, i) => {
if (
(step === i + 1 || step === index) &&
(condition ? condition(authenticationConfig) : true)
) {
const defaultProps = {
value: authenticationConfig,
onChange: (value) =>
this.setState({ authenticationConfig: value }, onChange),
};

const allProps = props
? {
...props,
onChange: (e) => props.onChange(e, i),
}
: defaultProps;

return React.createElement(component, {
key: component.name,
...allProps,
});
<EscapeModalListener hide={this.props.hide}>
<div className="wizard-container" ref={this.props.ref}>
<div className="d-flex" style={{ flexDirection: 'column', padding: '2.5rem', flex: 1 }}>
<Header onClose={this.props.hide} mode={mode} />

{mode === 'selector' && (
<Selector
setMode={(mode) => this.setState({ mode })}
disableSelectMode={this.props.disableSelectMode}
/>
)}

{mode !== 'selector' && (
<>
{['edition', 'clone'].includes(mode) ? (
<AuthenticationSelector
mode={mode}
handleSelect={(authentication) => {
if (this.props.onConfirm && mode === 'edition') {
this.props.onConfirm(authentication.id);
} else {
return null;
}
})}
{showSummary && (
<WizardLastStep
onConfirm={this.props.onConfirm}
breadcrumb={this.state.breadcrumb}
value={{
...authenticationConfig,
strategy: {
...authenticationConfig.strategy,
transformSettings:
authenticationConfig.strategy?.type === 'Transform'
? {
location: authenticationConfig.strategy?.transformSettings
?.location
? authenticationConfig.source
: authenticationConfig.strategy?.transformSettings
?.out_location?.source,
}
: undefined,
this.setState({
mode: 'continue',
authenticationConfig: {
...authentication,
id: `auth_mod_${uuid()}`,
},
}}
/>
)}
{!showSummary && (
<WizardActions
nextStep={this.nextStep}
prevStep={this.prevStep}
step={step}
goBack={() => {
this.setState({
mode: this.props.mode || 'selector',
});
}
}}
/>
) : (
<>
<Breadcrumb
value={this.state.breadcrumb}
onClick={(i) => this.setState({ step: i + 1 })}
/>
<div className="wizard-content">
{STEPS.map(({ component, props, condition, onChange, index }, i) => {
if (
(step === i + 1 || step === index) &&
(condition ? condition(authenticationConfig) : true)
) {
const defaultProps = {
value: authenticationConfig,
onChange: (value) =>
this.setState({ authenticationConfig: value }, onChange),
};

const allProps = props
? {
...props,
onChange: (e) => props.onChange(e, i),
}
: defaultProps;

return React.createElement(component, {
key: component.name,
...allProps,
});
}}
/>
)}
</div>
</>
)}
</>
)}
{['edition', 'clone'].includes(mode) && (
<GoBackSelection
goBack={() => {
this.setState({
mode: this.props.mode || 'selector',
});
}}
/>
)}
} else {
return null;
}
})}
{showSummary && (
<WizardLastStep
onConfirm={this.props.onConfirm}
breadcrumb={this.state.breadcrumb}
value={{
...authenticationConfig,
strategy: {
...authenticationConfig.strategy,
transformSettings:
authenticationConfig.strategy?.type === 'Transform'
? {
location: authenticationConfig.strategy?.transformSettings
?.location
? authenticationConfig.source
: authenticationConfig.strategy?.transformSettings
?.out_location?.source,
}
: undefined,
},
}}
/>
)}
{!showSummary && (
<WizardActions
nextStep={this.nextStep}
prevStep={this.prevStep}
step={step}
goBack={() => {
this.setState({
mode: this.props.mode || 'selector',
});
}}
/>
)}
</div>
</>
)}
</>
)}
{['edition', 'clone'].includes(mode) && (
<GoBackSelection
goBack={() => {
this.setState({
mode: this.props.mode || 'selector',
});
}}
/>
)}
</div>
</div>
</div>
</EscapeModalListener>
</div>
);
}
Expand Down

0 comments on commit 7b4814c

Please sign in to comment.