@bettertogether/community-engine-vue 0.1.7 → 0.2.2

package/src/components/BtNavBar.vue

@@ -1,54 +1,41 @@
 <template>
-  <b-navbar-nav
+  <BNavbarNav
     :class="navbarClass"
     pills
     align="center"
   >
     <BtNavItem
-      v-for="menuItem in headerMenuItems"
-      :id="menuItem.id"
-      :key="menuItem.id"
-      :external="menuItem.external"
-      :label="menuItem.label"
-      :target="menuItem.target"
-      :title="menuItem.title"
-      :path="menuItem.path"
-      :url="menuItem.url"
+      v-for="item in menuStore.headerMenuItems"
+      :id="item.id"
+      :key="item.id"
+      :external="item.external"
+      :label="item.label"
+      :target="item.target"
+      :title="item.title"
+      :path="item.path"
+      :url="item.url"
       :navitem-class="navitemClass"
     />
-    <BtNavUser v-if="isAuthenticated" />
-  </b-navbar-nav>
+    <BtNavUser v-if="authStore.isAuthenticated" />
+  </BNavbarNav>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
+<script setup>
+import { BNavbarNav } from 'bootstrap-vue-next'
+import { useAuthStore } from '../stores/auth'
+import { useMenuStore } from '../stores/menus'
 import BtNavItem from './BtNavItem.vue'
+import BtNavUser from './BtNavUser.vue'
+
+defineProps({
+  navbarClass: { type: String, default: '' },
+  navitemClass: { type: String, default: '' },
+})
 
-export default {
-  name: 'NavBar',
-  components: {
-    BtNavItem,
-  },
-  props: {
-    navbarClass: {
-      type: String,
-      default: '',
-    },
-    navitemClass: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    ...mapGetters('CommunityEngine/Authentication', ['isAuthenticated']),
-    ...mapGetters('CommunityEngine/Menus', ['headerMenuItems']),
-  },
-}
+const authStore = useAuthStore()
+const menuStore = useMenuStore()
 </script>
 
 <style scoped lang="scss">
-  .center {
-    text-align: center;
-  }
+.center { text-align: center; }
 </style>

package/src/components/BtNavItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-nav-item
+  <BNavItem
     :class="navitemClass"
     :href="localHref"
     :target="target"
@@ -8,78 +8,45 @@
   >
     <nobr>
       {{ label }}
-      <font-awesome-icon
+      <FontAwesomeIcon
         v-if="external"
         icon="external-link-alt"
         size="xs"
         title="External Link"
       />
     </nobr>
-  </b-nav-item>
+  </BNavItem>
 </template>
 
-<script>
-export default {
-  name: 'BtNavItem',
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    external: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: 'Label',
-    },
-    navitemClass: {
-      type: String,
-      default: '',
-    },
-    path: {
-      type: String,
-      default: '#',
-    },
-    sortOrder: {
-      type: Number,
-      default: 0,
-    },
-    target: {
-      type: String,
-      default: '_self',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    url: {
-      type: String,
-      default: '#',
-    },
-  },
-  computed: {
-    localHref() { return this.external ? this.url : undefined },
-    localTitle() { return this.title !== '' ? this.title : this.label },
-    localTo() { return !this.external ? this.path : undefined },
-  },
-}
+<script setup>
+import { computed } from 'vue'
+import { BNavItem } from 'bootstrap-vue-next'
+
+const props = defineProps({
+  id: { type: Number, default: 0 },
+  external: { type: Boolean, default: false },
+  label: { type: String, default: 'Label' },
+  navitemClass: { type: String, default: '' },
+  path: { type: String, default: '#' },
+  sortOrder: { type: Number, default: 0 },
+  target: { type: String, default: '_self' },
+  title: { type: String, default: '' },
+  url: { type: String, default: '#' },
+})
+
+const localHref = computed(() => props.external ? props.url : undefined)
+const localTitle = computed(() => props.title !== '' ? props.title : props.label)
+const localTo = computed(() => !props.external ? props.path : undefined)
 </script>
 
 <style scoped lang="scss">
 @import '../stylesheets/theme.scss';
-.nav-item {
-  color: red;
 
-  ::v-deep > a.nav-link {
+.nav-item {
+  :deep(> a.nav-link) {
     font-weight: bold;
     color: $default-text-color-bg-dark;
-
-    &.router-link-exact-active,
-    &:hover {
-      color: $accent-color;
-    }
+    &.router-link-exact-active, &:hover { color: $accent-color; }
   }
 }
 </style>

package/src/components/BtNavUser.vue

@@ -1,108 +1,87 @@
 <template>
-  <b-nav-item-dropdown
+  <BNavItemDropdown
     class="user-dropdown"
     :text="dropdownText"
-    right
+    end
   >
-    <b-dropdown-item
-      v-if="isAuthenticated"
+    <BDropdownItem
+      v-if="authStore.isAuthenticated"
       to="/me"
     >
-      Me
-    </b-dropdown-item>
-    <b-dropdown-item
-      v-if="isAuthenticated"
-      @click="signOutAction"
+      {{ t('bt.navigation.me') }}
+    </BDropdownItem>
+    <BDropdownItem
+      v-if="authStore.isAuthenticated"
+      @click="handleSignOut"
     >
-      Sign Out
-    </b-dropdown-item>
-    <b-dropdown-item
-      v-if="!isAuthenticated"
+      {{ t('bt.auth.sign_out') }}
+    </BDropdownItem>
+    <BDropdownItem
+      v-if="!authStore.isAuthenticated"
       to="/users/sign-in"
     >
-      Sign In
-    </b-dropdown-item>
-    <b-dropdown-item
-      v-if="!isAuthenticated"
+      {{ t('bt.auth.sign_in') }}
+    </BDropdownItem>
+    <BDropdownItem
+      v-if="!authStore.isAuthenticated"
       to="/users/sign-up"
     >
-      Sign Up
-    </b-dropdown-item>
-    <b-dropdown-item
-      to="/"
-    >
-      Better Together
-    </b-dropdown-item>
-  </b-nav-item-dropdown>
+      {{ t('bt.auth.sign_up') }}
+    </BDropdownItem>
+    <BDropdownItem to="/">
+      {{ t('bt.app.name') }}
+    </BDropdownItem>
+  </BNavItemDropdown>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from 'vuex'
-import toaster from '../mixins/toaster'
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { BNavItemDropdown, BDropdownItem } from 'bootstrap-vue-next'
+import { useAuthStore } from '../stores/auth'
+import { usePeopleStore } from '../stores/people'
+import { useToaster } from '../composables/useToaster'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const peopleStore = usePeopleStore()
+const router = useRouter()
+const { toast } = useToaster()
 
-export default {
-  name: 'NavUser',
-  mixins: [toaster],
-  computed: {
-    ...mapState('CommunityEngine/Authentication', ['currentUser']),
-    ...mapGetters('CommunityEngine/Authentication', ['isAuthenticated']),
-    ...mapState('CommunityEngine/People', ['currentPerson']),
-    ...mapGetters('CommunityEngine/People', ['hasCurrentPerson']),
-    dropdownText() {
-      if (this.isAuthenticated) {
-        if (this.hasCurrentPerson) return this.currentPerson.name
-        return this.currentUser.email
-      }
+const dropdownText = computed(() => {
+  if (authStore.isAuthenticated) {
+    if (peopleStore.hasCurrentPerson) return peopleStore.currentPerson.name
+    return authStore.currentUser.email
+  }
+  return t('bt.auth.sign_in')
+})
 
-      return 'Sign In'
-    },
-  },
-  methods: {
-    ...mapActions('CommunityEngine/Authentication', ['signOut']),
-    signOutAction() {
-      this.signOut().then(() => {
-        if (this.$route.path !== '/') {
-          this.$router.push('/').then(() => {
-            this.$toaster('You are now signed out!', 'info')
-          })
-        } else {
-          this.$toaster('You are now signed out!', 'info')
-        }
-      })
-    },
-  },
+async function handleSignOut() {
+  await authStore.signOut()
+  peopleStore.clearCurrentPerson()
+  if (router.currentRoute.value.path !== '/') {
+    await router.push('/')
+  }
+  toast('You are now signed out!', 'info')
 }
 </script>
 
 <style scoped lang="scss">
-  @import '../stylesheets/theme.scss';
-
-  .user-dropdown {
-    ::v-deep a.dropdown-item {
-      font-weight: bold;
-      color: $default-text-color;
-      text-align: right;
+@import '../stylesheets/theme.scss';
 
-      &.router-link-exact-active,
-      &:hover {
-        color: $accent-color;
-      }
-    }
-
-    ::v-deep a.dropdown-toggle {
-      font-weight: bold;
-      color: $default-text-color-bg-dark;
-
-      &.router-link-exact-active,
-      &:hover {
-        color: $accent-color;
-      }
-
-      > span {
-        max-width: 75px;
-        display: inline-block;
-        overflow: clip;
-      }
-    }
+.user-dropdown {
+  :deep(a.dropdown-item) {
+    font-weight: bold;
+    color: $default-text-color;
+    text-align: right;
+    &.router-link-exact-active, &:hover { color: $accent-color; }
   }
+  :deep(a.dropdown-toggle) {
+    font-weight: bold;
+    color: $default-text-color-bg-dark;
+    &.router-link-exact-active, &:hover { color: $accent-color; }
+    > span { max-width: 75px; display: inline-block; overflow: clip; }
+  }
+}
 </style>

package/src/components/BtProfileForm.vue

@@ -1,45 +1,54 @@
 <template>
-  <vue-form-generator
-    tag="div"
-    :schema="schema"
-    :model="localModel"
-    rows="3"
-    max-rows="6"
-    :is-new-model="true"
-  />
+  <BForm @submit.prevent="handleSubmit">
+    <BFormGroup
+      :label="t('bt.person.name_label')"
+      label-for="profile-name"
+    >
+      <BFormInput
+        id="profile-name"
+        v-model="localModel.name"
+        type="text"
+        :placeholder="t('bt.person.name_label')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.person.description_label')"
+      label-for="profile-description"
+    >
+      <BFormTextarea
+        id="profile-description"
+        v-model="localModel.description"
+        rows="3"
+        :placeholder="t('bt.person.description_label')"
+      />
+    </BFormGroup>
+    <BButton
+      type="submit"
+      variant="primary"
+    >
+      {{ t('bt.actions.save') }}
+    </BButton>
+  </BForm>
 </template>
 
-<script>
-import VueFormGenerator from 'vue-form-generator'
-import BtProfileFormSchema from '../forms/BtProfileFormSchema'
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BForm, BFormGroup, BFormInput, BFormTextarea, BButton } from 'bootstrap-vue-next'
 
-export default {
-  name: 'BtProfileForm',
-  components: {
-    'vue-form-generator': VueFormGenerator.component,
-  },
-  props: {
-    model: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      schema: BtProfileFormSchema,
-      name: '',
-      description: '',
-    }
-  },
-  computed: {
-    localModel: {
-      get() { return this.model },
-      set(model) { this.$emit('input', model) },
-    },
-  },
-}
-</script>
+const { t } = useI18n()
+
+const props = defineProps({
+  model: { type: Object, required: true },
+})
+const emit = defineEmits(['update:model'])
 
-<style scoped lang="scss">
+const localModel = computed({
+  get: () => props.model,
+  set: (val) => emit('update:model', val),
+})
 
-</style>
+function handleSubmit() {
+  emit('update:model', localModel.value)
+}
+</script>

package/src/components/BtUserNewPasswordForm.vue

@@ -1,83 +1,61 @@
 <template>
-  <vue-form-generator
-    id="new-password-form"
-    tag="div"
-    :schema="schema"
-    :model="localModel"
-    rows="3"
-    max-rows="6"
-    @validated="onValidated"
-  />
+  <BForm @submit.prevent="handleSubmit">
+    <BFormGroup
+      :label="t('bt.auth.new_password')"
+      label-for="new-password"
+    >
+      <BFormInput
+        id="new-password"
+        v-model="password"
+        type="password"
+        required
+        minlength="12"
+        :placeholder="t('bt.auth.new_password')"
+      />
+      <BFormText>{{ t('bt.auth.password_hint') }}</BFormText>
+    </BFormGroup>
+    <BButton
+      type="submit"
+      variant="primary"
+      class="w-100"
+      :disabled="loading"
+    >
+      {{ t('bt.auth.change_password') }}
+    </BButton>
+  </BForm>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
-import VueFormGenerator from 'vue-form-generator'
-import BtUserNewPasswordFormSchema from '../forms/BtUserNewPasswordFormSchema'
-import toaster from '../mixins/toaster'
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { BForm, BFormGroup, BFormInput, BFormText, BButton } from 'bootstrap-vue-next'
+import { useAuthStore } from '../stores/auth'
+import { useToaster } from '../composables/useToaster'
 
-export default {
-  name: 'BtUserNewPasswordForm',
-  components: {
-    'vue-form-generator': VueFormGenerator.component,
-  },
-  mixins: [toaster],
-  props: {
-    model: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      schema: BtUserNewPasswordFormSchema,
-    }
-  },
-  computed: {
-    localModel: {
-      get() { return this.model },
-      set(model) { this.$emit('input', model) },
-    },
-  },
-  methods: {
-    ...mapActions('CommunityEngine/Authentication', ['newPassword']),
-    onValidated(isValid) {
-      if (isValid) {
-        this.newPassword(this.model).then(() => {
-          if (this.$route.path !== '/') {
-            this.$router.push('/users/sign-in').then(() => {
-              this.$toaster(
-                'You can now log in with your new password',
-                'success',
-                {
-                  title: 'Your password has been changed',
-                },
-              )
-            })
-          }
-        }).catch((response) => {
-          console.log(response)
-        })
-      }
-    },
-  },
-}
-</script>
+const { t } = useI18n()
 
-<style scoped lang="scss">
-@import 'bootstrap/scss/_functions.scss';
-@import 'bootstrap/scss/_variables.scss';
+const props = defineProps({
+  resetPasswordToken: { type: String, default: '' },
+})
 
-#new-password-form {
-  ::v-deep .help-block {
-    margin-top: 5px;
+const authStore = useAuthStore()
+const router = useRouter()
+const { toast } = useToaster()
+const loading = ref(false)
+const password = ref('')
 
-    &.errors {
-      color: theme-color('danger')
-    }
-  }
-  ::v-deep .hint {
-    margin-top: 5px;
+async function handleSubmit() {
+  loading.value = true
+  try {
+    await authStore.newPassword({ user: { reset_password_token: props.resetPasswordToken, password: password.value } })
+    await router.push('/users/sign-in')
+    toast('Password changed. You can now sign in.', 'success')
+  } catch (err) {
+    const msg = err?.response?.data?.error || 'Failed to change password.'
+    toast(msg, 'danger')
+  } finally {
+    loading.value = false
   }
 }
-</style>
+</script>