50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { ModalContainer, Modal } from 'minimal-react-modal';
|
|
import reduxLang from '../../middleware/lang';
|
|
|
|
const CVAGBInput = ({ onAGBChange, t }) => (
|
|
<ModalContainer>
|
|
{(openModal, closeModal, isActive) => (
|
|
<div className='CVForm CVAGBInput'>
|
|
<div className='medium-text'>
|
|
<input
|
|
type='checkbox'
|
|
name='AGB'
|
|
value='AGB'
|
|
className='checkboxAGB'
|
|
onChange={onAGBChange}
|
|
/>
|
|
{t('accept_rules_part1')}{' '}
|
|
<a onClick={openModal}>{t('accept_rules_part2')}</a>{t('accept_rules_part3')}
|
|
</div>
|
|
<Modal
|
|
isActive={isActive} // required
|
|
closeModal={closeModal} // required
|
|
>
|
|
<AGB closeModal={closeModal} />
|
|
</Modal>
|
|
</div>
|
|
)}
|
|
</ModalContainer>
|
|
);
|
|
|
|
export default reduxLang('ContribView')(CVAGBInput);
|
|
|
|
const _AGB = ({ closeModal, t }) => (
|
|
<div className='Modal--container'>
|
|
<div className='Modal--body'>
|
|
<button onClick={closeModal}>
|
|
<img src='/static/gfx/alps_x.svg' alt='close' />
|
|
</button>
|
|
<h1 className='big-text'>{t('title')}</h1>
|
|
{[...Array(6).keys()].map(key => (
|
|
<Fragment key={key}>
|
|
<h4 className='medium-text'>{t(`rule${key + 1}_title`)}</h4>
|
|
<p className='small-text'>{t(`rule${key + 1}_text`)}</p>
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
const AGB = reduxLang('Rules')(_AGB);
|