Voting initials

src/api/voting.js

@@ -1,10 +1,41 @@
 import routes from "./routes";
 import request from "./request";
 
+function lastInitial(item) {
+  if (item.lastName) {
+    return item.lastName[0];
+  }
+
+  const split = item.username.split(" ");
+  return split.length >= 2 ? split[1] : "";
+}
+
+function firstInitial(item) {
+  if (item.firstName) {
+    return item.firstName[0];
+  }
+  if (item.display) {
+    return item.display[0];
+  }
+
+  return item.username.split(" ")[0];
+}
+
+function initials(item) {
+  return `${firstInitial(item)}${lastInitial(item)}`;
+}
+
 async function getBallot(page, per) {
-  return request(routes.voting_ballot, {
+  const result = await request(routes.voting_ballot, {
     params: { page, per }
   });
+
+  if (result.items) {
+    result.items = result.items.map(item => {
+      return { ...item, ...{ initials: initials(item) } };
+    });
+  }
+  return result;
 }
 
 async function cast(answerId, email) {

src/components/QuizNeedHelp.vue

@@ -37,11 +37,13 @@ export default {
       icons: [
         {
           icon: "twitter",
-          to: "https://twitter.com/intent/tweet?text=The%20Dragon%20Quest%20%E2%80%93%20Code%20Challenge&url=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&original_referer="
+          to:
+            "https://twitter.com/intent/tweet?text=The%20Dragon%20Quest%20%E2%80%93%20Code%20Challenge&url=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&original_referer="
         },
         {
           icon: "facebook",
-          to: "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&src=sdkpreparse"
+          to:
+            "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcodewizardshq.com%2Fchallenge%2F&src=sdkpreparse"
         },
         {
           icon: "linkedin",

src/components/Toolbars/QuizBar.vue

@@ -66,9 +66,9 @@
 </template>
 
 <script>
-  import {Quiz, User} from "@/store";
+import { Quiz, User } from "@/store";
 
-  export default {
+export default {
   name: "quizBar",
   computed: {
     ...User.mapState(),

src/plugins/router.js

@@ -82,7 +82,7 @@ const routes = [
         path: "create-account",
         name: "register",
         component: () => import("@/views/Accounts/Register"),
-        meta: { anon: true }
+        meta: { anon: true, challengeOpenOrPending: true }
       },
       {
         path: "logout",
@@ -197,7 +197,6 @@ router.beforeEach(async (to, from, next) => {
   const requireChallengeOpenPending = to.matched.some(
     record => record.meta.challengeOpenOrPending
   );
-
   if (
     requireChallengePending ||
     requireChallengeOpen ||

src/views/Quiz/QuizCountdown.vue

@@ -54,11 +54,11 @@
 </template>
 
 <script>
-  import QuizNeedHelp from "@/components/QuizNeedHelp";
-  import QuizScroll from "@/components/QuizScroll";
-  import {Quiz, User} from "@/store";
+import QuizNeedHelp from "@/components/QuizNeedHelp";
+import QuizScroll from "@/components/QuizScroll";
+import { Quiz, User } from "@/store";
 
-  export default {
+export default {
   name: "quiz",
   components: {
     QuizScroll,

src/views/Voting/Ballot.vue

@@ -76,7 +76,6 @@ export default {
         for (const [key, value] of Object.entries(results)) {
           Vue.set(this, key, value);
         }
-        // console.log(results);
       } catch (err) {
         this.$router.push({ name: "redirect" });
       }

src/views/Voting/BallotCard.vue

@@ -6,7 +6,7 @@
     @click="$emit('click')"
   >
     <div class="circle">
-      KA
+      {{ initials }}
     </div>
     <div class="vote-count">
       {{ numVotes }} {{ numVotes.length == 1 ? "vote" : "votes" }}
@@ -27,7 +27,8 @@ export default {
     "numVotes",
     "text",
     "username",
-    "value"
+    "value",
+    "initials"
   ]
 };
 </script>

src/views/Voting/CodeModal.vue

@@ -11,7 +11,7 @@
         <v-row class="main-row" no-gutters>
           <v-col cols="3" sm="12" md="3" class="left">
             <div class="circle">
-              KA
+              {{ initials }}
             </div>
             <hr />
             <v-form lazy-validation @submit.prevent="submit">
@@ -22,14 +22,15 @@
                 v-bind="fields.email"
                 v-model="fields.email.value"
                 :disabled="isSubmitting"
+                v-if="!User.isAuthorized"
               />
               <v-btn
                 block
                 tile
                 color="cwhqBlue"
                 type="submit"
                 :disabled="isSubmitting"
-                >Confirm</v-btn
+                >Confirm Vote</v-btn
               >
 
               <v-row no-gutters class="icons" justify="center">
@@ -76,6 +77,7 @@
 <script>
 import * as api from "@/api";
 import SuccessModal from "./SuccessModal";
+import { User } from "@/store";
 
 export default {
   components: {
@@ -98,6 +100,9 @@ export default {
       }
     };
   },
+  computed: {
+    ...User.mapState()
+  },
   props: [
     "display",
     "firstName",
@@ -106,7 +111,8 @@ export default {
     "numVotes",
     "text",
     "username",
-    "value"
+    "value",
+    "initials"
   ],
   watch: {
     isOpen() {
@@ -126,7 +132,7 @@ export default {
         return;
       }
       this.isSubmitting = true;
-      if (!this.fields.email.value) {
+      if (!this.fields.email.value && !this.User.isAuthorized) {
         this.errorMessage = "You forgot to tell us your email";
         this.showError = true;
         this.isSubmitting = false;

src/views/Voting/SuccessModal.vue

@@ -6,12 +6,22 @@
         <v-btn icon x-large @click="show = false">X</v-btn></v-card-title
       >
 
-      <h3>ALMOST DONE</h3>
+      <div v-if="User.isAuthorized">
+        <h3>SUCCESS!</h3>
 
-      <p>
-        Your vote has been cast! In order for your vote to count you must first
-        confirm your it. Please check your inbox for the confirmation email.
-      </p>
+        <p style="text-align:center">
+          Your vote has been cast!
+        </p>
+      </div>
+      <div v-else>
+        <h3>ALMOST DONE</h3>
+
+        <p>
+          Your vote has been cast! In order for your vote to count you must
+          first confirm your it. Please check your inbox for the confirmation
+          email.
+        </p>
+      </div>
       <hr />
       <h4>
         Share this code with your friends!
@@ -34,8 +44,12 @@
 </template>
 
 <script>
+import { User } from "@/store";
 export default {
   props: ["value"],
+  computed: {
+    ...User.mapState()
+  },
   watch: {
     show() {
       if (this.show != this.value) {