Skip to content

H
hello-vuejs
Commit 779e2c3f by Nghia Pham
Options

Update Sign

parent 25af17b2
Pipeline #1509 failed with stages
in 0 seconds
Showing with 162 additions and 0 deletions
2-login/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Login/Sign Up in Vue.js</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</meta>
<body>
<div id="app" class="container">
{{ title }}
<div class="row">
<div class="col">
</div>
<div class="col">
<form v-show="!isSignUp" @submit.prevent="submitSignIn">
<h1 class="h3 mt-5 mb-4 fw-normal">
Hello there, <br>
welcome back
</h1>
<div class="form-floating">
<input type="email" v-model="email" id="email"
class="form-control" placeholder="name@example.com">
<label for="email">E-mail</label>
</div>
<div class="form-floating mt-2">
<input type="password" v-model="password"
class="form-control" placeholder="Password">
<label >Password</label>
</div>
<div class="checkbox mb-3 mt-2 ">
<label>
Forgot your password ?
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<div class="checkbox mb-3 mt-2 ">
<label>
New here ? <ins v-on:click="changeSignUp">Sign Up instead</ins>
</label>
</div>
</form>
<form v-show="isSignUp" @submit.prevent="submitSignUp">
<h1 class="h3 mt-5 mb-4 fw-normal">
Get on Board
</h1>
<div class="form-floating">
<input type="text" v-model="name"
class="form-control" placeholder="name@example.com">
<label for="floatingInput">Name</label>
</div>
<div class="form-floating mt-2">
<input type="email" v-model="email"
class="form-control" placeholder="name@example.com">
<label for="floatingInput">E-mail</label>
</div>
<div class="form-floating mt-2">
<input type="password" v-model="password"
class="form-control" placeholder="Password">
<label>Password</label>
</div>
<div class="form-floating mt-2">
<input type="password" v-model="confirm_password" v-on:keyup="checkConfirm"
class="form-control" placeholder="Password">
<label>Confirm Password</label>
</div>
<div class="invalid-feedback ">
You must agree before submitting.
</div>
<button class="w-100 btn btn-lg btn-primary mt-2" type="submit">Sign Up</button>
<div class="checkbox mb-3 mt-2 ">
<label>
<ins v-on:click="changeSignUp">I am already a member</ins>
</label>
</div>
</form>
</div>
<div class="col">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="main.js"> </script>
</body>
</html>
\ No newline at end of file
2-login/main.js 0 → 100644
var app = new Vue({
el: "#app",
data() {
return {
soft: 'Đăng nhập',
email: null,
password: null,
name: null,
confirm_password: null,
isSignUp: false,
}
},
methods: {
changeSignUp() {
this.isSignUp = !this.isSignUp
},
submitSignIn() {
let obj = {
email: this.email,
password: this.password,
}
console.log(obj);
},
submitSignUp() {
let obj = {
email: this.email,
password: this.password,
name: this.password,
confirm_password: this.password,
}
console.log(obj);
},
checkConfirm() {
console.log('check');
}
},
computed: {
title() {
return this.soft + ' ' +'Computed'
}
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment