From 76473789830167188321d8f11168bb956a7257ee Mon Sep 17 00:00:00 2001
From: PanditG4303 <panditg4303@users.noreply.github.com>
Date: Sat, 28 Mar 2026 21:54:04 +0530
Subject: [PATCH 1/3] feat: add email/password login and signup UI with
 Firebase integration (fixes #66)

---
 src/components/general/InvisibleToolbar.vue |   2 +-
 src/components/general/Toolbar.vue          |   2 +-
 src/router/index.js                         |  42 ++++-
 src/services/firebaseAuth.js                |  73 ++++++++
 src/views/Auth.vue                          | 176 ++++++++++++++++++++
 5 files changed, 286 insertions(+), 9 deletions(-)
 create mode 100644 src/services/firebaseAuth.js
 create mode 100644 src/views/Auth.vue

diff --git a/src/components/general/InvisibleToolbar.vue b/src/components/general/InvisibleToolbar.vue
index c23ce91f..4b051bcf 100644
--- a/src/components/general/InvisibleToolbar.vue
+++ b/src/components/general/InvisibleToolbar.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app-bar color="transparent" flat dense>
     <v-spacer />
-    <v-btn text dark class="mr-4" to="/login">
+    <v-btn text dark class="mr-4" to="/auth">
       Login
       <v-icon right>mdi-login</v-icon>
     </v-btn>
diff --git a/src/components/general/Toolbar.vue b/src/components/general/Toolbar.vue
index 302cc267..3b3fd32f 100644
--- a/src/components/general/Toolbar.vue
+++ b/src/components/general/Toolbar.vue
@@ -5,7 +5,7 @@
     </div>
     <v-spacer />
     <v-btn text dark to="/" v-if="$route.name != 'Dashboard'">
-      {{ $route.name != 'Login' ? 'Calibration' : 'Home' }}
+      {{ $route.name != 'Auth' ? 'Calibration' : 'Home' }}
     </v-btn>
     <!-- <v-btn
       text
diff --git a/src/router/index.js b/src/router/index.js
index 47e7ec72..98433edf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 // import store from '@/store/index'
 import LandingPage from '@/views/LandingPage.vue'
+import Auth from '@/views/Auth.vue'
 // import Login from '@/views/Login'
 import Dashboard from '@/views/Dashboard'
 import Calibration from '@/views/CalibrationCard'
@@ -9,6 +10,7 @@ import CameraConfig from '@/views/CameraConfiguration'
 import DoubleCalibrationRecord from '@/views/DoubleCalibrationRecord'
 import PostCalibration from '@/views/PostCalibration'
 import CalibrationConfig from '@/views/CalibrationConfig'
+import { getCurrentUser } from '@/services/firebaseAuth'
 
 Vue.use(VueRouter)
 
@@ -18,6 +20,11 @@ const routes = [
     name: 'LandingPage',
     component: LandingPage,
   },
+  {
+    path: '/auth',
+    name: 'Auth',
+    component: Auth,
+  },
   // {
   //   path: '/login',
   //   name: 'Login',
@@ -61,13 +68,34 @@ const router = new VueRouter({
   routes
 })
 
-// router.beforeResolve(async (to, from, next) => {
-//   var user = store.state.auth.user
-//   user = user ?? await store.dispatch('autoSignIn')
-//   if ((to.path == '/login' || to.path == '/') && user) next('/dashboard')
-//   else if ((to.path == '/dashboard') && !user) next('/login')
+router.beforeEach(async (to, from, next) => {
+  if (to.path !== '/' && to.path !== '/auth') {
+    next()
+    return
+  }
+
+  try {
+    const user = await getCurrentUser()
+
+    if (to.path === '/' && !user) {
+      next('/auth')
+      return
+    }
 
-//   next()
-// })
+    if (to.path === '/auth' && user) {
+      next('/dashboard')
+      return
+    }
+
+    next()
+  } catch (error) {
+    if (to.path === '/') {
+      next('/auth')
+      return
+    }
+
+    next()
+  }
+})
 
 export default router
diff --git a/src/services/firebaseAuth.js b/src/services/firebaseAuth.js
new file mode 100644
index 00000000..89c42a5c
--- /dev/null
+++ b/src/services/firebaseAuth.js
@@ -0,0 +1,73 @@
+import firebase from 'firebase/app'
+import 'firebase/auth'
+import 'firebase/firestore'
+
+const mapUser = (user) => {
+  if (!user) {
+    return null
+  }
+
+  const { uid, email, displayName } = user
+  return { uid, email, displayName }
+}
+
+const saveUserProfile = async (user) => {
+  if (!user) {
+    return
+  }
+
+  const userProfile = {
+    displayName: user.displayName || user.email || '',
+    email: user.email || '',
+  }
+
+  await firebase
+    .firestore()
+    .collection('users')
+    .doc(user.uid)
+    .set(userProfile, { merge: true })
+}
+
+export const getCurrentUser = () => {
+  return new Promise((resolve, reject) => {
+    const auth = firebase.auth()
+
+    if (auth.currentUser) {
+      resolve(mapUser(auth.currentUser))
+      return
+    }
+
+    const unsubscribe = auth.onAuthStateChanged(
+      (user) => {
+        unsubscribe()
+        resolve(mapUser(user))
+      },
+      (error) => {
+        reject(error)
+      }
+    )
+  })
+}
+
+export const signInWithGoogle = async () => {
+  const provider = new firebase.auth.GoogleAuthProvider()
+  const result = await firebase.auth().signInWithPopup(provider)
+  const user = result.user
+
+  await saveUserProfile(user)
+
+  return mapUser(user)
+}
+
+export const signInWithEmail = async (email, password) => {
+  const result = await firebase.auth().signInWithEmailAndPassword(email, password)
+  return mapUser(result.user)
+}
+
+export const signUpWithEmail = async (email, password) => {
+  const result = await firebase.auth().createUserWithEmailAndPassword(email, password)
+
+  await saveUserProfile(result.user)
+
+  return mapUser(result.user)
+}
diff --git a/src/views/Auth.vue b/src/views/Auth.vue
new file mode 100644
index 00000000..297dbb47
--- /dev/null
+++ b/src/views/Auth.vue
@@ -0,0 +1,176 @@
+<template>
+  <div style="height: 100%">
+    <toolbar />
+    <v-row justify="center" align="center" style="height: 90%">
+      <v-col cols="12" lg="6" md="7">
+        <v-card outlined class="py-12 px-6">
+          <h2 class="text-center">{{ isSignup ? 'Sign Up' : 'Login' }}</h2>
+          <p class="text-center pt-6">
+            {{ isSignup ? 'Create your account to start calibration sessions.' : 'Login to continue with your calibration sessions.' }}
+          </p>
+
+          <v-alert v-if="errorMessage" type="error" dense outlined class="mt-4 mb-0">
+            {{ errorMessage }}
+          </v-alert>
+
+          <v-text-field
+            id="auth-email"
+            v-model="email"
+            label="Email"
+            type="email"
+            autocomplete="email"
+            outlined
+            dense
+            class="mt-6"
+            :disabled="loading"
+          />
+
+          <v-text-field
+            id="auth-password"
+            v-model="password"
+            label="Password"
+            type="password"
+            autocomplete="current-password"
+            outlined
+            dense
+            :disabled="loading"
+            @keyup.enter="submitAuth"
+          />
+
+          <v-btn
+            id="auth-submit"
+            color="black"
+            dark
+            block
+            :loading="loading"
+            :disabled="loading"
+            @click="submitAuth"
+          >
+            {{ isSignup ? 'Sign up' : 'Login' }}
+          </v-btn>
+
+          <v-row justify="center" class="mt-6">
+            <v-btn
+              id="login-btn-google"
+              large
+              tile
+              class="rounded-0 ma-0"
+              color="#ffffff"
+              :disabled="loading"
+              @click="loginWithGoogle"
+            >
+              <v-img
+                height="35px"
+                width="35px"
+                class="signin-icon"
+                src="@/assets/iconGoogle.svg"
+                alt="Google sign in - icon"
+              />
+              <p class="pl-1 pr-1 ma-0 text-center text-capitalize">Sign in with Google</p>
+            </v-btn>
+          </v-row>
+
+          <p class="text-center mt-6 mb-0">
+            {{ isSignup ? 'Already have an account?' : "Don't have an account?" }}
+            <button class="toggle-btn" type="button" :disabled="loading" @click="toggleMode">
+              {{ isSignup ? 'Login' : 'Sign up' }}
+            </button>
+          </p>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import Toolbar from '@/components/general/Toolbar.vue'
+import { signInWithEmail, signInWithGoogle, signUpWithEmail } from '@/services/firebaseAuth'
+
+export default {
+  components: {
+    Toolbar,
+  },
+  data() {
+    return {
+      email: '',
+      password: '',
+      isSignup: false,
+      loading: false,
+      errorMessage: '',
+    }
+  },
+  methods: {
+    toggleMode() {
+      this.isSignup = !this.isSignup
+      this.errorMessage = ''
+    },
+    validateForm() {
+      if (!this.email || !this.password) {
+        this.errorMessage = 'Please enter both email and password.'
+        return false
+      }
+
+      if (this.password.length < 6) {
+        this.errorMessage = 'Password must be at least 6 characters long.'
+        return false
+      }
+
+      return true
+    },
+    async submitAuth() {
+      this.errorMessage = ''
+
+      if (!this.validateForm()) {
+        return
+      }
+
+      this.loading = true
+
+      try {
+        const normalizedEmail = this.email.trim()
+
+        if (this.isSignup) {
+          await signUpWithEmail(normalizedEmail, this.password)
+        } else {
+          await signInWithEmail(normalizedEmail, this.password)
+        }
+
+        this.$router.push('/dashboard')
+      } catch (error) {
+        this.errorMessage = error.message || 'Authentication failed. Please try again.'
+      } finally {
+        this.loading = false
+      }
+    },
+    async loginWithGoogle() {
+      this.errorMessage = ''
+      this.loading = true
+
+      try {
+        await signInWithGoogle()
+        this.$router.push('/dashboard')
+      } catch (error) {
+        this.errorMessage = error.message || 'Google sign-in failed. Please try again.'
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.toggle-btn {
+  background: transparent;
+  border: 0;
+  color: #1976d2;
+  cursor: pointer;
+  font-weight: 600;
+  padding: 0;
+}
+
+.toggle-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>

From eb282d2c0c9fad2007f7fdddd4aed2144a99d890 Mon Sep 17 00:00:00 2001
From: vaibhav trivedi <vaibhav.trivedi.4303@gmail.com>
Date: Sat, 28 Mar 2026 23:06:18 +0530
Subject: [PATCH 2/3] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/services/firebaseAuth.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/services/firebaseAuth.js b/src/services/firebaseAuth.js
index 89c42a5c..9d5eb7a2 100644
--- a/src/services/firebaseAuth.js
+++ b/src/services/firebaseAuth.js
@@ -43,6 +43,7 @@ export const getCurrentUser = () => {
         resolve(mapUser(user))
       },
       (error) => {
+        unsubscribe()
         reject(error)
       }
     )

From cbe8922722d78569377ddd1fe0f448e6404bba81 Mon Sep 17 00:00:00 2001
From: vaibhav trivedi <vaibhav.trivedi.4303@gmail.com>
Date: Sat, 28 Mar 2026 23:06:34 +0530
Subject: [PATCH 3/3] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/views/Auth.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Auth.vue b/src/views/Auth.vue
index 297dbb47..a3ca2f64 100644
--- a/src/views/Auth.vue
+++ b/src/views/Auth.vue
@@ -66,7 +66,7 @@
                 src="@/assets/iconGoogle.svg"
                 alt="Google sign in - icon"
               />
-              <p class="pl-1 pr-1 ma-0 text-center text-capitalize">Sign in with Google</p>
+              <span class="pl-1 pr-1 ma-0 text-center text-capitalize">Sign in with Google</span>
             </v-btn>
           </v-row>