Merge pull request #11 from davidroll20/firebase-auth

Changed from google auth to email pw auth
davidroll20 · Dec 24, 2024 · 5b29437 · 5b29437
2 parents a9acd01 + 792eb75
commit 5b29437
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 37 deletions.
diff --git a/src/components/SimpleLogin/SimpleLogin.vue b/src/components/SimpleLogin/SimpleLogin.vue
@@ -1,57 +1,53 @@
 <template>
   <div class="simple-login">
-    <h1 class="simple-login__message">Please enter the Ryan Fam password below:</h1>
-    <div class="simple-login__password">
+    <h1 class="simple-login__message">In the fam? Please log in below:</h1>
+    <div class="simple-login__controls">
       <div class="simple-login__filler"></div>
+      <label for="email-input">Email:</label>
+      <input
+        type="text"
+        name="email-input"
+        v-model="store.email"
+        class="simple-login__input"
+        v-if="!store.strike"
+      />
+      <label for="pw-input">Password:</label>
       <input
         type="password"
+        name="pw-input"
+        class="simple-login__input"
         v-model="store.pw"
         v-if="!store.strike && !store.showInput"
-        @keyup.enter="store.proxyVerify()"
+        @keyup.enter="store.emailSignin()"
       />
       <input
         type="text"
+        name="pw-input"
+        class="simple-login__input"
         v-model="store.pw"
         v-if="!store.strike && store.showInput"
-        @keyup.enter="store.proxyVerify()"
+        @keyup.enter="store.emailSignin()"
       />
       <button v-if="!store.strike" class="simple-login__show" @click="store.toggleShowInput()">
         <unicon name="eye" fill="var(--ryan-fam-blue)" height="24px" width="24px"></unicon>
       </button>
     </div>
 
-    <span v-if="store.strike">Try again in a moment.</span>
-    <button @click="store.proxyVerify()" class="simple-login__submit">Submit</button>
-    <button @click="signinRedirect()" class="simple-login__submit">Sign-in with Google</button>
+    <p v-if="store.errorMessage" class="simple-login__warning">
+      {{ store.errorMessage }}
+    </p>
+    <div>
+      <button @click="store.emailSignin()" class="simple-login__submit">Login</button>
+      <span> or </span>
+      <button @click="store.emailCreate()" class="simple-login__submit">Sign-Up</button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useLoginStore } from '@/stores/loginStore';
-import { getRedirectResult, GoogleAuthProvider, signInWithRedirect } from 'firebase/auth';
-import { onMounted, ref } from 'vue';
-import { useFirebaseAuth } from 'vuefire';
 
 const store = useLoginStore();
-
-const auth = useFirebaseAuth(); // only exists on client side
-
-// display errors if any
-const error = ref(null);
-function signinRedirect() {
-  signInWithRedirect(auth, new GoogleAuthProvider()).catch((reason) => {
-    console.error('Failed signinRedirect', reason);
-    error.value = reason;
-  });
-}
-
-// only on client side
-onMounted(() => {
-  getRedirectResult(auth).catch((reason) => {
-    console.error('Failed redirect result', reason);
-    error.value = reason;
-  });
-});
 </script>
 
 <style lang="scss">
@@ -70,10 +66,19 @@ onMounted(() => {
     width: 32px;
   }
 
-  &__password {
+  &__input {
+    border-radius: 4px;
+    margin: 0 var(--space-md);
+  }
+
+  &__controls {
     display: flex;
+    margin: var(--space-lg);
+  }
+
+  &__warning {
+    color: red;
     margin-bottom: var(--space-md);
-    border-radius: 4px;
   }
 
   &__show {

diff --git a/src/firebase.ts b/src/firebase.ts
@@ -3,8 +3,8 @@ import { collection, getFirestore } from 'firebase/firestore';
 
 export const firebaseApp = initializeApp({
   apiKey: 'AIzaSyBQ6izD-t26QvAFhHV9SvmNy1cdt9fLaz8',
-  // authDomain: 'ryan-fam.firebaseapp.com',
-  authDomain: 'www.ryan-fam.com',
+  authDomain: 'ryan-fam.firebaseapp.com',
+  // authDomain: 'www.ryan-fam.com',
   projectId: 'ryan-fam',
   storageBucket: 'ryan-fam.firebasestorage.app',
   messagingSenderId: '750155303707',

diff --git a/src/stores/loginStore.ts b/src/stores/loginStore.ts
@@ -1,11 +1,105 @@
-import { ref } from 'vue';
+import { computed, ref, type Ref } from 'vue';
 import { defineStore } from 'pinia';
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  type User,
+  signInWithEmailAndPassword,
+} from 'firebase/auth';
 
 export const useLoginStore = defineStore('login', () => {
   const pw = ref('');
+  const email = ref('');
   const pwAccepted = ref(false);
   const strike = ref(false);
+  const pwInvalid = ref(false);
+  const emailInvalid = ref(false);
   const showInput = ref(false);
+  const errorMessage = ref('');
+  const user: Ref<User | undefined> = ref();
+
+  const isSignedIn = computed(() => {
+    return user.value !== undefined;
+  });
+
+  const validatePw = () => {
+    if (
+      pw.value.length > 6 &&
+      (pw.value.includes('!') ||
+        pw.value.includes('@') ||
+        pw.value.includes('#') ||
+        pw.value.includes('$') ||
+        pw.value.includes('%') ||
+        pw.value.includes('^') ||
+        pw.value.includes('&') ||
+        pw.value.includes('*') ||
+        pw.value.includes('(') ||
+        pw.value.includes(')') ||
+        pw.value.includes('-') ||
+        pw.value.includes('+'))
+    ) {
+      pwInvalid.value = false;
+      errorMessage.value = '';
+      return true;
+    } else {
+      pwInvalid.value = true;
+      errorMessage.value =
+        'Your password must be longer than 6 characters and include one of the following special characters: !@#$%^&*()_+.';
+      return false;
+    }
+  };
+
+  const validateEmail = () => {
+    const at = email.value.indexOf('@');
+    if (at > 0 && at !== email.value.length - 1) {
+      emailInvalid.value = false;
+      errorMessage.value = '';
+      return true;
+    } else {
+      emailInvalid.value = true;
+      errorMessage.value = 'You must enter a valid email address.';
+      return false;
+    }
+  };
+
+  const emailCreate = () => {
+    if (!validateEmail() || !validatePw()) {
+      return;
+    }
+    const auth = getAuth();
+    createUserWithEmailAndPassword(auth, email.value, pw.value)
+      .then((userCredential) => {
+        // Signed up
+        user.value = userCredential.user;
+        errorMessage.value = '';
+        // ...
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMsg = error.message;
+        errorMessage.value = `Sign-up failed: ${errorCode}: ${errorMsg}`;
+        // ..
+      });
+  };
+
+  const emailSignin = () => {
+    if (!validateEmail() || !validatePw()) {
+      return;
+    }
+    const auth = getAuth();
+    signInWithEmailAndPassword(auth, email.value, pw.value)
+      .then((userCredential) => {
+        // Signed in
+        user.value = userCredential.user;
+        errorMessage.value = '';
+        // ...
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMsg = error.message;
+        errorMessage.value = `Login failed: ${errorCode}: ${errorMsg}`;
+      });
+  };
 
   const proxyVerify = () => {
     verifyPW();
@@ -47,6 +141,13 @@ export const useLoginStore = defineStore('login', () => {
 
   return {
     pw,
+    email,
+    pwInvalid,
+    emailInvalid,
+    isSignedIn,
+    errorMessage,
+    emailCreate,
+    emailSignin,
     proxyVerify,
     pwAccepted,
     strike,

diff --git a/src/views/BulletinPageView.vue b/src/views/BulletinPageView.vue
@@ -1,6 +1,6 @@
 <template>
   <main>
-    <div v-if="!loginStore.pwAccepted">
+    <div v-if="!loginStore.isSignedIn">
       <SimpleLogin></SimpleLogin>
     </div>
     <div class="bulletin-page-view" v-else>

diff --git a/src/views/BulletinView.vue b/src/views/BulletinView.vue
@@ -1,6 +1,6 @@
 <template>
   <main>
-    <div v-if="!loginStore.pwAccepted">
+    <div v-if="!loginStore.isSignedIn">
       <SimpleLogin></SimpleLogin>
     </div>
     <div class="bulletin-view" v-else>

diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
@@ -1,6 +1,6 @@
 <template>
   <main>
-    <div v-if="!loginStore.pwAccepted">
+    <div v-if="!loginStore.isSignedIn">
       <SimpleLogin></SimpleLogin>
     </div>
     <div class="calendar-view" v-else>