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
2024-01-21 22:35:43 +01:00
committed by GitHub
parent 0a8d958ccc
commit 27140d4ffc
73 changed files with 4727 additions and 886 deletions

View File

@@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import { ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
@@ -12,14 +12,14 @@ const form = useForm({
password: '',
});
const passwordInput = ref(null);
const passwordInput = ref<HTMLInputElement | null>(null);
const submit = () => {
form.post(route('password.confirm'), {
onFinish: () => {
form.reset();
passwordInput.value.focus();
passwordInput.value?.focus();
},
});
};
@@ -34,7 +34,8 @@ const submit = () => {
</template>
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
This is a secure area of the application. Please confirm your password before continuing.
This is a secure area of the application. Please confirm your
password before continuing.
</div>
<form @submit.prevent="submit">
@@ -48,13 +49,15 @@ const submit = () => {
class="mt-1 block w-full"
required
autocomplete="current-password"
autofocus
/>
autofocus />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<div class="flex justify-end mt-4">
<PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<PrimaryButton
class="ms-4"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Confirm
</PrimaryButton>
</div>

View File

@@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
@@ -29,10 +29,14 @@ const submit = () => {
</template>
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
Forgot your password? No problem. Just let us know your email
address and we will email you a password reset link that will allow
you to choose a new one.
</div>
<div v-if="status" class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
<div
v-if="status"
class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
{{ status }}
</div>
@@ -46,13 +50,14 @@ const submit = () => {
class="mt-1 block w-full"
required
autofocus
autocomplete="username"
/>
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
<div class="flex items-center justify-end mt-4">
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<PrimaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Email Password Reset Link
</PrimaryButton>
</div>

View File

@@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
@@ -7,6 +7,7 @@ import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import route from 'ziggy-js';
defineProps({
canResetPassword: Boolean,
@@ -20,7 +21,7 @@ const form = useForm({
});
const submit = () => {
form.transform(data => ({
form.transform((data) => ({
...data,
remember: form.remember ? 'on' : '',
})).post(route('login'), {
@@ -37,7 +38,9 @@ const submit = () => {
<AuthenticationCardLogo />
</template>
<div v-if="status" class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
<div
v-if="status"
class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
{{ status }}
</div>
@@ -51,8 +54,7 @@ const submit = () => {
class="mt-1 block w-full"
required
autofocus
autocomplete="username"
/>
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
@@ -64,24 +66,31 @@ const submit = () => {
type="password"
class="mt-1 block w-full"
required
autocomplete="current-password"
/>
autocomplete="current-password" />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<div class="block mt-4">
<label class="flex items-center">
<Checkbox v-model:checked="form.remember" name="remember" />
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400"
>Remember me</span
>
</label>
</div>
<div class="flex items-center justify-end mt-4">
<Link v-if="canResetPassword" :href="route('password.request')" 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">
<Link
v-if="canResetPassword"
:href="route('password.request')"
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">
Forgot your password?
</Link>
<PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<PrimaryButton
class="ms-4"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Log in
</PrimaryButton>
</div>

View File

@@ -1,5 +1,5 @@
<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
<script setup lang="ts">
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import Checkbox from '@/Components/Checkbox.vue';
@@ -7,6 +7,7 @@ import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import route from 'ziggy-js';
const form = useForm({
name: '',
@@ -21,6 +22,12 @@ const submit = () => {
onFinish: () => form.reset('password', 'password_confirmation'),
});
};
const page = usePage<{
jetstream: {
hasTermsAndPrivacyPolicyFeature: boolean;
};
}>();
</script>
<template>
@@ -41,8 +48,7 @@ const submit = () => {
class="mt-1 block w-full"
required
autofocus
autocomplete="name"
/>
autocomplete="name" />
<InputError class="mt-2" :message="form.errors.name" />
</div>
@@ -54,8 +60,7 @@ const submit = () => {
type="email"
class="mt-1 block w-full"
required
autocomplete="username"
/>
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
@@ -67,31 +72,52 @@ const submit = () => {
type="password"
class="mt-1 block w-full"
required
autocomplete="new-password"
/>
autocomplete="new-password" />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<div class="mt-4">
<InputLabel for="password_confirmation" value="Confirm Password" />
<InputLabel
for="password_confirmation"
value="Confirm Password" />
<TextInput
id="password_confirmation"
v-model="form.password_confirmation"
type="password"
class="mt-1 block w-full"
required
autocomplete="new-password"
/>
<InputError class="mt-2" :message="form.errors.password_confirmation" />
autocomplete="new-password" />
<InputError
class="mt-2"
:message="form.errors.password_confirmation" />
</div>
<div v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature" class="mt-4">
<div
v-if="page.props.jetstream.hasTermsAndPrivacyPolicyFeature"
class="mt-4">
<InputLabel for="terms">
<div class="flex items-center">
<Checkbox id="terms" v-model:checked="form.terms" name="terms" required />
<Checkbox
id="terms"
v-model:checked="form.terms"
name="terms"
required />
<div class="ms-2">
I agree to the <a target="_blank" :href="route('terms.show')" 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">Terms of Service</a> and <a target="_blank" :href="route('policy.show')" 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">Privacy Policy</a>
I agree to the
<a
target="_blank"
:href="route('terms.show')"
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"
>Terms of Service</a
>
and
<a
target="_blank"
:href="route('policy.show')"
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"
>Privacy Policy</a
>
</div>
</div>
<InputError class="mt-2" :message="form.errors.terms" />
@@ -99,11 +125,16 @@ const submit = () => {
</div>
<div class="flex items-center justify-end mt-4">
<Link :href="route('login')" 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">
<Link
:href="route('login')"
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">
Already registered?
</Link>
<PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<PrimaryButton
class="ms-4"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Register
</PrimaryButton>
</div>

View File

@@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
@@ -44,8 +44,7 @@ const submit = () => {
class="mt-1 block w-full"
required
autofocus
autocomplete="username"
/>
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
@@ -57,26 +56,30 @@ const submit = () => {
type="password"
class="mt-1 block w-full"
required
autocomplete="new-password"
/>
autocomplete="new-password" />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<div class="mt-4">
<InputLabel for="password_confirmation" value="Confirm Password" />
<InputLabel
for="password_confirmation"
value="Confirm Password" />
<TextInput
id="password_confirmation"
v-model="form.password_confirmation"
type="password"
class="mt-1 block w-full"
required
autocomplete="new-password"
/>
<InputError class="mt-2" :message="form.errors.password_confirmation" />
autocomplete="new-password" />
<InputError
class="mt-2"
:message="form.errors.password_confirmation" />
</div>
<div class="flex items-center justify-end mt-4">
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<PrimaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Reset Password
</PrimaryButton>
</div>

View File

@@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
@@ -15,19 +15,19 @@ const form = useForm({
recovery_code: '',
});
const recoveryCodeInput = ref(null);
const codeInput = ref(null);
const recoveryCodeInput = ref<HTMLInputElement | null>(null);
const codeInput = ref<HTMLInputElement | null>(null);
const toggleRecovery = async () => {
recovery.value ^= true;
recovery.value = !recovery.value;
await nextTick();
if (recovery.value) {
recoveryCodeInput.value.focus();
recoveryCodeInput.value?.focus();
form.code = '';
} else {
codeInput.value.focus();
codeInput.value?.focus();
form.recovery_code = '';
}
};
@@ -46,17 +46,19 @@ const submit = () => {
</template>
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
<template v-if="! recovery">
Please confirm access to your account by entering the authentication code provided by your authenticator application.
<template v-if="!recovery">
Please confirm access to your account by entering the
authentication code provided by your authenticator application.
</template>
<template v-else>
Please confirm access to your account by entering one of your emergency recovery codes.
Please confirm access to your account by entering one of your
emergency recovery codes.
</template>
</div>
<form @submit.prevent="submit">
<div v-if="! recovery">
<div v-if="!recovery">
<InputLabel for="code" value="Code" />
<TextInput
id="code"
@@ -66,8 +68,7 @@ const submit = () => {
inputmode="numeric"
class="mt-1 block w-full"
autofocus
autocomplete="one-time-code"
/>
autocomplete="one-time-code" />
<InputError class="mt-2" :message="form.errors.code" />
</div>
@@ -79,23 +80,24 @@ const submit = () => {
v-model="form.recovery_code"
type="text"
class="mt-1 block w-full"
autocomplete="one-time-code"
/>
autocomplete="one-time-code" />
<InputError class="mt-2" :message="form.errors.recovery_code" />
</div>
<div class="flex items-center justify-end mt-4">
<button type="button" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery">
<template v-if="! recovery">
Use a recovery code
</template>
<button
type="button"
class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 underline cursor-pointer"
@click.prevent="toggleRecovery">
<template v-if="!recovery"> Use a recovery code</template>
<template v-else>
Use an authentication code
</template>
<template v-else> Use an authentication code</template>
</button>
<PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<PrimaryButton
class="ms-4"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Log in
</PrimaryButton>
</div>

View File

@@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import { computed } from 'vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
@@ -8,14 +8,16 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
const props = defineProps({
status: String,
});
import route from 'ziggy-js';
const form = useForm({});
const submit = () => {
form.post(route('verification.send'));
};
const verificationLinkSent = computed(() => props.status === 'verification-link-sent');
const verificationLinkSent = computed(
() => props.status === 'verification-link-sent'
);
</script>
<template>
@@ -27,32 +29,38 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
</template>
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
Before continuing, could you verify your email address by clicking
on the link we just emailed to you? If you didn't receive the email,
we will gladly send you another.
</div>
<div v-if="verificationLinkSent" class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
A new verification link has been sent to the email address you provided in your profile settings.
<div
v-if="verificationLinkSent"
class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
A new verification link has been sent to the email address you
provided in your profile settings.
</div>
<form @submit.prevent="submit">
<div class="mt-4 flex items-center justify-between">
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
<PrimaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Resend Verification Email
</PrimaryButton>
<div>
<Link
:href="route('profile.show')"
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"
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">
Edit Profile</Link
>
Edit Profile</Link>
<Link
:href="route('logout')"
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 ms-2"
>
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 ms-2">
Log Out
</Link>
</div>