added UI states for logged in vs not
This commit is contained in:
sairaj mote
parent
19b760d99b
commit
f8f388f764
@ -295,7 +295,6 @@ border: none;
|
||||
--success-color: #00C853;
|
||||
--danger-color: red;
|
||||
--width: 100%;
|
||||
--font-size: 1rem;
|
||||
--icon-gap: 0.5rem;
|
||||
--border-radius: 0.3rem;
|
||||
--padding: 0.7rem 1rem;
|
||||
@ -357,9 +356,9 @@ border: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.label {
|
||||
font-size: inherit;
|
||||
opacity: .7;
|
||||
font-weight: 400;
|
||||
font-size: var(--font-size);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
@ -397,7 +396,7 @@ border: none;
|
||||
flex: 1;
|
||||
}
|
||||
input{
|
||||
font-size: var(--font-size);
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
@ -1470,14 +1469,10 @@ themeToggle.innerHTML = `
|
||||
</style>
|
||||
<label class="theme-toggle" title="Change theme" tabindex="0">
|
||||
<slot name="light-mode-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>
|
||||
</slot>
|
||||
<slot name="dark-mode-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>
|
||||
</slot>
|
||||
</label>
|
||||
`;
|
||||
@ -2230,9 +2225,6 @@ smSelect.innerHTML = `
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.hide{
|
||||
display: none !important;
|
||||
}
|
||||
.select{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
@ -2311,6 +2303,9 @@ smSelect.innerHTML = `
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg)
|
||||
}
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
::-webkit-scrollbar{
|
||||
width: 0.5rem;
|
||||
|
||||
@ -135,6 +135,7 @@ a:any-link:focus-visible {
|
||||
}
|
||||
|
||||
sm-input {
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0.3rem;
|
||||
--background: var(--accent-color--light);
|
||||
}
|
||||
@ -509,6 +510,12 @@ sm-option {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
sm-checkbox {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: khaki;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
@ -596,6 +603,10 @@ sm-option {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
#login_form__priv_key {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
padding: 1.8rem 1.5rem;
|
||||
display: grid;
|
||||
@ -606,11 +617,11 @@ sm-option {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
#trade_form {
|
||||
--width: min(24rem, 100%);
|
||||
#trade_form,
|
||||
#login_form {
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
#quantity_selector .button {
|
||||
@ -699,11 +710,8 @@ sm-option {
|
||||
pointer-events: none;
|
||||
}
|
||||
.order-card sm-checkbox {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.order-card__quantity, .order-card__price {
|
||||
font-size: 0.9rem;
|
||||
|
||||
2
public/css/main.min.css
vendored
2
public/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -116,6 +116,7 @@ a:any-link:focus-visible {
|
||||
}
|
||||
|
||||
sm-input {
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0.3rem;
|
||||
--background: var(--accent-color--light);
|
||||
}
|
||||
@ -450,6 +451,11 @@ sm-select,
|
||||
sm-option {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
sm-checkbox {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.warning {
|
||||
background-color: khaki;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
@ -526,6 +532,9 @@ sm-option {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
#login_form__priv_key {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
padding: 1.8rem 1.5rem;
|
||||
@ -535,10 +544,10 @@ sm-option {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
#trade_form {
|
||||
--width: min(24rem, 100%);
|
||||
#trade_form,
|
||||
#login_form {
|
||||
align-self: flex-start;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
#quantity_selector {
|
||||
.button {
|
||||
@ -614,11 +623,8 @@ sm-option {
|
||||
}
|
||||
}
|
||||
sm-checkbox {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
&__quantity,
|
||||
&__price {
|
||||
|
||||
@ -162,7 +162,27 @@
|
||||
</div>
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<sm-form id="trade_form">
|
||||
<sm-form id="login_form" class="hide-">
|
||||
<div class="grid gap-0-5">
|
||||
<h4>Login</h4>
|
||||
<p>Please login for trading and accessing your account.</p>
|
||||
</div>
|
||||
<sm-input type="password" id="login_form__priv_key" placeholder="Private key" variant="outlined" animate
|
||||
required hiderequired></sm-input>
|
||||
<sm-checkbox id="remember_me" checked>
|
||||
<span class="button__icon--right">
|
||||
Remember me
|
||||
</span>
|
||||
</sm-checkbox>
|
||||
<input type="text" id="sign_in_id" style="display: none;" hidden />
|
||||
<sm-button variant="primary" onclick="UI_evt.login();">Log in</sm-button>
|
||||
<sm-button onclick="UI_evt.signup();">Not registered? click here!</sm-button>
|
||||
</sm-form>
|
||||
<sm-form id="trade_form" class="user-content hide-completely">
|
||||
<div class="flex align-center space-between">
|
||||
<p>FLO/INR rate</p>
|
||||
<span id="flo_rate"></span>
|
||||
</div>
|
||||
<div class="flex space-between align-center">
|
||||
<h4>Trade FLO</h4>
|
||||
<strip-select id="trade_type_selector" class="tab">
|
||||
@ -192,7 +212,7 @@
|
||||
</sm-form>
|
||||
</section>
|
||||
<section id="orders_section" class="grid gap-1">
|
||||
<section id="my_orders_section" class="grid gap-1 card">
|
||||
<section id="my_orders_section" class="grid gap-1 card user-content hide-completely">
|
||||
<div id="my_orders_section__header" class="orders_section__header flex">
|
||||
<div id="orders_section__header--primary" class="flex w-100 align-center space-between">
|
||||
<h4>
|
||||
@ -216,7 +236,7 @@
|
||||
</button>
|
||||
<div class="options">
|
||||
<button class="button" title="Cancel selected orders" onclick="cancelAll()">
|
||||
Cancel selected
|
||||
Cancel orders
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -236,7 +256,7 @@
|
||||
<ul id="market_orders_list"></ul>
|
||||
</section>
|
||||
</section>
|
||||
<section id="user_section" class="grid card">
|
||||
<section id="user_section" class="grid card user-content hide-completely">
|
||||
<h4 class="flex align-center user_section__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
|
||||
viewBox="0 0 24 24" width="24px">
|
||||
@ -336,16 +356,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</sm-popup>
|
||||
<form id="login-form">
|
||||
<fieldset>
|
||||
<legend>Login</legend>
|
||||
<input type="password" name="priv-key" placeholder="Enter Private Key" />
|
||||
<input type="text" name="sid" style="display: none;" />
|
||||
<input type="button" name="login" value="login" onclick="UI_evt.login();" /><br />
|
||||
<input type="checkbox" name="remember-me" checked />RememberMe <br />
|
||||
<button type="button" onclick="UI_evt.signup();">Not registered? click here!</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="user-container">
|
||||
<fieldset>
|
||||
<legend>Profile</legend>
|
||||
@ -943,11 +953,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
function updateRate() {
|
||||
getRate().then(rate => {
|
||||
pe.flo = rate
|
||||
getRef('flo_rate').textContent = formatAmount(parseFloat(rate))
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
|
||||
function refresh(init = false) {
|
||||
if (init)
|
||||
console.info("init");
|
||||
else
|
||||
console.info("refresh");
|
||||
updateRate()
|
||||
account();
|
||||
}
|
||||
|
||||
@ -1082,9 +1100,9 @@
|
||||
accountDetails = acc
|
||||
console.debug(acc);
|
||||
//Element display
|
||||
document.getElementById("login-form").style.display = "none";
|
||||
document.getElementById('user-container').style.display = "block";
|
||||
document.getElementById("user_id").textContent = acc.floID;
|
||||
document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide-completely'))
|
||||
getRef('trade_form').classList.remove('hide-completely')
|
||||
getRef("user_id").textContent = acc.floID;
|
||||
user_id = acc.floID;
|
||||
//FLO Balance
|
||||
let flo_total = acc.coins.reduce((a, x) => a + x.quantity, 0);
|
||||
@ -1111,9 +1129,9 @@
|
||||
let response = JSON.parse(error.data)
|
||||
console.log(error);
|
||||
console.log(response);
|
||||
document.getElementById('user-container').style.display = "none";
|
||||
document.getElementById("login-form").style.display = "block";
|
||||
document.forms['login-form']["sid"].value = response.sid;
|
||||
getRef("login_form").classList.remove('hide-completely')
|
||||
document.querySelectorAll(".user-content").forEach(elem => elem.classList.add('hide-completely'))
|
||||
getRef('sign_in_id').value = response.sid;
|
||||
proxy.clear();
|
||||
} else
|
||||
console.error(error);
|
||||
@ -1123,8 +1141,13 @@
|
||||
const UI_evt = {};
|
||||
|
||||
UI_evt.signup = async function () {
|
||||
let sid = document.forms['login-form']['sid'].value;
|
||||
let privKey = await getPromptInput("Register private key", "Enter the private key of floID you want to register", { isPassword: true });
|
||||
let sid = getRef('sign_in_id').value;
|
||||
let privKey = await getPromptInput("Register private key", "Enter the private key of floID you want to register",
|
||||
{
|
||||
isPassword: true,
|
||||
confirmText: 'Register'
|
||||
}
|
||||
);
|
||||
if (privKey) {
|
||||
signUp(privKey, sid).then(result => {
|
||||
console.info(result);
|
||||
@ -1144,10 +1167,9 @@
|
||||
};
|
||||
|
||||
UI_evt.login = function () {
|
||||
let formInputs = document.forms['login-form'];
|
||||
let privKey = formInputs['priv-key'].value;
|
||||
let sid = formInputs['sid'].value;
|
||||
let rememberMe = formInputs['remember-me'].checked;
|
||||
let privKey = getRef('login_form__priv_key').value;
|
||||
let sid = getRef('sign_in_id').value;
|
||||
let rememberMe = getRef('remember_me').checked;
|
||||
let tmpKey = floCrypto.generateNewID();
|
||||
login(privKey, tmpKey.pubKey, sid, rememberMe).then(result => {
|
||||
console.log(result);
|
||||
@ -1261,10 +1283,12 @@
|
||||
}
|
||||
finally {
|
||||
getRef('trade_form').reset()
|
||||
setTimeout(() => {
|
||||
hideProcess('trade_button_wrapper')
|
||||
setTimeout(() => {
|
||||
getRef('trade_button_wrapper').querySelector('.stateful-result').remove()
|
||||
}, 100);
|
||||
}, 4000);
|
||||
}
|
||||
}
|
||||
const balance = {
|
||||
@ -1357,7 +1381,7 @@
|
||||
const slideInLeft = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(1.5rem)'
|
||||
transform: 'translateX(1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
@ -1371,13 +1395,13 @@
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1.5rem)'
|
||||
transform: 'translateX(-1rem)'
|
||||
},
|
||||
]
|
||||
const slideInRight = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1.5rem)'
|
||||
transform: 'translateX(-1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
@ -1391,7 +1415,7 @@
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(1.5rem)'
|
||||
transform: 'translateX(1rem)'
|
||||
},
|
||||
]
|
||||
getRef('orders_list').addEventListener('change', e => {
|
||||
@ -1455,14 +1479,13 @@
|
||||
if (res) {
|
||||
try {
|
||||
await Promise.all(
|
||||
selectedOrders.map((type, id) => {
|
||||
cancelOrder(type, id, proxy.secret)
|
||||
.then(() => {
|
||||
getRef('orders_list').querySelector(`data-id="${id}"`).remove()
|
||||
})
|
||||
})
|
||||
selectedOrders.map((type, id) => cancelOrder(type, id, proxy.secret))
|
||||
)
|
||||
selectedOrders.forEach((type, id) => {
|
||||
getRef('orders_list').querySelector(`[data-id="${id}"]`).remove()
|
||||
})
|
||||
notify('All selected orders cancelled', 'success')
|
||||
selectedOrders.clear()
|
||||
}
|
||||
catch (err) {
|
||||
notify(err, 'error')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user