Add box and layout for card adding, finish password resetting.

src/stores/api/account.js

@@ -38,3 +38,21 @@ export async function APIResetPassword(key, newPassword, confirmPassword) {
     throw error;
   }
 }
+
+export async function APIUpdatePassword(
+  currentPassword,
+  newPassword,
+  confirmPassword
+) {
+  try {
+    const data = await mainStore.callApi(`/user/updatePassword`, "POST", {
+      currentPassword: currentPassword,
+      newPassword: newPassword,
+      confirmPassword: confirmPassword,
+    });
+    return data;
+  } catch (error) {
+    console.log("Error updating password:", error);
+    throw error;
+  }
+}

src/stores/main.js

@@ -122,6 +122,12 @@ export const useMainStore = defineStore("main", {
           this.isLoading = true;
           return null;
         }
+        if (response.data.status === "warn") {
+          alert(response.data.error_code);
+          this.isSaving = false;
+          this.isLoading = false;
+          return null;
+        }
         this.isLoading = false; // reset flags
         this.isSaving = false;
         return response.data;

src/views/Profile/CardsView.vue

@@ -1,10 +1,17 @@
 <script setup>
-import { ref, onMounted } from "vue";
-import { mdiCardAccountDetailsOutline } from "@mdi/js";
+import { ref, onMounted, reactive } from "vue";
+import {
+  mdiCardAccountDetailsOutline,
+  mdiCreditCardPlusOutline,
+  mdiCreditCardEditOutline,
+} from "@mdi/js";
 import { dashCode } from "@/constants/userData.js";
 import SectionMain from "@/components/SectionMain.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import UserCard from "@/components/UserCard.vue";
+import CardBox from "@/components/CardBox.vue";
+import FormField from "@/components/FormField.vue";
+import FormControl from "@/components/FormControl.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 
@@ -12,6 +19,10 @@ import { useMainStore } from "@/stores/main";
 const mainStore = useMainStore();
 var cardData = ref([]);
 
+const cardForm = reactive({
+  newCard: null,
+});
+
 onMounted(async () => {
   try {
     const data = await mainStore.getCards();
@@ -37,6 +48,40 @@ const copyToClipboard = (text) => {
   <LayoutAuthenticated>
     <SectionMain>
       <UserCard class="mb-6" use-small even-smaller />
+
+      <SectionTitleLine
+        :icon="mdiCreditCardPlusOutline"
+        title="Register Card"
+        main
+      />
+      <CardBox is-form class="row-span-2 mb-6">
+        <FormField
+          label="Card ID"
+          help="The 16 character ACCESS CODE. If your card is dated after 2016, you'll need to get the ACCESS CODE from a game."
+        >
+          <FormControl
+            v-model="cardForm.newCard"
+            :icon="mdiCreditCardEditOutline"
+            name="cardId"
+            type="card"
+            placeholder="XXXX-XXXX-XXXX-XXXX"
+            minlength="16"
+            maxlength="19"
+            required
+          />
+        </FormField>
+
+        <template #footer>
+          <BaseButton type="submit" color="success" label="Add Card" />
+          <BaseIcon
+            v-if="passwordLoading"
+            :path="mdiLoading"
+            color="text-yellow-500"
+            class="animate animate-spin"
+          />
+        </template>
+      </CardBox>
+
       <div class="grid md:grid-cols-2 mb-2">
         <SectionTitleLine
           :icon="mdiCardAccountDetailsOutline"

src/views/Profile/ProfileView.vue

@@ -2,6 +2,7 @@
 import { reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useMainStore } from "@/stores/main";
+import { APIUpdatePassword } from "@/stores/api/account";
 import { mdiAccount, mdiMail, mdiAsterisk, mdiLoading } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import CardBox from "@/components/CardBox.vue";
@@ -31,9 +32,9 @@ const profileForm = reactive({
 });
 
 const passwordForm = reactive({
-  password_current: "",
-  password: "",
-  password_confirmation: "",
+  currentPassword: "",
+  newPassword: "",
+  confirmPassword: "",
 });
 
 const profileLoading = ref(false);
@@ -57,17 +58,28 @@ watch(
 
 async function submitProfile() {
   profileLoading.value = true;
-  const saveStatus = await mainStore.putUser(profileForm);
-  if (saveStatus.status == "success") {
+  const response = await mainStore.putUser(profileForm);
+  if (response.status == "success") {
     profileLoading.value = false;
     await mainStore.loadUser();
     $router.go();
   }
 }
 
-const submitPass = () => {
-  //
-};
+async function submitPassword() {
+  passwordLoading.value = true;
+  const response = await APIUpdatePassword(
+    passwordForm.currentPassword,
+    passwordForm.newPassword,
+    passwordForm.confirmPassword
+  );
+  if (response.status == "success") {
+    alert("Password changed.");
+    passwordLoading.value = false;
+    await mainStore.loadUser();
+    $router.go();
+  }
+}
 
 function pinInput(event) {
   event.target.value = event.target.value.replace(/\D/g, "");
@@ -142,34 +154,34 @@ function userChanged(oldProfile, newProfile) {
           </template>
         </CardBox>
 
-        <CardBox is-form class="row-span-2" @submit.prevent="submitPass">
+        <CardBox is-form class="row-span-2" @submit.prevent="submitPassword()">
           <PillTag color="info" label="Change Password" class="mb-2" />
-          <FormField label="Current password">
+          <FormField label="Current Password">
             <FormControl
-              v-model="passwordForm.password_current"
+              v-model="passwordForm.currentPassword"
               :icon="mdiAsterisk"
-              name="password_current"
+              name="currentPassword"
               type="password"
               required
             />
           </FormField>
           <BaseDivider />
 
-          <FormField label="New password">
+          <FormField label="New Password">
             <FormControl
-              v-model="passwordForm.password"
+              v-model="passwordForm.newPassword"
               :icon="mdiAsterisk"
-              name="password"
+              name="newPassword"
               type="password"
               required
             />
           </FormField>
 
-          <FormField label="Confirm password">
+          <FormField label="Confirm Password">
             <FormControl
-              v-model="passwordForm.password_confirmation"
+              v-model="passwordForm.confirmPassword"
               :icon="mdiAsterisk"
-              name="password_confirmation"
+              name="confirmPassword"
               type="password"
               required
             />