rondomoon/rondo-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make captcha width 100%

Browse Source
This commit is contained in:
Jerko Steiner 2019-11-04 11:53:58 -04:00
parent 22bbc99e0d
commit 96c2565887
1 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/react-captcha/src/Captcha.tsx
View File

@ -12,6 +12,14 @@ export interface CaptchaState {
attempt: number
}
const flex = {
display: 'flex',
}
const flexItemRight = {
marginLeft: 'auto',
}
export class Captcha extends React.PureComponent<CaptchaProps, CaptchaState> {
state: CaptchaState = {
type: 'image',
@ -37,26 +45,38 @@ export class Captcha extends React.PureComponent<CaptchaProps, CaptchaState> {
<div className='captcha'>
{type === 'image' && (
<>
<img key={attempt} src={imageUrl} />
<a className='action-refresh' onClick={this.refresh}>
Refresh
</a>
{this.props.audioUrl && (
<a className='action-audio' onClick={this.changeToAudio}>
Click here for audio version
<img key={attempt} src={imageUrl + '?' + attempt} width='100%' />
<div style={flex}>
<a className='action-refresh' onClick={this.refresh}>
Refresh
</a>
{this.props.audioUrl && (
<a
className='action-audio'
onClick={this.changeToAudio}
style={flexItemRight}
>
Audio version
</a>
)}
)}
</div>
</>
)}
{type === 'audio' && (
<>
<audio key={attempt} controls src={audioUrl} />
<a className='action-refresh' onClick={this.refresh}>
Refresh
</a>
<a className='action-image' onClick={this.changeToImage}>
Click here for image version
</a>
<audio key={attempt} controls src={audioUrl + '?' + attempt} />
<div style={flex}>
<a className='action-refresh' onClick={this.refresh}>
Refresh
</a>
<a
className='action-image'
onClick={this.changeToImage}
style={flexItemRight}
>
Image version
</a>
</div>
</>
)}
</div>