Profile.vue

<template>
  <div
    id="page-content-wrapper"
    class="flex flex-wrap justify-center"
  >
    <base-toaster
      :open="toasterIsOpen"
      @close="hideDialog"
    >
      <div class="flex justify-between space-x-4 items-center">
        <font-awesome-icon
          class="ml-3"
          icon="fa-solid fa-thumbs-up "
          size="lg"
        />

        <h4>{{toasterMessage}}</h4>
        <button
          class="btn btn-outline"
          @click="hideDialog"
        >
          <font-awesome-icon
            icon="fa-regular fa-circle-xmark"
            size="2x"
          />
        </button>
      </div>
    </base-toaster>
    <div class="w-5/6">
      <fetch-profile
        v-if="userData !== null"
        :key="updatedKey"
      >
        <template slot-scope="{ response, loading, error: profile_error }">
          <slot
            :response="response"
            :loading="loading"
            :error="profile_error"
          >
            <div v-if="loading">
              <base-spinner />
            </div>
            <div v-else-if="!loading && profile_error">
              <p class="text-red-500 text-2xl">
                {{ response }}
              </p>
            </div>
            <div v-else>
              <!--            {{response}}-->
              <h2 class="round font-bold">
                User Profile
              </h2>
              <div class="panel panel-default">
                <div class="panel-body">
                  <div class="container-fluid col-md-12">
                    <div class="row">
                      <div class="text col-sm-3">
                        User ID
                      </div>
                      <div class="col-sm-9">
                        <div class="flex justify-between">
                          <b>{{ response.username }}</b>
                          <div class="relative">
                            <button
                              class="
                                text-white
                                bg-blue-500
                                hover:bg-blue-700
                                focus:ring-2 focus:ring-blue-300
                                rounded-lg
                                items-center
                                px-5
                                py-3
                                text-center
                                font-bold
                                mr-2
                                font-bold
                              "
                              @click="isOpen = !isOpen"
                            >
                              Edit
                              <font-awesome-icon
                                class="ml-2"
                                icon="fa-solid fa-user-pen"
                              />
                            </button>
                            <button
                              v-if="isOpen"
                              tabindex="-1"
                              class="fixed inset-0 cursor-default h-full w-full"
                              @click="isOpen = false"
                            />
                            <div
                              v-if="isOpen"
                              class="
                                absolute
                                mt-2
                                z-50
                                grid grid-cols-1
                                right-0
                                bg-black
                                min-w-max
                                rounded-lg
                                shadow-lg
                                border border-gray-200
                                divide-y divide-white-base
                              "
                            >
                              <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
                              <a
                                class="
                                  px-4
                                  py-4
                                  rounded-lg
                                  text-2xl text-white-base
                                  hover:text-pink-base hover:no-underline
                                "
                                @click="openScientificDisciplineEdit"
                              >Scientific Discipline</a>
                              <a
                                class="
                                  px-4
                                  py-4
                                  rounded-lg
                                  text-2xl text-white-base
                                  hover:text-pink-base hover:no-underline
                                "
                                @click="openProfileLinkEdit"
                              >Profile Link</a>
                              <a
                                class="
                                  px-4
                                  py-4
                                  rounded-lg
                                  text-2xl text-white-base
                                  hover:text-pink-base hover:no-underline
                                "
                                @click="openChangePassword"
                              >Password</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Full Name
                      </div>
                      <div class="col-sm-9">
                        <b>{{ response.full_name }}</b>
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Email
                      </div>
                      <div class="col-sm-9">
                        {{ response.email }}
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Role
                      </div>
                      <div class="col-sm-9">
                        {{ setRole(response.role.name) }}
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Current role
                      </div>
                      <div class="col-sm-9">
                        <div>
                          {{ response.current_role.replace(/_/g, " ") }}
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Scientific Discipline
                      </div>
                      <div class="col-sm-9">
                        <div>
                          {{ response.scientific_discipline.join(", ") }}
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Motivation
                      </div>
                      <div class="col-sm-9">
                        <p>
                          {{ response.motivation_text }}
                        </p>
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Affiliation
                      </div>
                      <div class="col-sm-9">
                        <div>
                          {{ response.current_affiliation }}
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Profile Link
                      </div>
                      <div class="col-sm-9">
                        <a
                          :href="response.profile_link"
                          target="_blank"
                        >
                          {{ response.profile_link }}
                        </a>
                      </div>
                    </div>

                    <div class="row">
                      <div class="text col-sm-3">
                        Joined
                      </div>
                      <div class="col-sm-9">
                        {{ response.createdAt }}
                      </div>
                    </div>
                    <div class="row">
                      <div class="text col-sm-3">
                        Updated
                      </div>
                      <div class="col-sm-9">
                        {{ response.updatedAt }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                v-if="editMode"
                class="panel panel-default"
              >
                <div class="panel-body">
                  <div class="container-fluid col-md-12">
                    <div v-if="showEditScientificDis">
                      <h3 class="mb-6 border-b">
                        Update Scientific Discipline
                      </h3>
                      <div class="row">
                        <div class="text col-sm-3 p-4">
                          Scientific Discipline
                        </div>
                        <div class="col-sm-9 p-4">
                          <div
                            v-for="options in scientificDisciplineOptions"
                            :key="options.id"
                          >
                            <input
                              :id="options.id"
                              v-model="selected"
                              type="checkbox"
                              class="h-6 w-6"
                              :name="options"
                              :value="options.discipline"
                            >
                            <label
                              class="mx-3"
                              :for="options.id"
                            >{{
                              options.discipline
                            }}</label>
                          </div>

                          <p
                            v-if="profile_error && scientificErrMsg"
                            class="text-red-500 font-bold mt-2"
                          >
                            {{ scientificErrMsg }}
                          </p>
                        </div>
                      </div>
                    </div>
                    <div v-if="showEditProfileLink">
                      <h3 class="mb-6 border-b">
                        Change Profile Link
                      </h3>
                      <div class="row">
                        <div class="text col-sm-3 p-4">
                          Profile Link
                        </div>

                        <div class="col-sm-9 p-4">
                          <input
                            id="inline-profile-link"
                            v-model.trim="profile_link"
                            class="
                              bg-white
                              w-1/3
                              py-4
                              px-4
                              rounded-lg
                              text-gray-700
                              bg-transparent
                              border border-gray-500
                              hover:border-gray-700
                            "
                            type="text"
                            placeholder="Enter profile link."
                          >
                          <p
                            v-if="profile_error && profileLinkErrMsg"
                            class="text-red-500 font-bold mt-2"
                          >
                            {{ profileLinkErrMsg }}
                          </p>
                        </div>
                      </div>
                    </div>
                    <div v-if="showChangePassword">
                      <h3 class="mb-6 border-b">
                        Change Password
                      </h3>
                      <div class="row">
                        <div class="text col-sm-3 p-4">
                          Current password
                        </div>
                        <div class="col-sm-9 p-4">
                          <input
                            id="current-password"
                            v-model.trim="currentPassword"
                            class="
                              bg-white
                              w-1/3
                              py-4
                              px-4
                              rounded-lg
                              text-gray-700
                              bg-transparent
                              border border-gray-500
                              hover:border-gray-700
                            "
                            type="password"
                          >
                        </div>
                      </div>
                      <div class="row">
                        <div class="text col-sm-3 p-4">
                          New Password
                        </div>
                        <div class="col-sm-9 p-4">
                          <input
                            id="inline-password"
                            v-model.trim="newPassword"
                            class="
                              bg-white
                              w-1/3
                              py-4
                              px-4
                              rounded-lg
                              text-gray-700
                              bg-transparent
                              border border-gray-500
                              hover:border-gray-700
                            "
                            type="password"
                          >
                        </div>
                      </div>
                      <div class="row">
                        <div class="text col-sm-3 p-4">
                          Confirm New Password
                        </div>
                        <div class="col-sm-9 p-4">
                          <input
                            id="confirm-password"
                            v-model.trim="confirmPassword"
                            class="
                              bg-white
                              w-1/3
                              py-4
                              px-4
                              rounded-lg
                              text-gray-700
                              bg-transparent
                              border border-gray-500
                              hover:border-gray-700
                            "
                            type="password"
                          >
                          <p
                            v-if="profile_error && passwordErrMsg"
                            class="text-red-500 font-bold mt-2"
                          >
                            {{ passwordErrMsg }}
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="flex space-x-4 mt-2">
                      <button
                        class="
                          bg-blue-500
                          text-xl
                          font-bold
                          rounded-lg
                          px-5
                          py-4
                          text-white
                          hover:bg-blue-700
                        "
                        @click="update(response)"
                      >
                        Update Profile
                      </button>
                      <button
                        class="
                          bg-gray-500
                          text-xl
                          font-bold
                          rounded-lg
                          px-5
                          py-4
                          text-white
                          hover:bg-gray-700
                        "
                        @click="close"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
                <p
                  v-if="profile_error && errorMsg"
                  class="text-red-500 font-bold mt-2"
                >
                  {{ errorMsg }}
                </p>
              </div>

              <!-- <button v-if="userData !== null && (getRole === 'Contributor' || getRole === 'Maintainer')"
                    class="btn btn-primary" @click="$router.push('/updateitem/new')">
              Create new Update Item
            </button> -->
            </div>
          </slot>
        </template>
      </fetch-profile>

      <fetch-users v-if="getRole === 'Administrator'" :key="'users-' + updatedUsersKey">
        <template slot-scope="{ response, loading }">
          <slot
            :response="response"
            :loading="loading"
          >
            <div v-if="loading || response === null" />
            <div v-else>
              <h4 class="round">
                User List
              </h4>
              <user-table
                id="usersTable"
                :data="response"
                @approve="approve"
              />
            </div>
          </slot>
        </template>
      </fetch-users>
    </div>
  </div>
</template>

<script>
import FetchProfile from '@/components/CMS/fetchProfile';
import FetchUpdateItems from '@/components/CMS/fetchUpdateItems';
import FetchUsers from '@/components/CMS/fetchUsers';
import UserTable from '../components/UserTable.vue';
import BaseSpinner from '../components/UI/BaseSpinner.vue';
import BaseToaster from '../components/UI/BaseToaster.vue';

const _ = require('lodash');
let host = require('@/components/js/const').apiHost;

export default {
  name: 'ProfilePage',
  components: {
    FetchProfile,
    UserTable,
    FetchUsers,
    BaseSpinner,
    BaseToaster,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      user: '',
      motivation_text: '',
      current_role: '',
      scientific_discipline: [],
      current_affiliation: '',
      profile_link: '',
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
      isDev: process.env.NODE_ENV === 'development',
      editMode: false,
      toasterIsOpen: false,
      toasterMessage: 'Profile update successful!',
      error: false,
      scientificDisciplineOptions: [
        { id: '1', discipline: 'Physics' },
        { id: '2', discipline: 'Chemistry' },
        { id: '3', discipline: 'Biology' },
        { id: '4', discipline: 'Computer Science' },
        { id: '5', discipline: 'Mathematics' },
      ],
      selected: [],
      isOpen: false,
      showEditScientificDis: false,
      showEditProfileLink: false,
      showChangePassword: false,
      scientificErrMsg: '',
      profileLinkErrMsg: '',
      passwordErrMsg: '',
      errorMsg: '',
      updatedKey: 0,
      updatedUsersKey: 0,
    };
  },
  computed: {
    jwt: function () {
      return this.$store.getters['User/jwt'];
    },
    userData: function () {
      return this.$store.getters['User/userData'];
    },
    getRole: function () {
      return this.$store.getters['User/userRole'];
    },
  },
  mounted: function () {
    const vm = this;

    if (vm.userData === null) {
      this.$router.push('/login');
    } else {
      vm.user = vm.userData.id;
      vm.current_role = vm.userData.current_role;
      vm.scientific_discipline = vm.userData.scientific_discipline;
      if (vm.scientific_discipline === null) {
        vm.scientific_discipline = [];
      }
    }
  },
  methods: {
    close() {
      this.editMode = false;
      this.showEditScientificDis = false;
      this.showEditProfileLink = false;
      this.showChangePassword = false;
      this.error = false;
      this.scientificErrMsg = '';
      this.profileLinkErrMsg = '';
      this.passwordErrMsg = '';
      this.selected = [];
      this.profile_link = '';
      this.password = '';
    },
    openScientificDisciplineEdit() {
      this.editMode = true;
      this.showEditScientificDis = true;
      this.showEditProfileLink = false;
      this.showChangePassword = false;
    },
    openProfileLinkEdit() {
      this.editMode = true;
      this.showEditScientificDis = false;
      this.showEditProfileLink = true;
      this.showChangePassword = false;
    },
    openChangePassword() {
      this.editMode = true;
      this.showEditScientificDis = false;
      this.showEditProfileLink = false;
      this.showChangePassword = true;
    },
    showDialog() {
      this.toasterMessage = 'Profile update successful!';
      this.toasterIsOpen = true;
    },
    hideDialog() {
      this.toasterIsOpen = false;
    },
    showEditMode() {
      this.editMode = true;
    },
    setRole(roleName) {
      //console.log("role name is,", roleName);
      const vm = this;
      window.localStorage.setItem('roleName', roleName);
      vm.$store.dispatch('User/setUserRole', roleName);
      return roleName;
    },
    async update(e) {
      // console.log("user data", e);
      const vm = this;

      if (vm.isDev) {
        host = require('@/components/js/const').devApiHost;
      }

      const jwt = vm.jwt;
      if (jwt === null) {
        vm.loaded = false;
        return;
      }
      vm.user = e.id;
      let dat;
      if (this.showEditScientificDis) {
        if (this.selected.length === 0) {
          this.error = true;
          this.scientificErrMsg = 'Please select at least one discipline.';
          return;
        }
        dat = {
          id: vm.user,
          scientific_discipline: vm.selected,
        };
      } else if (this.showEditProfileLink) {
        if (!this.profile_link) {
          this.error = true;
          this.profileLinkErrMsg = 'Please enter your profile link.';
          return;
        }
        dat = {
          id: vm.user,
          profile_link: vm.profile_link,
        };
      } else if (this.showChangePassword) {
        if (!this.currentPassword) {
          this.error = true;
          this.passwordErrMsg = 'Please enter the current password.';
          return;
        }
        if (!this.newPassword) {
          this.error = true;
          this.passwordErrMsg = 'Please enter new password.';
          return;
        }
        if (!this.confirmPassword) {
          this.error = true;
          this.passwordErrMsg = 'Please enter new password again.';
          return;
        }

        dat = {
          identifier: vm.user,
          password: vm.currentPassword,
          newPassword: vm.newPassword,
          confirmPassword: vm.confirmPassword,
        };
      }
      this.error = false;
      this.scientificErrMsg = '';
      this.profileLinkErrMsg = '';
      this.passwordErrMsg = '';
      // let dat = {
      //   id: vm.user,
      //   profile_link: vm.profile_link,
      //   scientific_discipline: vm.selected,
      //   password: vm.password,
      // };
      // console.log(dat);

      try {
        let res;
        if (this.showChangePassword) {
          res = await this.axios.post(`${host}/api/password`, dat, {
            headers: {
              Authorization: `Bearer ${jwt}`,
            },
          });
          // console.log(res.data);
          const newJwt = res.data.jwt;
          window.localStorage.setItem('jwt', newJwt);
          this.$store.dispatch('User/setJwt', newJwt);
        } else {
          res = await this.axios.put(`${host}/api/users/${vm.user}`, dat, {
            headers: {
              Authorization: `Bearer ${jwt}`,
            },
          });
        }

        // console.log(res.data);
        this.error = false;
        this.toasterMessage = 'Profile update successful!';
        this.toasterIsOpen = true;
        this.editMode = false;
        this.isOpen = false;
        setTimeout(() => {
          this.toasterIsOpen = false;
        }, 2000);
        this.selected = [];
        this.profile_link = '';
        this.password = '';
        this.updatedKey += 1;
      } catch (error) {
        // console.log(error.response.data.error.message)
        // console.log(error.response)
        this.error = true;
        this.errorMsg = error;
      }
    },
    async approve(e) {
      const vm = this

      try {
        vm.user = e.id;

        if (vm.isDev) {
          host = require('@/components/js/const').devApiHost;
        }

        let jwt = vm.jwt;
        if (jwt === null) {
          vm.loaded = false;
          return;
        }

        const dat = {
          id: vm.user,
          role: 3,  // Make the user contributor
        };

        let res = await this.axios.put(`${host}/api/users/${vm.user}`, dat, {
          headers: {
            Authorization: `Bearer ${jwt}`,
          },
        });

        jwt = require('@/components/js/const').wikiApikey;

        const query = `mutation User {
            users {
              create (email: "${e.email}",
                name: "${e.full_name}",
                passwordRaw: "welcome2cdcode",
                providerKey: "local",
                groups: 3,
                mustChangePassword: true,
                sendWelcomeEmail: true) {
              responseResult {
                succeeded,
                errorCode,
                slug,
                message
              },
              user {
                email,
                name
                }
              }
            }
          }`

        res = await this.axios.post(`https://wiki.cd-code.org/graphql`, { query }, {
          headers: {
            Authorization: `Bearer ${jwt}`,
          },
        });

        vm.error = false;
        vm.toasterMessage = 'Approved and a welcome email sent!';
        vm.toasterIsOpen = true;
        setTimeout(() => {
          vm.toasterIsOpen = false;
        }, 2000);

        vm.updatedUsersKey += 1;
      } catch (error) {
        this.error = true;
        this.errorMsg = error;
      }
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("~@/assets/bootstrap.css");

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

/* a {
  color: #ef0087 !important;
} */

.panel {
  font-size: 1.2rem;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
}
</style>