Merge branch 'main' of https://github.com/ludanxer/oflatmate into main

felafel/VfAvatarItem.vue

@@ -7,7 +7,7 @@ export default {
   props: {
     link: {
       type: String,
-      default: './user-circle-solid.svg',
+      default: '/user-circle-solid.svg',
     },
     middle: {
       type: Boolean,

felafel/VfButton.vue

@@ -7,6 +7,7 @@
       'btn-primary': primary,
       'btn-simple': simple,
       'btn-plain': plain,
+      'btn-solid': solid,
       'btn-large': large,
       'btn-middle': !large,
     }"
@@ -22,6 +23,7 @@ export default {
     danger: { type: Boolean, default: false },
     plain: { type: Boolean, default: false },
     simple: { type: Boolean, default: false },
+    solid: { type: Boolean, default: false },
     primary: { type: Boolean, default: false },
     large: { type: Boolean, default: false },
   },
@@ -54,6 +56,10 @@ export default {
   @apply transition delay-100 border-none bg-white hover:bg-gray-200;
 }
 
+.btn-solid {
+  @apply border-transparent bg-gray-200 hover:bg-gray-300;
+}
+
 .btn-large {
   @apply px-4 py-2;
 }

src/components/headings/HeadFlat.vue

@@ -74,7 +74,7 @@ export default {
   methods: {
     openModal({ currentTarget }) {
       this.modalOptions = this.getModalOption(currentTarget.id)
-      this.headModal = true
+      this.headModal = true // why does it work without `.value` ?
     },
     getModalOption(type) {
       switch (type) {

src/components/headings/HeadItemProfile.vue

@@ -13,11 +13,11 @@
       @click="open = false"
     >
       <router-link
-        to="/user/profile"
+        to="/setting/profile"
         class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
         role="menuitem"
       >
-        Your Profile
+        Settings
       </router-link>
       <button
         class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"

src/components/settings/Profile.vue

@@ -15,10 +15,19 @@
         label="Email address"
         :placeholder="$user.email"
       />
-      <div class="flex flex-row space-x-2 pt-2">
+
+      <div v-if="proviedByPass">
+        <span class="text-gray-700">Password</span>
+        <vf-button type="button" solid large class="ml-4" @click="pwdReset">
+          Reset your Password by email
+        </vf-button>
+      </div>
+      <vf-input v-else type="password" name="password" label="Password" />
+
+      <div class="mt-8 flex flex-row space-x-2 pt-2">
         <div class="flex-grow"></div>
-        <vf-button type="reset">Reset</vf-button>
-        <vf-button primary>Save</vf-button>
+        <vf-button large type="reset">Reset</vf-button>
+        <vf-button large primary>Save</vf-button>
       </div>
     </vf-form>
 
@@ -50,13 +59,18 @@
 </template>
 
 <script>
-import { object, string } from 'yup'
+import yuppass from 'yup-password'
+import * as yup from 'yup'
 import { ref } from 'vue'
+import { authProviders } from '@/firebaseConfig'
 
 export default {
   setup() {
-    const profileSchema = object({
-      username: string().required().trim().max(25),
+    yuppass(yup)
+
+    const profileSchema = yup.object({
+      username: yup.string().required().trim().max(25),
+      password: yup.string().password(),
     })
     const deleteModal = ref(false)
 
@@ -67,16 +81,30 @@ export default {
   },
   methods: {
     onSubmit(values, { resetForm }) {
-      this.$user
+      if (values.password) {
+        const credential = authProviders.Email.credential(
+          this.$user.email,
+          values.password
+        )
+        this.$auth.currentUser
+          .linkWithCredential(credential)
+          .then((usercred) => {
+            this.$store.commit('setUser', usercred.user)
+            resetForm()
+          })
+      }
+
+      this.$auth.currentUser
         .updateProfile({
           displayName: values.username,
         })
         .then(() => {
+          this.$store.commit('setUser', this.$auth.currentUser)
           resetForm()
         })
     },
     handleDelete() {
-      this.$user
+      this.$auth.currentUser
         .delete()
         .then(() => {
           this.$store.commit('clearUser')
@@ -87,6 +115,20 @@ export default {
           // https://firebase.google.com/docs/auth/web/manage-users#re-authenticate_a_user
         })
     },
+    pwdReset() {
+      this.$auth.sendPasswordResetEmail(this.$user.email).then(() => {
+        alert('Email sent')
+      })
+    },
+  },
+  computed: {
+    proviedByPass() {
+      return (
+        this.$user.providerData.find(
+          (provider) => provider.providerId == authProviders.Email.PROVIDER_ID
+        ) != undefined
+      )
+    },
   },
 }
 </script>

src/firebaseConfig.js

@@ -25,10 +25,10 @@ if (import.meta.env.DEV) {
   db.useEmulator('localhost', emulators.firestore.port)
 }
 
-const authProviders = [
-  firebase.auth.EmailAuthProvider.PROVIDER_ID,
-  firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-]
+const authProviders = {
+  Email: firebase.auth.EmailAuthProvider,
+  Google: firebase.auth.GoogleAuthProvider,
+}
 
 const filedValDel = firebase.firestore.FieldValue.delete()
 

src/package.json

@@ -11,14 +11,15 @@
     "@oflatmate/utils": "0.0.1",
     "@tailwindcss/forms": "^0.2.1",
     "dayjs": "^1.10.4",
-    "firebase": "^8.2.1",
-    "firebaseui": "^4.7.3",
+    "firebase": "^8.4.1",
+    "firebaseui": "^4.8.0",
     "tailwindcss": "^2.0.3",
     "vue": "^3.0.7",
     "vue-router": "^4.0.2",
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.0",
-    "yup": "^0.32.9"
+    "yup": "^0.32.9",
+    "yup-password": "^0.2.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.2.4",

src/router/routes.js

@@ -1,7 +1,7 @@
 import { DEFAULT_SIGNIN_PATH } from '@/utils'
 import store from '@/store'
 import Layout from '@/others/Layout.vue'
-import User from '@/views/User.vue'
+import Setting from '@/views/Setting.vue'
 import Home from '@/views/Home.vue'
 import Flat from '@/views/Flat.vue'
 import Profile from '@/components/settings/Profile.vue'
@@ -18,9 +18,9 @@ const routes = [
         component: Home,
       },
       {
-        path: 'user',
-        name: 'user',
-        component: User,
+        path: 'setting',
+        name: 'setting',
+        component: Setting,
         meta: { requiresAuth: true },
         children: [
           {

src/store/index.js

@@ -1,4 +1,4 @@
-import { createStore } from 'vuex'
+import { createStore, createLogger } from 'vuex'
 import flat from '@/store/flat.js'
 import user from '@/store/user.js'
 
@@ -7,4 +7,5 @@ export default createStore({
     flat,
     user,
   },
+  plugins: import.meta.env.DEV ? [createLogger()] : [],
 })

src/store/user.js

@@ -9,8 +9,14 @@ const user = {
     }
   },
   mutations: {
-    setUser(state, newUser) {
-      state.user = newUser
+    setUser(state, fireUser) {
+      state.user = {
+        displayName: fireUser.displayName,
+        email: fireUser.email,
+        photoUrl: fireUser.photoUrl,
+        uid: fireUser.uid,
+        providerData: fireUser.providerData,
+      }
     },
     clearUser(state) {
       state.user = null

src/views/Authentication.vue

@@ -28,17 +28,25 @@ import { authProviders } from '@/firebaseConfig'
 
 export default {
   mounted() {
-    const ui = new firebaseui.auth.AuthUI(this.$auth)
+    const ui =
+      firebaseui.auth.AuthUI.getInstance() ||
+      new firebaseui.auth.AuthUI(this.$auth)
 
     const nextPath = this.$route.redirectedFrom
       ? this.$route.redirectedFrom.fullPath
       : DEFAULT_SIGNIN_PATH
 
+    /*
+      Set user in `signInSuccessWithAuthResult` callback won't help,
+      cuz there will be a refresh after authentication which will clear vuex,
+      even if there isn't, a user manual refresh will lost the state anyway
+    */
+
     ui.start('#firebaseui-auth-container', {
-      // no auto refresh during login, but getCurrentUser in utils is still needed for user refresh
-      signInFlow: 'popup',
       signInSuccessUrl: nextPath,
-      signInOptions: authProviders,
+      signInOptions: Object.values(authProviders).map(
+        (provider) => provider.PROVIDER_ID
+      ),
     })
   },
 }

src/views/User.vue → src/views/Setting.vue

@@ -1,5 +1,15 @@
 <template>
-  <div id="user" class="flex-col mx-20">
+  <div id="setting" class="flex-col mx-20">
+    <div v-if="$user" class="flex flex-row ml-10 mb-10 space-x-10">
+      <vf-avatar-item middle :link="$user.photoURL" />
+      <div>
+        <h2 class="text-xl font-medium">
+          {{ $user.displayName }}
+        </h2>
+        <p class="text-gray-600">{{ $user.email }}</p>
+      </div>
+    </div>
+
     <div class="flex flex-row w-full">
       <div class="w-80 pr-10">
         <h3 class="text-2xl font-bold ml-2 mb-4">Settings</h3>