kaizenkodo/HEL
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Small changes for the html.

Browse Source
This commit is contained in:
Oleksandr Kozachuk 2023-01-09 13:53:23 +01:00
parent ccc318b2ad
commit ab79a100d3
2 changed files with 66 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
hel/src/utils.rs
View File

@ -52,7 +52,7 @@ pub mod rnd {
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_name = rnd_range)]
#[wasm_bindgen(js_name = hel_rnd_range)]
fn extern_rnd_range(start: u32, end: u32) -> u32;
}
@ -154,11 +154,11 @@ pub mod editor {
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_name = read_line)]
fn extern_readline(prompt: &str) -> String;
#[wasm_bindgen(js_name = hel_read_password)]
fn extern_read_password(prompt: &str);
#[wasm_bindgen(js_name = read_password)]
fn extern_password(prompt: &str) -> String;
#[wasm_bindgen(js_name = hel_current_password)]
fn extern_current_password() -> Option<String>;
}
#[derive(Debug)]
@ -187,13 +187,19 @@ pub mod editor {
Ok(())
}
pub fn readline<'a>(&mut self, prompt: &str) -> Result<String, LKErr<'a>> {
Ok(extern_readline(&prompt))
pub fn readline<'a>(&mut self, _prompt: &str) -> Result<String, LKErr<'a>> {
Ok("".to_string())
}
}
pub fn password(prompt: String) -> std::io::Result<String> {
Ok(extern_password(&prompt))
extern_read_password(&prompt);
loop {
match extern_current_password() {
Some(p) => return Ok(p),
None => std::thread::sleep(std::time::Duration::from_millis(100)),
}
}
}
}

80
helwasm/index.html
View File

@ -72,25 +72,24 @@
font-size: 16px;
white-space: pre-wrap;
}
#passwordPrompt {
position: fixed;
top: 50%;
left: 50%;
tranform: translate(-50%, -50%);
backrground-color: white;
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module">
function read_line(prompt) {
console.log("called read_line: " + prompt);
return "line";
}
function read_password(prompt) {
console.log("called read_password: " + prompt);
return "password";
}
import init, { ok_add, hel_init, hel_command } from "./pkg/helwasm.js";
import init, { hel_init, hel_command } from "./pkg/helwasm.js";
init().then(() => {
window.hel = {
ok_add: ok_add,
hel_init: hel_init,
hel_command: hel_command,
}
@ -98,8 +97,11 @@
</script>
<script type="text/babel">
function Terminal() {
const prompt = "> ";
const [input, setInput] = React.useState("");
const [output, setOutput] = React.useState([]);
const [passwordPrompt, setPasswordPrompt] = React.useState(undefined);
const [passwordInput, setPasswordInput] = React.useState("");
const outputRef = React.useRef(null);
React.useEffect(() => {
@ -113,31 +115,51 @@
function handleSubmit(event) {
event.preventDefault();
const result = executeCommand(input);
setOutput([...output, { prompt: "❯", command: input }, { prompt: "", command: result }]);
setOutput([...output, { prompt: prompt, command: input }, { prompt: "", command: result }]);
setInput("");
}
function handlePasswordInput(event) {
setPasswordInput(event.target.value);
}
function handlePasswordSubmit(event) {
window.hel_current_password_value = passwordInput;
setPasswordPrompt(undefined);
setPasswordInput("");
}
function helReadPassword(prompt) {
window.hel_current_password_value = null;
setPasswordPrompt(prompt);
}
window.hel_read_password = helReadPassword;
function helCurrentPassword(prompt) {
return window.hel_current_password_value;
}
window.hel_current_password = helCurrentPassword;
function executeCommand(command) {
return window.hel.hel_command(command);
return window.hel.hel_command(command);
}
return (
<div className="terminal">
{output.map(({ prompt, command }, index) => (
<p key={index}>{prompt && (<span className="prompt">&#x276f;&nbsp;</span>)}{command}</p>
))}
<form onSubmit={handleSubmit}>
<label>
<span className="prompt" ref={outputRef}>&#x276f;&nbsp;</span>
<input
type="text"
value={input}
onChange={handleInput}
className="input"
autoFocus
/>
</label>
</form>
{output.map(({ prompt, command }, index) => (<p key={index}>{prompt && (<span className="prompt">{prompt}</span>)}{command}</p>))}
<form onSubmit={handleSubmit}>
<label>
<span className="prompt" ref={outputRef}>{prompt}</span>
<input
type="text"
value={input}
onChange={handleInput}
className="input"
autoFocus
/>
</label>
</form>
{passwordPrompt !== undefined && (<form onSubmit={handlePasswordSubmit}><label><span className="prompt">{passwordPrompt}</span><input type="password" value={passwordInput} onChange={handlePasswordInput} className="input" autoFocus /></label></form>)}
</div>
);
}