Skip to content

Commit

Permalink
minor touchups to google auth login
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaiyanggg
kaiyanggg committed Apr 24, 2024
1 parent a619137 commit da300e2
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 87 deletions.
188 changes: 105 additions & 83 deletions src/components/ErrorMessage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,120 @@
<template>
<div class="modal">
<div class = "model-flexbox">
<span class="close" @click="toggleError">&times;</span>
<img id="errorImg" src="@/assets/close.png" alt="ErrorCross">
<p id = 'errorMessage'>Oops!</p>
<span id = "message">{{ displayMessage }}</span>
</div>
<div class="modal">
<div class="model-flexbox">
<span class="close" @click="toggleError">&times;</span>
<img id="errorImg" src="@/assets/close.png" alt="ErrorCross" />
<p id="errorMessage">Oops!</p>
<span id="message">{{ displayMessage }}</span>
</div>
</template>

<script>
export default {
name: "ErrorMessage",
data() {
return {
displayMessage: ""
};
</div>
</template>

<script>
export default {
name: "ErrorMessage",
data() {
return {
displayMessage: "",
};
},
props: {
condition: {
type: String,
required: true,
},
props: {
condition: {
type: String,
required: true
},
user_id: {
type: String,
},
user_id: {
type: String,
},
error: {
type: String,
}
error: {
type: String,
},
mounted() {
},
mounted() {
this.getMessage();
},
watch: {
condition: function (newCondition) {
this.getMessage();
},
watch: {
condition: function(newCondition) {
this.getMessage();
},
methods: {
getMessage() {
// login errors
if (
this.condition === "errorLogin" &&
this.error == "auth/invalid-email"
) {
this.displayMessage = "You entered an invalid email! Please try again";
} else if (
this.condition === "errorLogin" &&
this.error == "auth/invalid-credential"
) {
this.displayMessage = "Incorrect password or email! Please try again";
}
// registration errors
else if (
this.condition === "errorRegistration" &&
this.error == "Firebase: Error (auth/email-already-in-use)."
) {
this.displayMessage = "The email you entered is already in use";
} else if (
this.condition === "errorRegistration" &&
this.error == "Postal code invalid. Please try again."
) {
this.displayMessage = "Invalid postal code! Please try again.";
} else if (
this.condition === "errorRegistration" &&
this.error == "Firebase: Error (auth/invalid-email)."
) {
this.displayMessage = "The email entered is invalid! Please try again.";
} else if (
this.condition === "errorRegistration" &&
this.error == "Firebase: Error (auth/missing-password)."
) {
this.displayMessage = "You forgot to provide a password!";
} else if (
this.condition === "errorRegistration" &&
this.error == "Please make sure all fields are filled."
) {
this.displayMessage =
"You missed out some fields! Please fill them in.";
}
// google registration errors
else if (
this.condition === "errorRegistration" &&
this.error == "Account already exists."
) {
this.displayMessage = "The email you entered is already in use";
} else if (
this.condition === "errorLoginNotRegisteredGoogle" &&
this.error == "Login but not registered with google"
) {
this.displayMessage = "This google account is not registered.";
} else {
this.displayMessage = "Something went wrong! Please try again";
}
},
methods: {
getMessage() {
// login errors
if (this.condition === "errorLogin" && this.error == "auth/invalid-email") {
this.displayMessage = "You entered an invalid email! Please try again";
}
else if (this.condition === "errorLogin" && this.error == "auth/invalid-credential") {
this.displayMessage = "Incorrect password or email! Please try again";
}
// registration errors
else if (this.condition === "errorRegistration" && this.error == "Firebase: Error (auth/email-already-in-use).") {
this.displayMessage = "The email you entered is already in use";
}
else if (this.condition === "errorRegistration" && this.error == "Postal code invalid. Please try again.") {
this.displayMessage = "Invalid postal code! Please try again.";
}
else if (this.condition === "errorRegistration" && this.error == "Firebase: Error (auth/invalid-email).") {
this.displayMessage = "The email entered is invalid! Please try again.";
}
else if (this.condition === "errorRegistration" && this.error == "Firebase: Error (auth/missing-password).") {
this.displayMessage = "You forgot to provide a password!";
}
else if (this.condition === "errorRegistration" && this.error == "Please make sure all fields are filled.") {
this.displayMessage = "You missed out some fields! Please fill them in.";
}
// google registration errors
else if (this.condition === "errorRegistration" && this.error == "Account already exists.") {
this.displayMessage = "The email you entered is already in use";
}
else {
this.displayMessage = "Something went wrong! Please try again";
}
},
toggleError() {
if (this.condition === "errorLogin") {
this.$emit("close")
} else if (this.condition === "errorRegistration") {
this.$emit("close")
} else {
this.$emit("close")
}
toggleError() {
if (this.condition === "errorLogin") {
this.$emit("close");
} else if (this.condition === "errorRegistration") {
this.$emit("close");
} else {
this.$emit("close");
}
}
};
</script>

},
},
};
</script>

<style scoped>
.modal {
text-align: center;
Expand Down Expand Up @@ -141,6 +165,4 @@ img {
font-size: 20px;
margin-bottom: 0px;
}
</style>

29 changes: 25 additions & 4 deletions src/components/LoginAuth.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,14 @@

<script setup>
import { ref } from "vue";
import firebaseApp from "@/firebase";
import firebaseApp, { firestore } from "@/firebase";
import {
getAuth,
signInWithEmailAndPassword,
signInWithPopup,
GoogleAuthProvider,
} from "firebase/auth";
import { getDoc, doc } from "firebase/firestore";
import { useRouter } from "vue-router";
import SuccessMessage from "@/components/SuccessMessage.vue";
import ErrorMessage from "@/components/ErrorMessage.vue";
Expand Down Expand Up @@ -116,9 +117,29 @@ const loginWithGoogle = async (event) => {
try {
const result = await signInWithPopup(auth, provider);
const user = result.user;
user_id.value = user.uid;
loginStatus.value = "success";
message_passed = "loginSuccess";
const userDocRef = doc(firestore, "users", user.uid);
// Get the document
const userDocSnap = await getDoc(userDocRef);
console.log("hi");
// Check if the document exists
if (userDocSnap.exists()) {
// Document exists, proceed with login
user_id.value = user.uid;
loginStatus.value = "success";
message_passed = "loginSuccess";
} else {
loginStatus.value = "error";
message_passed = "errorLoginNotRegisteredGoogle";
error.value = "Login but not registered with google";
showError.value = true;
try {
await user.delete();
console.log("User account deleted successfully");
} catch (error) {
console.error("Error deleting user account:", error);
}
}
} catch (error) {
loginStatus.value = "error";
message_passed = "errorLogin";
Expand Down

0 comments on commit da300e2

Please sign in to comment.