url input dialog

src/html/InputSubmit.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+class Select extends React.Component<{
+ label?: string,
+ value: string,
+ action: string,
+ placeholder?: string,
+ disabled?: boolean
+ onSubmit: (value: string) => void
+}, {
+ value: string
+}> {
+ constructor(props: any) {
+ super(props)
+
+ this.state = {
+ value: props.value
+ }
+ }
+
+ componentDidUpdate(prevProps: any) {
+ const {value} = this.props
+ if (value != null && value !== prevProps.value) {
+ this.setState(state => ({...state, value: value}))
+ }
+ }
+
+ render() {
+ const {label, action, placeholder, disabled, onSubmit} = this.props
+ const {value} = this.state ?? {}
+
+ return <div className="input-group">
+ {label ? <span className="input-group-text">{label}</span> : null}
+ <input type="text"
+ className="form-control"
+ placeholder={placeholder}
+ disabled={disabled}
+ value={value ?? ''}
+ onChange={event => {
+ const value = event.target.value
+ this.setState(state => ({...state, value: value}))
+ }}
+ onKeyDown={event => {
+ if (event.key === 'Enter') {
+ onSubmit(value)
+ }
+ }}/>
+ <button type="button"
+ className="btn btn-primary"
+ disabled={disabled}
+ onClick={() => onSubmit(value)}>{action}
+ </button>
+ </div>
+ }
+}
+
+export default Select

src/html/Select.tsx

@@ -4,7 +4,7 @@ class Select extends React.Component<{
  label?: string,
  items: string[],
  selected?: string,
- disabled?: Boolean
+ disabled?: boolean
  onSelect: (item: string) => void
 }, {
  selected: string

src/main.tsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom/client'
 import http from 'isomorphic-git/http/web'
 import LightningFS from '@isomorphic-git/lightning-fs'
 import MainComponent from './MainComponent'
+import InputSubmit from "./html/InputSubmit"
 // @ts-ignore
 import * as bootstrap from 'bootstrap'
 // @ts-ignore
@@ -20,8 +21,17 @@ const url: string | null = params.get('url')
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>{
  url == null ?
- <div>
- No git url provided
+ <div className="container py-4">
+ <InputSubmit
+ label="Clone URL"
+ value=""
+ action="OK"
+ placeholder="URL"
+ onSubmit={(url) => {
+ const newUrl = new URL(window.location.href)
+ newUrl.searchParams.set('url', url)
+ window.location.href = newUrl.href
+ }}/>
  </div> :
  <MainComponent
  fs={fs}