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] #[wasm_bindgen]
extern "C" { extern "C" {
#[wasm_bindgen(js_name = rnd_range)] #[wasm_bindgen(js_name = hel_rnd_range)]
fn extern_rnd_range(start: u32, end: u32) -> u32; fn extern_rnd_range(start: u32, end: u32) -> u32;
} }
@ -154,11 +154,11 @@ pub mod editor {
#[wasm_bindgen] #[wasm_bindgen]
extern "C" { extern "C" {
#[wasm_bindgen(js_name = read_line)] #[wasm_bindgen(js_name = hel_read_password)]
fn extern_readline(prompt: &str) -> String; fn extern_read_password(prompt: &str);
#[wasm_bindgen(js_name = read_password)] #[wasm_bindgen(js_name = hel_current_password)]
fn extern_password(prompt: &str) -> String; fn extern_current_password() -> Option<String>;
} }
#[derive(Debug)] #[derive(Debug)]
@ -187,13 +187,19 @@ pub mod editor {
Ok(()) Ok(())
} }
pub fn readline<'a>(&mut self, prompt: &str) -> Result<String, LKErr<'a>> { pub fn readline<'a>(&mut self, _prompt: &str) -> Result<String, LKErr<'a>> {
Ok(extern_readline(&prompt)) Ok("".to_string())
} }
} }
pub fn password(prompt: String) -> std::io::Result<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; font-size: 16px;
white-space: pre-wrap; 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> </style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module"> <script type="module">
function read_line(prompt) { import init, { hel_init, hel_command } from "./pkg/helwasm.js";
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";
init().then(() => { init().then(() => {
window.hel = { window.hel = {
ok_add: ok_add,
hel_init: hel_init, hel_init: hel_init,
hel_command: hel_command, hel_command: hel_command,
} }
@ -98,8 +97,11 @@
</script> </script>
<script type="text/babel"> <script type="text/babel">
function Terminal() { function Terminal() {
const prompt = "> ";
const [input, setInput] = React.useState(""); const [input, setInput] = React.useState("");
const [output, setOutput] = React.useState([]); const [output, setOutput] = React.useState([]);
const [passwordPrompt, setPasswordPrompt] = React.useState(undefined);
const [passwordInput, setPasswordInput] = React.useState("");
const outputRef = React.useRef(null); const outputRef = React.useRef(null);
React.useEffect(() => { React.useEffect(() => {
@ -113,31 +115,51 @@
function handleSubmit(event) { function handleSubmit(event) {
event.preventDefault(); event.preventDefault();
const result = executeCommand(input); const result = executeCommand(input);
setOutput([...output, { prompt: "❯", command: input }, { prompt: "", command: result }]); setOutput([...output, { prompt: prompt, command: input }, { prompt: "", command: result }]);
setInput(""); 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) { function executeCommand(command) {
return window.hel.hel_command(command); return window.hel.hel_command(command);
} }
return ( return (
<div className="terminal"> <div className="terminal">
{output.map(({ prompt, command }, index) => ( {output.map(({ prompt, command }, index) => (<p key={index}>{prompt && (<span className="prompt">{prompt}</span>)}{command}</p>))}
<p key={index}>{prompt && (<span className="prompt">&#x276f;&nbsp;</span>)}{command}</p> <form onSubmit={handleSubmit}>
))} <label>
<form onSubmit={handleSubmit}> <span className="prompt" ref={outputRef}>{prompt}</span>
<label> <input
<span className="prompt" ref={outputRef}>&#x276f;&nbsp;</span> type="text"
<input value={input}
type="text" onChange={handleInput}
value={input} className="input"
onChange={handleInput} autoFocus
className="input" />
autoFocus </label>
/> </form>
</label> {passwordPrompt !== undefined && (<form onSubmit={handlePasswordSubmit}><label><span className="prompt">{passwordPrompt}</span><input type="password" value={passwordInput} onChange={handlePasswordInput} className="input" autoFocus /></label></form>)}
</form>
</div> </div>
); );
} }