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