<commit_before><template>
  <div class="container">
    <h1 class="title">Your Profile</h1>
    <h3 class="subtitle">View and make changes to your profile</h3>
    <div class="columns">
      <div class="column is-3">
        <aside class="menu">
          <p class="menu-label">Jump to a section</p>
          <ul class="menu-list">
            <li>
              <a href="#general-profile"
                 @click="showDisplay()">My Profile</a>
            </li>
            <li>
              <a href="#coordinator-details"
                 @click="showDisplay()">Details</a>
            </li>
          </ul>
          <p class="menu-label">Make changes to your account</p>
          <ul class="menu-list">
            <li>
              <a @click="toggleEdit()">
                {{ state === 'editProfile' ? 'Cancel Edits' : 'Edit Profile' }}
              </a>
            </li>
            <li>
              <a @click="toggleEditPassword()">
                {{ state === 'editPassword' ? 'Cancel Password Change' : 'Change Password' }}
              </a>
            </li>
            <li>
              <a @click="toggleDeleteAccount()">
                {{ state === 'deleteAccount' ? 'Don\'t Delete' : 'Delete My Account' }}
              </a>
            </li>
          </ul>
        </aside>
      </div>
      <div class="column">
        <div v-if="state === 'display'">
          <general-profile id="general-profile"
                           class="general-profile" :profile="profile"></general-profile>
          <coordinator-detail v-if="profile.role === 'coordinator' "
                              id="coordinator-details"></coordinator-detail>
        </div>
        <div v-if="state === 'editProfile'">
          <edit-profile :profile="profile"
                        @toggle="toggleEdit()"></edit-profile>
        </div>
        <div v-if="state === 'editPassword'">
          <edit-password :id="profile.id"
                        @toggle="toggleEditPassword()"></edit-password>
        </div>
        <div v-if="state === 'deleteAccount'">
          <delete-account :firstname="profile.firstname"
                          :lastname="profile.lastname"
                          :role="profile.role"
                          :id="profile.id"
                          @toggle="toggleDeleteAccount()"></delete-account>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

import General from './General.vue';
import Coordinator from './Coordinator.vue';
import Edit from './Edit.vue';
import EditPassword from './EditPassword.vue';
import Delete from './Delete.vue';

export default {
  data () {
    return {
      state: 'display'
    }
  },
  computed: {
    ...mapGetters([
      'profile'
    ])
  },
  methods: {
    toggleEdit() {
      switch (this.state) {
        case 'editProfile':
          this.state = 'display';
          break;
        default:
          this.state = 'editProfile';
          break;
      }
    },
    toggleEditPassword() {
      switch (this.state) {
        case 'editPassword':
          this.state = 'display';
          break;
        default:
          this.state = 'editPassword';
          break;
      }
    },
    toggleDeleteAccount() {
      switch (this.state) {
        case 'deleteAccount':
          this.state = 'display';
          break;
        default:
          this.state = 'deleteAccount';
          break;
      }
    },
    showDisplay() {
      this.state = 'display';
    }
  },
  components: {
    'coordinator-detail': Coordinator,
    'general-profile': General,
    'edit-profile': Edit,
    'edit-password': EditPassword,
    'delete-account': Delete
  },
  beforeRouteEnter(to, from, next) {
    if (!localStorage.getItem('token')) {
      next((vm) => vm.$router.push('/'));
    }
    next();
  }
}
</script><commit_msg>Removed profile detail link<commit_after><template>
  <div class="container">
    <h1 class="title">Your Profile</h1>
    <h3 class="subtitle">View and make changes to your profile</h3>
    <div class="columns">
      <div class="column is-3">
        <aside class="menu">
          <p class="menu-label">Jump to a section</p>
          <ul class="menu-list">
            <li>
              <a href="#general-profile"
                 @click="showDisplay()">My Profile</a>
            </li>
          </ul>
          <p class="menu-label">Make changes to your account</p>
          <ul class="menu-list">
            <li>
              <a @click="toggleEdit()">
                {{ state === 'editProfile' ? 'Cancel Edits' : 'Edit Profile' }}
              </a>
            </li>
            <li>
              <a @click="toggleEditPassword()">
                {{ state === 'editPassword' ? 'Cancel Password Change' : 'Change Password' }}
              </a>
            </li>
            <li>
              <a @click="toggleDeleteAccount()">
                {{ state === 'deleteAccount' ? 'Don\'t Delete' : 'Delete My Account' }}
              </a>
            </li>
          </ul>
        </aside>
      </div>
      <div class="column">
        <div v-if="state === 'display'">
          <general-profile id="general-profile"
                           class="general-profile"
                           :profile="profile"></general-profile>
        </div>
        <div v-if="state === 'editProfile'">
          <edit-profile :profile="profile"
                        @toggle="toggleEdit()"></edit-profile>
        </div>
        <div v-if="state === 'editPassword'">
          <edit-password :id="profile.id"
                         @toggle="toggleEditPassword()"></edit-password>
        </div>
        <div v-if="state === 'deleteAccount'">
          <delete-account :firstname="profile.firstname"
                          :lastname="profile.lastname"
                          :role="profile.role"
                          :id="profile.id"
                          @toggle="toggleDeleteAccount()"></delete-account>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

import General from './General.vue';
import Edit from './Edit.vue';
import EditPassword from './EditPassword.vue';
import Delete from './Delete.vue';

export default {
  data () {
    return {
      state: 'display'
    }
  },
  computed: {
    ...mapGetters([
      'profile'
    ])
  },
  methods: {
    toggleEdit () {
      switch (this.state) {
        case 'editProfile':
          this.state = 'display';
          break;
        default:
          this.state = 'editProfile';
          break;
      }
    },
    toggleEditPassword () {
      switch (this.state) {
        case 'editPassword':
          this.state = 'display';
          break;
        default:
          this.state = 'editPassword';
          break;
      }
    },
    toggleDeleteAccount () {
      switch (this.state) {
        case 'deleteAccount':
          this.state = 'display';
          break;
        default:
          this.state = 'deleteAccount';
          break;
      }
    },
    showDisplay () {
      this.state = 'display';
    }
  },
  components: {
    'general-profile': General,
    'edit-profile': Edit,
    'edit-password': EditPassword,
    'delete-account': Delete
  },
  beforeRouteEnter (to, from, next) {
    if (!localStorage.getItem('token')) {
      next((vm) => vm.$router.push('/'));
    }
    next();
  }
}
</script>
{'fraction_non_alphanumeric': 0.15969325978743443, 'fraction_numerical': 0.0013453518094981838, 'mean_word_length': 1.6047652417659426, 'pattern_counts': {'":': 0, '<': 125, '<?xml version=': 0, '>': 127, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3856947', 'n_tokens_mistral': 2106, 'n_tokens_neox': 2076, 'n_words': 432}