Skip to content

Commit

Permalink
update LoginView
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsungchiehchen
tsungchiehchen committed Jan 18, 2024
1 parent 091bc88 commit c2970fe
Showing 1 changed file with 118 additions and 56 deletions.
174 changes: 118 additions & 56 deletions frontend/src/vue/core/LoginView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,67 @@
<template>
<v-app class="background-image">
<v-main>
<v-container fill-height>
<!-- Main Row -->
<v-row justify="center" align="center">

<!-- Image Column -->
<v-col cols="12" sm="8" md="4">
<v-row v-for="row in 11" :key="'row-' + row" justify="center" align="center">
<v-col v-for="n in 3" :key="n" justify="center" align="center"></v-col>
</v-row>
<v-img class="my-image" src="images/background/icon.png">
</v-img>
</v-col>

<v-col v-for="col in 1" :key="'col-' + col" justify="center" align="center">
</v-col>

<!-- Form Column -->
<v-col cols="12" sm="8" md="4">
<v-row v-for="row in 11" :key="'row-' + row" justify="center" align="center">
<v-col v-for="n in 3" :key="n" justify="center" align="center"></v-col>
</v-row>
<v-card class="elevation-12">
<v-toolbar class="toolbar-banner">
<v-toolbar-title class="toolbar-title">{{ isRegister ? stateObj.register.name + ' for ' :
stateObj.login.name + ' to ' }} Res-a-Me</v-toolbar-title>
</v-toolbar>
<v-card-text>
<form ref="form" @submit.prevent="isRegister ? register() : login()">
<v-text-field v-model="email" :rules="[rules.emailRules]" label="email"
<div class="container-fluid h-100">
<div class="row h-25"></div>
<div class="row h-50 justify-content-center align-items-center">
<div class="col-4">
<v-img class="my-image" src="images/background/icon.png"></v-img>
</div>
<div class="col-6">
<v-card class="elevation-12 card">
<v-toolbar class="toolbar-banner">
<v-toolbar-title class="toolbar-title">{{ isRegister ? stateObj.register.name + ' for ' :
stateObj.login.name + ' to ' }} Res-a-Me</v-toolbar-title>
</v-toolbar>
<v-card-text>
<transition :name="isRegister ? 'slide-down' : 'slide-up'" mode="out-in">
<form v-if="isRegister" ref="form" @submit.prevent="register()" key="register-form">
<!-- Register form fields -->
<v-text-field v-model="email" rounded variant="solo-filled" :rules="[rules.emailRules]" label="Email"
required></v-text-field>
<v-text-field v-model="password" label="Password" type="password"

<v-text-field v-model="password" rounded variant="solo-filled" label="Password" type="password"
required></v-text-field>
<v-text-field v-if="isRegister" v-model="confirmPassword" label="Confirm Password"

<v-text-field v-if="isRegister" v-model="confirmPassword" rounded variant="solo-filled" label="Confirm Password"
type="password" required></v-text-field>

<div class="red--text">{{ errorMessage }}</div>
<v-btn type="submit" class="mt-4 toolbar-banner" block style="color: white">{{
isRegister ? stateObj.register.name : stateObj.login.name }}</v-btn>

<v-btn type="submit" class="btn" block>{{ isRegister ? 'Register' : 'Login' }}</v-btn>

<v-row justify="center">
<v-col cols="12" class="text-center">
<div class="grey--text mt-4 yellow-text" @click="isRegister = !isRegister;">
{{ toggleMessage }}
</div>
<div class="grey--text mt-4 yellow-text" @click="isRegister = !isRegister;">{{
toggleMessage }}</div>
</v-col>
</v-row>
</form>
</v-card-text>
</v-card>
</v-col>
<form v-else ref="form" @submit.prevent="login()" key="login-form">
<!-- Login form fields -->
<v-text-field v-model="email" rounded variant="solo-filled" :rules="[rules.emailRules]" label="Email"
required></v-text-field>

<v-text-field v-model="password" rounded variant="solo-filled" label="Password" type="password"
required></v-text-field>

<div class="red--text">{{ errorMessage }}</div>

<v-btn type="submit" class="btn" block>{{ isRegister ? 'Register' : 'Login' }}</v-btn>

</v-row>
</v-container>
</v-main>
<v-row justify="center">
<v-col cols="12" class="text-center">
<div class="grey--text mt-4 yellow-text" @click="isRegister = !isRegister;">{{
toggleMessage }}</div>
</v-col>
</v-row>
</form>
</transition>
</v-card-text>
</v-card>
</div>
</div>
<div class="row h-25"></div>
</div>
</v-app>
</template>

Expand Down Expand Up @@ -125,24 +134,24 @@ export default {
sessionStorage.setItem("refresh_token", json['refresh_token']);
try {
const updateResponse = await fetch("http://127.0.0.1:3033/updateResume", {
method: "POST",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
body: JSON.stringify({
email: this.email,
}),
method: "POST",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
body: JSON.stringify({
email: this.email,
}),
});
const json = await updateResponse.json();
if (json.status !== 200) {
console.error("Error fetching user resume: ", json.message);
console.error("Error fetching user resume: ", json.message);
}
this.$router.push({
path: "/home"
})
.then(() => window.location.reload(true))
.then(() => window.location.reload(true))
}
catch (error){
catch (error) {
console.error("Error fetching user resume: ", error);
}
}
Expand Down Expand Up @@ -208,6 +217,50 @@ export default {
</script>

<style scoped>
.h-100 {
height: 100vh;
/* Full height of the viewport */
}
.h-25 {
height: 25%;
/* 25% of the viewport height */
}
.h-50 {
height: 50%;
/* 50% of the viewport height */
}
.card {
border-radius: 13px;
width: 80%;
height: 85%;
max-width: 400px;
max-height: 450px;
margin: auto;
}
/* Slide down */
.slide-down-enter-active, .slide-down-leave-active {
transition: all 0.3s ease;
}
.slide-down-enter, .slide-down-leave-to {
opacity: 0;
transform: translateY(-100%);
}
/* Slide up */
.slide-up-enter-active, .slide-up-leave-active {
transition: all 0.3s ease;
}
.slide-up-enter, .slide-up-leave-to {
opacity: 0;
transform: translateY(100%);
}
.toolbar-title {
flex: 1;
display: flex;
Expand All @@ -226,13 +279,22 @@ export default {
background-repeat: no-repeat;
}
.btn {
border-radius: 50px;
color: white;
background-color: rgb(var(--v-theme-primary)) !important
}
.yellow-text:hover {
color: #FF4500
}
.my-image {
width: 3000%; /* or any specific pixel value */
height: auto; /* maintain the aspect ratio */
max-width: 500px; /* or any specific pixel value */
width: auto;
/* or any specific pixel value */
height: auto;
/* maintain the aspect ratio */
max-width: auto;
/* or any specific pixel value */
}
</style>

0 comments on commit c2970fe

Please sign in to comment.