@ -8,6 +8,9 @@ export default class HomeComponent extends Component {
state = {
state = {
links : [ ]
links : [ ]
}
}
componentDidMount ( ) {
this . urlInput . focus ( )
}
handleURLSubmit = ( ) => {
handleURLSubmit = ( ) => {
fetch ( '/api/v1/protected/create' , {
fetch ( '/api/v1/protected/create' , {
method : 'POST' ,
method : 'POST' ,
@ -35,7 +38,7 @@ export default class HomeComponent extends Component {
< Header size = 'huge' > Simplify your links < / H e a d e r >
< Header size = 'huge' > Simplify your links < / H e a d e r >
< Form onSubmit = { this . handleURLSubmit } autoComplete = "off" >
< Form onSubmit = { this . handleURLSubmit } autoComplete = "off" >
< Form . Field >
< Form . Field >
< Input required size = 'big' action = { { icon : 'arrow right' , labelPosition : 'right' , content : 'Shorten' } } type = 'url' onChange = { this . handleURLChange } name = 'url' placeholder = 'Paste a link to shorten it' / >
< Input required size = 'big' ref = { input => this . urlInput = input } action = { { icon : 'arrow right' , labelPosition : 'right' , content : 'Shorten' } } type = 'url' onChange = { this . handleURLChange } name = 'url' placeholder = 'Paste a link to shorten it' / >
< / F o r m . F i e l d >
< / F o r m . F i e l d >
< / F o r m >
< / F o r m >
< / S e g m e n t >
< / S e g m e n t >
@ -55,14 +58,14 @@ export default class HomeComponent extends Component {
< / C a r d . C o n t e n t >
< / C a r d . C o n t e n t >
< Card . Content extra >
< Card . Content extra >
< div className = 'ui two buttons' >
< div className = 'ui two buttons' >
< Modal closeIcon trigger = { < Button icon = 'qrcode' content = 'Show QR-Code' / > } >
< Modal closeIcon trigger = { < Button icon = 'qrcode' content = 'Show QR-Code' / > } >
< Modal . Header className = "ui center aligned" > { link [ 0 ] } < / M o d a l . H e a d e r >
< Modal . Header className = "ui center aligned" > { link [ 0 ] } < / M o d a l . H e a d e r >
< Modal . Content style = { { textAlign : "center" } } >
< Modal . Content style = { { textAlign : "center" } } >
< QRCode style = { { width : "75%" } } value = { link [ 0 ] } / >
< QRCode style = { { width : "75%" } } value = { link [ 0 ] } / >
< / M o d a l . C o n t e n t >
< / M o d a l . C o n t e n t >
< / M o d a l >
< / M o d a l >
< Clipboard component = "button" className = "ui button" data - clipboard - text = { link [ 0 ] } button - title = "Copy the Shortened URL to Clipboard" >
< Clipboard component = "button" className = "ui button" data - clipboard - text = { link [ 0 ] } button - title = "Copy the Shortened URL to Clipboard" >
< i class = "clipboard icon" > < / i >
< Icon name = "clipboard" / >
Copy to Clipboard
Copy to Clipboard
< / C l i p b o a r d >
< / C l i p b o a r d >
< / d i v >
< / d i v >