Skip to content

Commit

Permalink
fix linter hints
Browse files Browse the repository at this point in the history
  • Loading branch information
@infeo
infeo committed May 22, 2024
1 parent 2947b80 commit 2d03e39
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 48 deletions.
103 changes: 56 additions & 47 deletions frontend/src/components/CreateVault.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
</div>
<div class="mt-5 sm:mt-6">
<label for="recoveryKey" class="sr-only">{{ t('createVault.enterRecoveryKey.recoveryKey') }}</label>
<textarea id="recoveryKey" v-model="recoveryKeyStr" rows="6" name="recoveryKey"
<!-- Textarea -->
<textarea
id="recoveryKey" v-model="recoveryKeyStr" rows="6" name="recoveryKey"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm"
:class="{ 'invalid:border-red-300 invalid:text-red-900 focus:invalid:ring-red-500 focus:invalid:border-red-500': onRecoverError instanceof FormValidationFailedError }"
required />
Expand All @@ -33,8 +35,7 @@
{{ t('createVault.enterRecoveryKey.submit') }}
</button>
<div v-if="onRecoverError != null">
<p v-if="onRecoverError instanceof FormValidationFailedError" class="text-sm text-red-900 mt-2">{{
t('createVault.error.formValidationFailed') }}</p>
<p v-if="onRecoverError instanceof FormValidationFailedError" class="text-sm text-red-900 mt-2">{{ t('createVault.error.formValidationFailed') }}</p>
<p v-else class="text-sm text-red-900 mt-2">{{ t('createVault.error.invalidRecoveryKey') }}</p>
</div>
</div>
Expand All @@ -59,22 +60,24 @@
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="vaultName" class="block text-sm font-medium text-gray-700">{{
t('createVault.enterVaultDetails.vaultName') }}</label>
<input id="vaultName" v-model="vault.name" :disabled="processing" type="text"
<label for="vaultName" class="block text-sm font-medium text-gray-700">{{ t('createVault.enterVaultDetails.vaultName') }}</label>
<input
id="vaultName" v-model="vault.name" :disabled="processing" type="text"
class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200"
:class="{ 'invalid:border-red-300 invalid:text-red-900 focus:invalid:ring-red-500 focus:invalid:border-red-500': onCreateError instanceof FormValidationFailedError }"
pattern="^(?! )([^\x5C\x2F:*?\x22<>\x7C])+(?<![ \x2E])$" required />
<p v-if="onCreateError instanceof FormValidationFailedError" class="text-sm text-red-900 mt-2">{{
t('createVault.error.illegalVaultName') }} \, /, :, *, ?, ", &lt;, >, |</p>
pattern="^(?! )([^\x5C\x2F:*?\x22<>\x7C])+(?<![ \x2E])$" required
>
<p v-if="onCreateError instanceof FormValidationFailedError" class="text-sm text-red-900 mt-2">{{ t('createVault.error.illegalVaultName') }} \, /, :, *, ?, ", &lt;, >, |</p>
</div>

<div class="col-span-6 sm:col-span-4">
<label for="vaultDescription" class="block text-sm font-medium text-gray-700">
{{ t('createVault.enterVaultDetails.vaultDescription') }}
<span class="text-xs text-gray-500">({{ t('common.optional') }})</span></label>
<input id="vaultDescription" v-model="vault.description" :disabled="processing" type="text"
class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200" />
<input
id="vaultDescription" v-model="vault.description" :disabled="processing" type="text"
class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200"
>
</div>
</div>
</div>
Expand All @@ -83,12 +86,15 @@

<div class="flex justify-end items-center">
<div v-if="onCreateError != null">
<p v-if="onCreateError instanceof FormValidationFailedError" class="text-sm text-red-900 mr-4">{{
t('createVault.error.formValidationFailed') }}</p>
<p v-if="onCreateError instanceof FormValidationFailedError" class="text-sm text-red-900 mr-4">
{{ t('createVault.error.formValidationFailed') }}
</p>
<p v-else class="text-sm text-red-900 mr-4">{{ t('common.unexpectedError', [onCreateError.message]) }}</p>
</div>
<button type="submit" :disabled="processing"
class="flex-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed">
<button
type="submit" :disabled="processing"
class="flex-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed"
>
{{ t('common.next') }}
</button>
</div>
Expand All @@ -112,12 +118,12 @@
</p>
</div>
<div class="relative mt-5 sm:mt-6">
<div
class="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<div class="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<label for="recoveryKey" class="sr-only">{{ t('createVault.showRecoveryKey.recoveryKey') }}</label>
<textarea id="recoveryKey" v-model="recoveryKeyStr" rows="6" name="recoveryKey"
class="block w-full resize-none border-0 py-3 focus:ring-0 sm:text-sm" readonly />

<textarea
id="recoveryKey" v-model="recoveryKeyStr" rows="6" name="recoveryKey"
class="block w-full resize-none border-0 py-3 focus:ring-0 sm:text-sm" readonly
/>
<!-- Spacer element to match the height of the toolbar -->
<div class="py-2" aria-hidden="true">
<div class="h-9" />
Expand All @@ -127,39 +133,39 @@
<div class="absolute inset-x-0 bottom-0">
<div class="flex flex-nowrap justify-end space-x-2 py-2 px-2 sm:px-3">
<div class="flex-shrink-0">
<button type="button"
class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3"
@click="copyRecoveryKey()">
<button
type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3"
@click="copyRecoveryKey()"
>
<ClipboardIcon class="h-5 w-5 flex-shrink-0 text-gray-300 sm:-ml-1" aria-hidden="true" />
<span v-if="!copiedRecoveryKey" class="hidden truncate sm:ml-2 sm:block text-gray-900">{{
t('common.copy') }}</span>
<span v-else class="hidden truncate sm:ml-2 sm:block text-gray-900">{{ t('common.copied')
}}</span>
<span v-if="!copiedRecoveryKey" class="hidden truncate sm:ml-2 sm:block text-gray-900">{{ t('common.copy') }}</span>
<span v-else class="hidden truncate sm:ml-2 sm:block text-gray-900">{{ t('common.copied') }}</span>
</button>
</div>
</div>
</div>
</div>
<div class="relative flex items-start text-left mt-5 sm:mt-6">
<div class="flex h-5 items-center">
<input id="confirmRecoveryKey" v-model="confirmRecoveryKey" name="confirmRecoveryKey" type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" required>
<input
id="confirmRecoveryKey" v-model="confirmRecoveryKey" name="confirmRecoveryKey" type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" required
>
</div>
<div class="ml-3 text-sm">
<label for="confirmRecoveryKey" class="font-medium text-gray-700">{{
t('createVault.showRecoveryKey.confirmRecoveryKey') }}</label>
<label for="confirmRecoveryKey" class="font-medium text-gray-700">{{ t('createVault.showRecoveryKey.confirmRecoveryKey') }}</label>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button type="submit" :disabled="!confirmRecoveryKey || processing"
class="inline-flex w-full justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:primary focus:ring-offset-2 sm:text-sm disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed">
<button
type="submit" :disabled="!confirmRecoveryKey || processing"
class="inline-flex w-full justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:primary focus:ring-offset-2 sm:text-sm disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed"
>
{{ t('createVault.showRecoveryKey.submit') }}
</button>
<div v-if="onCreateError != null">
<p v-if="onCreateError instanceof PaymentRequiredError" class="text-sm text-red-900 mt-2">{{
t('createVault.error.paymentRequired') }}</p>
<p v-else class="text-sm text-red-900 mt-2">{{ t('common.unexpectedError', [onCreateError.message]) }}
</p>
<p v-if="onCreateError instanceof PaymentRequiredError" class="text-sm text-red-900 mt-2">{{ t('createVault.error.paymentRequired') }}</p>
<p v-else class="text-sm text-red-900 mt-2">{{ t('common.unexpectedError', [onCreateError.message]) }}</p>
</div>
</div>
</div>
Expand All @@ -185,14 +191,17 @@
</div>
</div>
<div class="mt-5 sm:mt-6">
<button type="button"
<button
type="button"
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
@click="downloadVaultTemplate()">
@click="downloadVaultTemplate()"
>
<ArrowDownTrayIcon class="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
{{ t('createVault.success.download') }}
</button>
<p v-if="onDownloadTemplateError != null" class="text-sm text-red-900 mr-4">{{
t('createVault.error.downloadTemplateFailed', [onDownloadTemplateError.message]) }}</p>
<p v-if="onDownloadTemplateError != null" class="text-sm text-red-900 mr-4">
{{ t('createVault.error.downloadTemplateFailed', [onDownloadTemplateError.message]) }}
</p>
<!-- TODO: not beautiful-->
</div>
<div class="mt-2">
Expand Down Expand Up @@ -258,12 +267,12 @@ const onDownloadTemplateError = ref<Error | null>(null);
const state = ref(State.Initial);
const processing = ref(false);
const vault = ref<VaultDto>({
id: crypto.randomUUID(),
name: '',
description: '',
archived: false,
creationTime: new Date()
});
id: crypto.randomUUID(),
name: '',
description: '',
archived: false,
creationTime: new Date()
});
const copiedRecoveryKey = ref(false);
const debouncedCopyFinish = debounce(() => copiedRecoveryKey.value = false, 2000);
const confirmRecoveryKey = ref(false);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/VaultDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,7 @@ async function addAuthority(authority: AuthorityDto) {
async function addAuthorityBackend(authority: AuthorityDto) {
try {
switch(authority.type) {
switch (authority.type) {
case 'USER':
await backend.vaults.addUser(props.vaultId, authority.id);
break;
Expand Down

0 comments on commit 2d03e39

Please sign in to comment.