wg-portal/frontend/src/views/SettingsView.vue

<script setup>
import {computed, onMounted, ref} from "vue";
import { profileStore } from "@/stores/profile";
import { settingsStore } from "@/stores/settings";
import { authStore } from "../stores/auth";
import {notify} from "@kyvg/vue3-notification";

const profile = profileStore()
const settings = settingsStore()
const auth = authStore()

onMounted(async () => {
  await profile.LoadUser()
  await auth.LoadWebAuthnCredentials()
})

const selectedCredential = ref({})

function enableRename(credential) {
  credential.renameMode = true;
  credential.tempName = credential.Name; // Store the original name
}

function cancelRename(credential) {
  credential.renameMode = false;
  credential.tempName = null; // Discard changes
}

async function saveRename(credential) {
  try {
    await auth.RenameWebAuthnCredential({ ...credential, Name: credential.tempName });
    credential.Name = credential.tempName; // Update the name
    credential.renameMode = false;
  } catch (error) {
    console.error("Failed to rename credential:", error);
  }
}

const pwFormData = ref({
  OldPassword: '',
  Password: '',
  PasswordRepeat: '',
})

const passwordWeak = computed(() => {
  return pwFormData.value.Password && pwFormData.value.Password.length > 0 && pwFormData.value.Password.length < settings.Setting('MinPasswordLength')
})

const passwordChangeAllowed = computed(() => {
  return pwFormData.value.Password && pwFormData.value.Password.length >= settings.Setting('MinPasswordLength') &&
      pwFormData.value.Password === pwFormData.value.PasswordRepeat &&
      pwFormData.value.OldPassword && pwFormData.value.OldPassword.length > 0 && pwFormData.value.OldPassword !== pwFormData.value.Password;
})

const updatePassword = async () => {
  try {
    await profile.changePassword(pwFormData.value);

    pwFormData.value.OldPassword = '';
    pwFormData.value.Password = '';
    pwFormData.value.PasswordRepeat = '';
    notify({
      title: "Password changed!",
      text: "Your password has been changed successfully.",
      type: 'success',
    });
  } catch (e) {
    notify({
      title: "Failed to update password!",
      text: e.toString(),
      type: 'error',
    })
  }
}


</script>

<template>
  <div class="page-header">
    <h1>{{ $t('settings.headline') }}</h1>
  </div>

  <p class="lead">{{ $t('settings.abstract') }}</p>

  <div class="card border-secondary p-5 mt-5" v-if="profile.user.Source === 'db'">
    <h2 class="display-7">{{ $t('settings.password.headline') }}</h2>
    <p class="lead">{{ $t('settings.password.abstract') }}</p>
    <hr class="my-4">

    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <label class="form-label mt-4" for="oldpw">{{ $t('settings.password.current-label') }}</label>
          <input id="oldpw" v-model="pwFormData.OldPassword" class="form-control" :class="{ 'is-invalid': pwFormData.Password && !pwFormData.OldPassword }" type="password">
        </div>
      </div>
      <div class="col-6">
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <div class="form-group has-success">
          <label class="form-label mt-4" for="newpw">{{ $t('settings.password.new-label') }}</label>
          <input id="newpw" v-model="pwFormData.Password" class="form-control" :class="{ 'is-invalid': passwordWeak,  'is-valid': pwFormData.Password !== '' && !passwordWeak }" type="password">
          <div class="invalid-feedback" v-if="passwordWeak">{{ $t('settings.password.weak-label') }}</div>
        </div>
      </div>
      <div class="col-6">
        <div class="form-group">
          <label class="form-label mt-4" for="confirmnewpw">{{ $t('settings.password.new-confirm-label') }}</label>
          <input id="confirmnewpw" v-model="pwFormData.PasswordRepeat" class="form-control" :class="{ 'is-invalid': pwFormData.PasswordRepeat !== ''&& pwFormData.Password !== pwFormData.PasswordRepeat,  'is-valid': pwFormData.PasswordRepeat !== '' && pwFormData.Password === pwFormData.PasswordRepeat && !passwordWeak }" type="password">
          <div class="invalid-feedback" v-if="pwFormData.PasswordRepeat !== ''&& pwFormData.Password !== pwFormData.PasswordRepeat">{{ $t('settings.password.invalid-confirm-label') }}</div>
        </div>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-6">
        <button class="btn btn-primary" :title="$t('settings.api.button-disable-title')" @click.prevent="updatePassword" :disabled="profile.isFetching || !passwordChangeAllowed">
          <i class="fa-solid fa-floppy-disk"></i> {{ $t('settings.password.change-button-text') }}
        </button>
      </div>
      <div class="col-6">
      </div>
    </div>
  </div>

  <div class="card border-secondary p-5 mt-5" v-if="settings.Setting('WebAuthnEnabled')">
    <h2 class="display-7">{{ $t('settings.webauthn.headline') }}</h2>
    <p class="lead">{{ $t('settings.webauthn.abstract') }}</p>
    <hr class="my-4">
    <p v-if="auth.IsWebAuthnEnabled">{{ $t('settings.webauthn.active-description') }}</p>
    <p v-else>{{ $t('settings.webauthn.inactive-description') }}</p>

    <div class="row">
      <div class="col-6">
        <button class="btn btn-primary" :title="$t('settings.webauthn.button-register-text')" @click.prevent="auth.RegisterWebAuthn" :disabled="auth.isFetching">
          <i class="fa-solid fa-plus-circle"></i> {{ $t('settings.webauthn.button-register-title') }}
        </button>
      </div>
    </div>

    <div v-if="auth.WebAuthnCredentials.length > 0" class="mt-4">
      <h3>{{ $t('settings.webauthn.credentials-list') }}</h3>
      <table class="table table-striped">
        <thead>
        <tr>
          <th style="width: 50%">{{ $t('settings.webauthn.table.name') }}</th>
          <th style="width: 20%">{{ $t('settings.webauthn.table.created') }}</th>
          <th style="width: 30%">{{ $t('settings.webauthn.table.actions') }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="credential in auth.webAuthnCredentials" :key="credential.ID">
          <td class="align-middle">
            <div v-if="credential.renameMode">
              <input v-model="credential.tempName" class="form-control" type="text" />
            </div>
            <div v-else>
              {{ credential.Name }}
            </div>
          </td>
          <td class="align-middle">
            {{ credential.CreatedAt }}
          </td>
          <td class="align-middle text-center">
            <div v-if="credential.renameMode">
              <button class="btn btn-success me-1" :title="$t('settings.webauthn.button-save-text')" @click.prevent="saveRename(credential)" :disabled="auth.isFetching">
                {{ $t('settings.webauthn.button-save-title') }}
              </button>
              <button class="btn btn-secondary" :title="$t('settings.webauthn.button-cancel-text')" @click.prevent="cancelRename(credential)">
                {{ $t('settings.webauthn.button-cancel-title') }}
              </button>
            </div>
            <div v-else>
              <button class="btn btn-secondary me-1" :title="$t('settings.webauthn.button-rename-text')" @click.prevent="enableRename(credential)">
                {{ $t('settings.webauthn.button-rename-title') }}
              </button>
              <button class="btn btn-danger" :title="$t('settings.webauthn.button-delete-text')" data-bs-toggle="modal" data-bs-target="#webAuthnDeleteModal" :disabled="auth.isFetching" @click="selectedCredential=credential">
                {{ $t('settings.webauthn.button-delete-title') }}
              </button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="modal fade" id="webAuthnDeleteModal" tabindex="-1" aria-labelledby="webAuthnDeleteModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header bg-danger text-white">
            <h5 class="modal-title" id="webAuthnDeleteModalLabel">{{ $t('settings.webauthn.modal-delete.headline') }}</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" :aria-label="$t('settings.webauthn.modal-delete.button-cancel')"></button>
          </div>
          <div class="modal-body">
            <h5 class="mb-3">{{ selectedCredential.Name }} <small class="text-body-secondary">({{ $t('settings.webauthn.modal-delete.created') }} {{ selectedCredential.CreatedAt }})</small></h5>
            <p class="mb-0">{{ $t('settings.webauthn.modal-delete.abstract') }}</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('settings.webauthn.modal-delete.button-cancel') }}</button>
            <button type="button" class="btn btn-danger" id="confirmWebAuthnDelete" @click="auth.DeleteWebAuthnCredential(selectedCredential.ID)" :disabled="auth.isFetching" data-bs-dismiss="modal">{{ $t('settings.webauthn.modal-delete.button-delete') }}</button>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="mt-5" v-if="auth.IsAdmin || !settings.Setting('ApiAdminOnly')">
    <div class="card border-secondary p-5" v-if="profile.user.ApiToken">
      <h2 class="display-7">{{ $t('settings.api.headline') }}</h2>
      <p class="lead">{{ $t('settings.api.abstract') }}</p>
      <hr class="my-4">
      <p>{{ $t('settings.api.active-description') }}</p>
      <div class="row">
        <div class="col-6">
          <div class="form-group">
            <label class="form-label mt-4">{{ $t('settings.api.user-label') }}</label>
            <input v-model="profile.user.Identifier" class="form-control" :placeholder="$t('settings.api.user-placeholder')" type="text" readonly>
          </div>
        </div>
        <div class="col-6">
          <div class="form-group">
            <label class="form-label mt-4">{{ $t('settings.api.token-label') }}</label>
            <input v-model="profile.user.ApiToken" class="form-control" :placeholder="$t('settings.api.token-placeholder')" type="text" readonly>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="form-group">
            <p class="form-label mt-4">{{ $t('settings.api.token-created-label') }} {{profile.user.ApiTokenCreated}}</p>
          </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-6">
          <button class="btn btn-primary" :title="$t('settings.api.button-disable-title')" @click.prevent="profile.disableApi()" :disabled="profile.isFetching">
            <i class="fa-solid fa-minus-circle"></i> {{ $t('settings.api.button-disable-text') }}
          </button>
        </div>
        <div class="col-6">
          <a href="/api/v1/doc.html" target="_blank" :alt="$t('settings.api.api-link')">{{ $t('settings.api.api-link') }}</a>
        </div>
      </div>
    </div>
    <div class="card border-secondary p-5" v-else>
      <h2 class="display-7">{{ $t('settings.api.headline') }}</h2>
      <p class="lead">{{ $t('settings.api.abstract') }}</p>
      <hr class="my-4">
      <p>{{ $t('settings.api.inactive-description') }}</p>
      <button class="btn btn-primary" :title="$t('settings.api.button-enable-title')" @click.prevent="profile.enableApi()" :disabled="profile.isFetching">
        <i class="fa-solid fa-plus-circle"></i> {{ $t('settings.api.button-enable-text') }}
      </button>
    </div>
  </div>
</template>