I've implemented a Vue component called UserAuthentication that can switch between the signin and signup components. The component contains buttons for switching between signing in and signing up, which I want to be fixed on top of the form-box from both signin.vue and signup.vue.
The signin.vue and signup.vue components are identical except for additional fields in signup.vue:
<div class="container">
<div class="form-box">
<h1 ref="title">Sign In</h1>
<form @submit.prevent="handleSubmit">
<div class="input-group">
<div class="input-field">
<input type="email" v-model="email" placeholder="Email">
</div>
<div class="input-field">
<input type="password" v-model="password" placeholder="Password">
</div>
</div>
<div class="btn-field">
<button class="invert" id="signupBtn" @click="signUp = !signUp">Sign In</button>
</div>
</form>
</div>
</div>
UserAuthenticaion.vue
<template>
<div class="user-authentication">
<div class="auth-container">
<div class="button-field">
<button class="b1" @click="showSignIn">Sign-in</button>
<button class="b2" @click="showSignUp">Sign-up</button>
</div>
<!-- Conditional rendering of components -->
<SignIn v-if="currentComponent === 'sign-in'" class="sign-in"></SignIn>
<SignUp v-else-if="currentComponent === 'sign-up'" class="sign-up">
<div class="container">
<div class="form-box">
<!-- Content from SignUp.vue -->
<!-- ... -->
</div>
</div>
</SignUp>
</div>
</div>
</template>
<script>
import SignIn from './signIn.vue';
import SignUp from './signUp.vue';
export default {
name: 'UserAuthentication',
components: {
SignIn,
SignUp,
},
data() {
return {
currentComponent: 'sign-up',
};
},
methods: {
showSignIn() {
this.currentComponent = 'sign-in';
},
showSignUp() {
this.currentComponent = 'sign-up';
},
},
};
</script>
<style scoped>
/* Existing styles for user-authentication */
/* ... */
.auth-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column; /* Ensure vertical layout */
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 999; /* Ensure the container is on top */
}
.button-field {
position: fixed;
top: 90px; /* Adjust the top position as needed */
left: 50%;
transform: translateX(-50%);
z-index: 1000;
width: 200px; /* Set a specific width for the button container */
}
.sign-up .container {
position: relative;
padding-top: 50px; /* Space for the fixed button-field */
}
.sign-up .form-box {
/* Other styles */
}
</style>