Yaltik/odsa
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP]Frontend improvements

Browse Source 
* Add notifications (by HumaneJS) ;
* Handle passphrase correctly ;
* Add connected status.
This commit is contained in:
Fabien BOURGEOIS 2019-05-13 19:07:33 +02:00
parent 596105fa9a
commit f229f3c476
3 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -10,6 +10,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Odoo Docker SSH Administration</title> <title>Odoo Docker SSH Administration</title>
<link rel="stylesheet" href="chota.min.css" /> <link rel="stylesheet" href="chota.min.css" />
<link rel="stylesheet" href="humane.original.css" />
<style> <style>
body { margin: 1em; } body { margin: 1em; }
nav a { cursor: pointer; } nav a { cursor: pointer; }
@ -21,6 +22,7 @@
<body> <body>
<!-- Scripts here. Don't remove ↓ --> <!-- Scripts here. Don't remove ↓ -->
<!-- <script src="base.js"></script> --> <!-- <script src="base.js"></script> -->
<script src="humane.min.js"></script>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>
</html> </html>

50
index.jsx
View File

@ -12,16 +12,51 @@ function createLocalState(initState) {
} }
const initialState = { const initialState = {
address: '', port: '', username: '', key: '', password: '', address: '', port: '', username: '', key: '', database: '',
database: '', databases: [], modules: '', serverlog: '' databases: [], modules: '', serverlog: '', connected: false
}; };
const OdooDockerSshAdminConfig = () => { const OdooDockerSshAdminConfig = () => {
const [state, setState] = createLocalState(initialState); const [state, setState] = createLocalState(initialState);
const [isConnected, setIsConnected] = createSignal(false);
const [passphrase, setPassphrase] = createSignal('');
const valueSet = ({target}) => setState(target.name, target.value); const valueSet = ({target}) => setState(target.name, target.value);
let cantConnect = !(state.address && state.username && state.key && state.port);
const connect = () => {
fetch('/connect',
{method: 'POST',
body: JSON.stringify({
address: state.address,
port: state.port,
username: state.username,
key: state.key,
password: passphrase()
}),
headers:{ 'Content-Type': 'application/json'}})
.then(response => {
setIsConnected(response.status == 200);
return response.json();
})
.then(body => humane.log(body))
};
const disconnect = () => {
fetch ('/disconnect')
.then(response => {
setIsConnected(!(response.status == 200));
return response.json();
})
.then(body => humane.log(body))
};
return <div> return <div>
<h2>🛠 Configuration</h2> <h2>🛠 Configuration
<span style="margin-left: 0.5em;">
<$ when={(isConnected())}>🔵</$>
<$ when={(!isConnected())}>🔴</$>
</span>
</h2>
<form name="configuration-form"> <form name="configuration-form">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
@ -41,12 +76,13 @@ const OdooDockerSshAdminConfig = () => {
<label for="key">Clé privée</label> <label for="key">Clé privée</label>
<textarea name="key" placeholder="Please paste your private key" <textarea name="key" placeholder="Please paste your private key"
value={(state.key)} onChange={valueSet}/> value={(state.key)} onChange={valueSet}/>
<label for="keypassword">Mot de passe clé</label> <label for="password">Mot de passe clé</label>
<input name="password" type="password" required /> <input name="password" type="password" required value={(passphrase())}
onInput={({target}) => setPassphrase(target.value)} />
</div> </div>
</div> </div>
<button type="button" class="button outline primary">🔗 Connect</button> <button type="button" class="button outline primary" onClick={connect}>🔗 Connecter</button>
<button type="button" class="button outline secondary">🔴 Disconnect</button> <button type="button" class="button outline secondary" onClick={disconnect}>🔴 Déconnecter</button>
</form> </form>
</div> </div>
}; };