i have one component which is responsible for register [My-page]1,when user clicks on Login heading the signup underline should hide(means unvisible),and if the user clicks on Signup heading then the login underline should unvisible and displays the signup underline ,How to acheive this thing please help me..
Register.vue
<template>
<div class="main">
<div class="container">
<img src="../assets/sideImg.png" alt="notFound" />
<p>Online Book Shopping</p>
<div class="box">
<div class="headings">
<h5 class="signin">Login</h5>
<h5 class="signup">signup</h5>
</div>
<form ref="myForm" @submit.prevent="handlesubmit">
<div class="fullname">
<p>FullName</p>
<input type="name" class="namebox" required v-model="fullName" autocomplete="off" pattern="[A-Za-z]{3,12}">
</div>
<div class="username">
<p>EmailID</p>
<input type="email" class="emailbox" required v-model="emailID" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$">
</div>
<div class="pass">
<p>Password</p>
<input :type="password_type" class="password" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,}$" required>
<i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();"></i>
</div>
<div class="mobile">
<p>MobileNumber</p>
<input type="tel" class="telephone" v-model="mobile" pattern="^d{10}$" required>
</div>
<button class="btn-section" type="submit">Signup</button>
</form>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
name: 'Register',
data() {
return {
fullName: '',
emailID: '',
password: '',
mobile: '',
password_type: "password",
}
},
methods: {
togglePassword() {
this.password_type = this.password_type === 'password' ? 'text' : 'password'
document.getElementById('passField').style.margin='0px 0px 0px 69px';
document.getElementById('passField').style.width="252px";
document.getElementById('passField').style.height="35px";
document.getElementById('passField').style.background="$pale_white 0% 0% no-repeat padding-box";
},
handlesubmit() {
let userData = {
fullName: this.fullName,
emailID: this.emailID,
password: this.password,
mobile: this.mobile
}
service.userRegister(userData).then(response => {
if(response.status==201){
alert("user registered successfully");
this.$refs.myForm.reset();
}
return response;
}).catch(error => {
alert("invalid credentials");
return error;
})
}
}
}
</script>
<style lang="scss" scoped>
@import "colors";
// *{
// top:0;
// height:768px;
// width:1366px;
// background: #000000 ;
// opacity: 0.3;
// }
.main .container{
margin-top: 185px;
left: 320px;
width: 624px;
height: 391px;
background: #F5F5F5 0% 0% no-repeat padding-box;
border-radius: 21px;
opacity: 1;
}
img{
margin-top: 52px;
margin-left: 53px;
width: 245px;
height: 245px;
background: transparent 0% 0% no-repeat padding-box;
opacity: 1;
border-radius: 50%;
}
.container p{
color:$light_black;
margin-top: 31px;
margin-left: 71px;
margin-bottom: 39px;
width: 309px;
height: 24px;
text-align: left;
font: normal normal medium 18px/24px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: uppercase;
opacity: 1;
font-weight: 500;
}
.box{
background: $pale_white 0% 0% no-repeat padding-box;
box-shadow: 0px 5px 15px #00000029;
border: 1px solid #E4E4E4;
border-radius: 6px;
opacity: 1;
height: 425px;
width:389px;
margin-top: -406px;
margin-left: 358px;
}
.headings{
display:flex;
float:left;
opacity: 1;
padding-top: 28px;
color: $light_black;
text-transform: uppercase;
padding-left:69px;
width: 89px;
height: 33px;
text-align: left;
font: normal normal medium 25px/33px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: uppercase;
}
.signup{
padding-left: 92px; /* 82 */
}
.fullname p{
margin-top: 91px;
margin-left: 69px;
width: 45px;
height: 13px;
text-align: left;
font: normal normal normal 12px/13px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: capitalize;
opacity: 1;
margin-bottom: 0px;
}
.namebox{
background: $pale_white 0% 0% no-repeat padding-box;
border: 1px solid $border_clr;
border-radius: 2px;
opacity: 1;
margin-left: 69px;
width: 252px;
height: 35px;
}
.username p{
text-align: left;
font: normal normal normal 12px/13px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: capitalize;
opacity: 1;
width: 36px;
height: 13px;
margin-top: 15px;
margin-left: 69px;
margin-bottom: 0px;
}
.emailbox{
background: $pale_white 0% 0% no-repeat padding-box;
// border: 1px solid $dark_red;
border: 1px solid $border_clr;
border-radius: 2px;
opacity: 1;
margin-left: 69px;
width: 252px;
height: 35px;
}
.pass p{
text-align: left;
font: normal normal normal 12px/13px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: capitalize;
opacity: 1;
width: 44px;
height: 13px;
margin-top: 15px;
margin-left: 69px;
margin-bottom: 0px;
}
input[type="password"]{
background: $pale_white 0% 0% no-repeat padding-box;
border: 1px solid $border_clr;
border-radius: 2px;
opacity: 1;
width: 252px;
height: 35px;
margin-left: 69px;
}
.mobile p{
text-align: left;
font: normal normal normal 12px/13px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: capitalize;
opacity: 1;
margin-top: 15px;
margin-left: 69px;
margin-bottom: -7px;
}
.telephone{
background: $pale_white 0% 0% no-repeat padding-box;
border: 1px solid $border_clr;
border-radius: 2px;
opacity: 1;
width: 252px;
height: 35px;
margin-left: 69px;
margin-bottom: 22px;
}
.btn-section{
margin-left: 69px;
width: 252px;
height: 37px;
background: #A03037 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
color:$white;
}
.headings{
cursor:pointer;
}
.box:hover{
box-shadow: 0 1px 5px $grey;
}
.bi-eye-slash{
margin-left:-27px;
cursor: pointer;
position: relative;
}
//heading
.signup{
text-decoration: underline;
text-decoration-color: red;
text-decoration-style:solid;
text-decoration-thickness: 5px;
}
</style>
Advertisement
Answer
You could just toggle a class.
<template>
<h5 class="signin"
:class="{ active: isLogin }"
@click="isLogin = true">Login</h5>
<h5 class="signup"
:class="{ active: !isLogin }"
@click="isLogin = false">signup</h5>
<div class="pass">
<p>Password</p>
<input :type="password_type" class="password" :class="{ 'password-visible': isPasswordVisible }" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,}$" required>
<i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();">Toggle</i>
</div>
</template>
<script>
export default {
data() {
return {
isLogin: false,
password_type: 'password',
isPasswordVisible: false,
}
},
methods: {
togglePassword() {
this.password_type = this.password_type === 'password' ? 'text' : 'password'
this.isPasswordVisible = !this.isPasswordVisible
},
}
}
</script>
<style>
.signup{
/*
text-decoration: underline;
text-decoration-color: red;
text-decoration-style:solid;
text-decoration-thickness: 5px;
*/
}
.signin.active,
.signup.active {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;
}
.password-visible {
margin: 0px 0px 0px 69px;
width: 252px;
height: 35px;
}
</style>