<section class="p-3 mb-4">
<h2 class="fw-bolder">註冊帳號</h2>
<div class="mb-3 row">
<label for="Registeremail" class="col-form-label col-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="Registeremail" placeholder="name@example.com">
</div>
</div>
<div class="mb-3 row">
<label for="Registerpassword" class="col-form-label col-2">Password</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Registerpassword" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-danger RegisterBtn">送出</button>
</section>
<section class="p-3">
<h2 class="fw-bolder">登入帳號</h2>
<div class="mb-3 row">
<label for="Signinemail" class="col-form-label col-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="Signinemail" placeholder="name@example.com">
</div>
</div>
<div class="mb-3 row">
<label for="Signinpassword" class="col-form-label col-2">Password</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Signinpassword" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-primary SigninBtn">送出</button>
</section>
let stillTyping = false
const registerPasswordBox = document.querySelector('#Registerpassword')
const registerEmailBox = document.querySelector('#Registeremail')
const registerBtn = document.querySelector('.RegisterBtn')
const signInPasswordBox = document.querySelector('#Signinpassword')
const signInEmailBox = document.querySelector('#Signinemail')
const signInBtn = document.querySelector('.SigninBtn')
const InputElement = document.querySelectorAll('input')
function handleEvent(event) {
console.log(event.type, event.data);
if(event.type === 'compositionstart' || event.type === 'compositionupdate') {
stillTyping = true
} else {
stillTyping = false
}
}
InputElement.forEach(item => {
item.addEventListener('compositionstart', handleEvent);
item.addEventListener('compositionupdate', handleEvent);
item.addEventListener('compositionend', handleEvent);
})
registerBtn.addEventListener('click', function () {
if(registerPasswordBox.value === '' || registerEmailBox.value === '') {
window.alert('請在必填欄位填入內容')
}
const user = {}
user.email = registerEmailBox.value
user.password = registerPasswordBox.value
axios.post('https://hexschool-tutorial.herokuapp.com/api/signup', user)
.then(function(response) {
window.alert(response.data.message)
})
.catch(function(error) {
console.log(error)
})
})
signInBtn.addEventListener('click', function () {
if(signInPasswordBox.value === '' || signInEmailBox.value ==='') {
window.alert('請在必填欄位填入內容')
}
const user = {}
user.email = signInEmailBox.value
user.password = signInPasswordBox.value
axios.post('https://hexschool-tutorial.herokuapp.com/api/signin', user)
.then(function(response) {
window.alert(response.data.message)
})
.catch(function(error) {
console.log(error)
})
})
