mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-15 19:52:15 +01:00
add linter, prettier and typescript support for jetstream (#1)
* add linter, prettier and typescript support for jetstream * add github actions for lint, build and typecheck * add composer install to build action * fix composer lock * add ext-intl and fixed php version * fix intl php extension install * add tip php extension to github npm build action * fix php version to 8.3.1 * change github php base action * fix primary button default type * updated typescript types from Team to Organization --------- Co-authored-by: Gregor Vostrak <gregorvostrak@Gregors-MacBook-Pro.local>
This commit is contained in:
Gregor Vostrak
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Link, router, useForm } from '@inertiajs/vue3';
|
||||
import { Link, router, useForm, usePage } from '@inertiajs/vue3';
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
import FormSection from '@/Components/FormSection.vue';
|
||||
import InputError from '@/Components/InputError.vue';
|
||||
@@ -8,25 +8,31 @@ import InputLabel from '@/Components/InputLabel.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import type { User } from '@/types/models';
|
||||
import route from 'ziggy-js';
|
||||
|
||||
const props = defineProps({
|
||||
user: Object,
|
||||
});
|
||||
const props = defineProps<{
|
||||
user: User;
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
_method: 'PUT',
|
||||
name: props.user.name,
|
||||
email: props.user.email,
|
||||
photo: null,
|
||||
photo: null as File | null,
|
||||
});
|
||||
|
||||
const verificationLinkSent = ref(null);
|
||||
const photoPreview = ref(null);
|
||||
const photoInput = ref(null);
|
||||
const verificationLinkSent = ref<boolean | null>(null);
|
||||
const photoPreview = ref<ArrayBuffer | undefined | string | null>(null);
|
||||
const photoInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const updateProfileInformation = () => {
|
||||
if (photoInput.value) {
|
||||
form.photo = photoInput.value.files[0];
|
||||
if (
|
||||
photoInput.value &&
|
||||
photoInput.value.files &&
|
||||
photoInput.value.files?.length > 0
|
||||
) {
|
||||
form.photo = photoInput.value?.files[0];
|
||||
}
|
||||
|
||||
form.post(route('user-profile-information.update'), {
|
||||
@@ -41,21 +47,22 @@ const sendEmailVerification = () => {
|
||||
};
|
||||
|
||||
const selectNewPhoto = () => {
|
||||
photoInput.value.click();
|
||||
photoInput.value?.click();
|
||||
};
|
||||
|
||||
const updatePhotoPreview = () => {
|
||||
const photo = photoInput.value.files[0];
|
||||
if (photoInput.value?.files) {
|
||||
const photo = photoInput.value?.files[0];
|
||||
if (!photo) return;
|
||||
|
||||
if (! photo) return;
|
||||
const reader = new FileReader();
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
photoPreview.value = e.target?.result;
|
||||
};
|
||||
|
||||
reader.onload = (e) => {
|
||||
photoPreview.value = e.target.result;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(photo);
|
||||
reader.readAsDataURL(photo);
|
||||
}
|
||||
};
|
||||
|
||||
const deletePhoto = () => {
|
||||
@@ -70,16 +77,21 @@ const deletePhoto = () => {
|
||||
|
||||
const clearPhotoFileInput = () => {
|
||||
if (photoInput.value?.value) {
|
||||
photoInput.value.value = null;
|
||||
photoInput.value.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const page = usePage<{
|
||||
jetstream: {
|
||||
managesProfilePhotos: boolean;
|
||||
hasEmailVerification: boolean;
|
||||
};
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormSection @submitted="updateProfileInformation">
|
||||
<template #title>
|
||||
Profile Information
|
||||
</template>
|
||||
<template #title> Profile Information</template>
|
||||
|
||||
<template #description>
|
||||
Update your account's profile information and email address.
|
||||
@@ -87,32 +99,40 @@ const clearPhotoFileInput = () => {
|
||||
|
||||
<template #form>
|
||||
<!-- Profile Photo -->
|
||||
<div v-if="$page.props.jetstream.managesProfilePhotos" class="col-span-6 sm:col-span-4">
|
||||
<div
|
||||
v-if="page.props.jetstream.managesProfilePhotos"
|
||||
class="col-span-6 sm:col-span-4">
|
||||
<!-- Profile Photo File Input -->
|
||||
<input
|
||||
id="photo"
|
||||
ref="photoInput"
|
||||
type="file"
|
||||
class="hidden"
|
||||
@change="updatePhotoPreview"
|
||||
>
|
||||
@change="updatePhotoPreview" />
|
||||
|
||||
<InputLabel for="photo" value="Photo" />
|
||||
|
||||
<!-- Current Profile Photo -->
|
||||
<div v-show="! photoPreview" class="mt-2">
|
||||
<img :src="user.profile_photo_url" :alt="user.name" class="rounded-full h-20 w-20 object-cover">
|
||||
<div v-show="!photoPreview" class="mt-2">
|
||||
<img
|
||||
:src="user.profile_photo_url"
|
||||
:alt="user.name"
|
||||
class="rounded-full h-20 w-20 object-cover" />
|
||||
</div>
|
||||
|
||||
<!-- New Profile Photo Preview -->
|
||||
<div v-show="photoPreview" class="mt-2">
|
||||
<span
|
||||
class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
|
||||
:style="'background-image: url(\'' + photoPreview + '\');'"
|
||||
/>
|
||||
:style="
|
||||
'background-image: url(\'' + photoPreview + '\');'
|
||||
" />
|
||||
</div>
|
||||
|
||||
<SecondaryButton class="mt-2 me-2" type="button" @click.prevent="selectNewPhoto">
|
||||
<SecondaryButton
|
||||
class="mt-2 me-2"
|
||||
type="button"
|
||||
@click.prevent="selectNewPhoto">
|
||||
Select A New Photo
|
||||
</SecondaryButton>
|
||||
|
||||
@@ -120,8 +140,7 @@ const clearPhotoFileInput = () => {
|
||||
v-if="user.profile_photo_path"
|
||||
type="button"
|
||||
class="mt-2"
|
||||
@click.prevent="deletePhoto"
|
||||
>
|
||||
@click.prevent="deletePhoto">
|
||||
Remove Photo
|
||||
</SecondaryButton>
|
||||
|
||||
@@ -137,8 +156,7 @@ const clearPhotoFileInput = () => {
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="name"
|
||||
/>
|
||||
autocomplete="name" />
|
||||
<InputError :message="form.errors.name" class="mt-2" />
|
||||
</div>
|
||||
|
||||
@@ -151,11 +169,14 @@ const clearPhotoFileInput = () => {
|
||||
type="email"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
autocomplete="username" />
|
||||
<InputError :message="form.errors.email" class="mt-2" />
|
||||
|
||||
<div v-if="$page.props.jetstream.hasEmailVerification && user.email_verified_at === null">
|
||||
<div
|
||||
v-if="
|
||||
page.props.jetstream.hasEmailVerification &&
|
||||
user.email_verified_at === null
|
||||
">
|
||||
<p class="text-sm mt-2 dark:text-white">
|
||||
Your email address is unverified.
|
||||
|
||||
@@ -164,14 +185,16 @@ const clearPhotoFileInput = () => {
|
||||
method="post"
|
||||
as="button"
|
||||
class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
|
||||
@click.prevent="sendEmailVerification"
|
||||
>
|
||||
@click.prevent="sendEmailVerification">
|
||||
Click here to re-send the verification email.
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<div v-show="verificationLinkSent" class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
|
||||
A new verification link has been sent to your email address.
|
||||
<div
|
||||
v-show="verificationLinkSent"
|
||||
class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
|
||||
A new verification link has been sent to your email
|
||||
address.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,7 +205,9 @@ const clearPhotoFileInput = () => {
|
||||
Saved.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing">
|
||||
Save
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user