applying compatability changes from new-website to this
This commit is contained in:
parent
1755c670d6
commit
ead81883b2
13 changed files with 232 additions and 190 deletions
|
|
@ -1,58 +1,40 @@
|
|||
import SmartForm from "./form.js";
|
||||
|
||||
const Login =
|
||||
{
|
||||
components: {
|
||||
SmartForm
|
||||
},
|
||||
|
||||
setup()
|
||||
{
|
||||
const usr = Vue.ref("");
|
||||
const pwd = Vue.ref("");
|
||||
|
||||
const submitForm = async () => {
|
||||
const success = await window.mainApi.invoke("login", usr.value, pwd.value);
|
||||
if (!success) shake("login-form");
|
||||
}
|
||||
|
||||
return { usr, pwd, submitForm };
|
||||
return;
|
||||
},
|
||||
|
||||
template: `
|
||||
<form id="login" @submit.prevent="submitForm">
|
||||
<div id="login">
|
||||
|
||||
<!-- username and password forms -->
|
||||
<div id="login-form">
|
||||
<!-- username -->
|
||||
<div class="login-input-box">
|
||||
<input class="login-input" type="text" v-model="usr" />
|
||||
<div class="login-input-modifier">Email</div>
|
||||
</div>
|
||||
<!-- <SmartForm
|
||||
:fields="[{
|
||||
name: 'email',
|
||||
value: null,
|
||||
placeholder: 'Email',
|
||||
},
|
||||
{
|
||||
name: 'password',
|
||||
value: null,
|
||||
placeholder: 'Password'
|
||||
},
|
||||
{
|
||||
name: 'repassword',
|
||||
value: null,
|
||||
placeholder: 'Re-Password'
|
||||
}]"
|
||||
:channel="'auth'"
|
||||
:modifier="'Login or re-enter password to register.'"
|
||||
/> -->
|
||||
|
||||
<!-- password -->
|
||||
<div class="login-input-box">
|
||||
<input class="login-input" type="password" v-model="pwd" />
|
||||
<div class="login-input-modifier">Password</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- submit button; position: fixed -->
|
||||
<button
|
||||
class="login-submit-button button"
|
||||
type="submit"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
|
||||
</form> `
|
||||
}
|
||||
|
||||
/** Shake a div to indicate incorrect credentials */
|
||||
const shake = (elementId) =>
|
||||
{
|
||||
const el = document.getElementById(elementId);
|
||||
|
||||
if (el)
|
||||
el.classList.remove("shake");
|
||||
|
||||
setTimeout(() => {
|
||||
if (el) el.classList.add("shake");
|
||||
}, 250);
|
||||
</div>`
|
||||
}
|
||||
|
||||
export default Login;
|
||||
Loading…
Reference in a new issue