jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyling authentication in dark mode

Browse Source
This commit is contained in:
Geriano
2022-07-29 18:58:48 +07:00
parent c481d88fce
commit 4e6dc5bab6
21 changed files with 41 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Jetstream/ActionSection.vue
View File

@@ -14,7 +14,7 @@ import JetSectionTitle from './SectionTitle.vue';
</JetSectionTitle> </JetSectionTitle>
<div class="mt-5 md:mt-0 md:col-span-2"> <div class="mt-5 md:mt-0 md:col-span-2">
<div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg"> <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-700 shadow sm:rounded-lg">
<slot name="content" /> <slot name="content" />
</div> </div>
</div> </div>

4
resources/js/Jetstream/AuthenticationCard.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100"> <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
<div> <div>
<slot name="logo" /> <slot name="logo" />
</div> </div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg"> <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-700 shadow-md overflow-hidden sm:rounded-lg">
<slot /> <slot />
</div> </div>
</div> </div>

2
resources/js/Jetstream/Button.vue
View File

@@ -8,7 +8,7 @@ defineProps({
</script> </script>
<template> <template>
<button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition"> <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-900 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
<slot /> <slot />
</button> </button>
</template> </template>

2
resources/js/Jetstream/Checkbox.vue
View File

@@ -31,6 +31,6 @@ const proxyChecked = computed({
v-model="proxyChecked" v-model="proxyChecked"
type="checkbox" type="checkbox"
:value="value" :value="value"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" class="rounded border-gray-300 dark:border-gray-800 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
> >
</template> </template>

2
resources/js/Jetstream/DialogModal.vue
View File

@@ -40,7 +40,7 @@ const close = () => {
</div> </div>
</div> </div>
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right"> <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-right">
<slot name="footer" /> <slot name="footer" />
</div> </div>
</Modal> </Modal>

4
resources/js/Jetstream/FormSection.vue
View File

@@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
<div class="mt-5 md:mt-0 md:col-span-2"> <div class="mt-5 md:mt-0 md:col-span-2">
<form @submit.prevent="$emit('submitted')"> <form @submit.prevent="$emit('submitted')">
<div <div
class="px-4 py-5 bg-white sm:p-6 shadow" class="px-4 py-5 bg-white dark:bg-gray-700 dark:text-gray-200 sm:p-6 shadow"
:class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'" :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
> >
<div class="grid grid-cols-6 gap-6"> <div class="grid grid-cols-6 gap-6">
@@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
</div> </div>
</div> </div>
<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md"> <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
<slot name="actions" /> <slot name="actions" />
</div> </div>
</form> </form>

2
resources/js/Jetstream/Input.vue
View File

@@ -21,7 +21,7 @@ defineExpose({ focus: () => input.value.focus() });
<template> <template>
<input <input
ref="input" ref="input"
class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" class="dark:bg-transparent border-gray-300 dark:border-gray-800 dark:text-gray-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
:value="modelValue" :value="modelValue"
@input="$emit('update:modelValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >

2
resources/js/Jetstream/Label.vue
View File

@@ -5,7 +5,7 @@ defineProps({
</script> </script>
<template> <template>
<label class="block font-medium text-sm text-gray-700"> <label class="block font-medium text-sm text-gray-700 dark:text-gray-100">
<span v-if="value">{{ value }}</span> <span v-if="value">{{ value }}</span>
<span v-else><slot /></span> <span v-else><slot /></span>
</label> </label>

4
resources/js/Jetstream/Modal.vue
View File

@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<div v-show="show" class="fixed inset-0 transform transition-all" @click="close"> <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
<div class="absolute inset-0 bg-gray-500 opacity-75" /> <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75" />
</div> </div>
</transition> </transition>
@@ -81,7 +81,7 @@ const maxWidthClass = computed(() => {
leave-from-class="opacity-100 translate-y-0 sm:scale-100" leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass"> <div v-show="show" class="mb-6 bg-white dark:bg-gray-700 dark:text-gray-200 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
<slot v-if="show" /> <slot v-if="show" />
</div> </div>
</transition> </transition>

2
resources/js/Jetstream/SecondaryButton.vue
View File

@@ -8,7 +8,7 @@ defineProps({
</script> </script>
<template> <template>
<button :type="type" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25 transition"> <button :type="type" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-200 uppercase tracking-widest shadow-sm hover:text-gray-500 dark:hover:text-white focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 dark:active:bg-gray-800 disabled:opacity-25 transition">
<slot /> <slot />
</button> </button>
</template> </template>

4
resources/js/Jetstream/SectionTitle.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="md:col-span-1 flex justify-between"> <div class="md:col-span-1 flex justify-between">
<div class="px-4 sm:px-0"> <div class="px-4 sm:px-0">
<h3 class="text-lg font-medium text-gray-900"> <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
<slot name="title" /> <slot name="title" />
</h3> </h3>
<p class="mt-1 text-sm text-gray-600"> <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
<slot name="description" /> <slot name="description" />
</p> </p>
</div> </div>

2
resources/js/Pages/Auth/ConfirmPassword.vue
View File

@@ -33,7 +33,7 @@ const submit = () => {
<JetAuthenticationCardLogo /> <JetAuthenticationCardLogo />
</template> </template>
<div class="mb-4 text-sm text-gray-600"> <div class="mb-4 text-sm text-gray-600 dark:text-gray-200">
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> </div>

2
resources/js/Pages/Auth/ForgotPassword.vue
View File

@@ -28,7 +28,7 @@ const submit = () => {
<JetAuthenticationCardLogo /> <JetAuthenticationCardLogo />
</template> </template>
<div class="mb-4 text-sm text-gray-600"> <div class="mb-4 text-sm text-gray-600 dark:text-gray-200">
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>

4
resources/js/Pages/Auth/Login.vue
View File

@@ -71,12 +71,12 @@ const submit = () => {
<div class="block mt-4"> <div class="block mt-4">
<label class="flex items-center"> <label class="flex items-center">
<JetCheckbox v-model:checked="form.remember" name="remember" /> <JetCheckbox v-model:checked="form.remember" name="remember" />
<span class="ml-2 text-sm text-gray-600">Remember me</span> <span class="ml-2 text-sm text-gray-600 dark:text-gray-100">Remember me</span>
</label> </label>
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="flex items-center justify-end mt-4">
<Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900"> <Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
Forgot your password? Forgot your password?
</Link> </Link>

2
resources/js/Pages/Auth/Register.vue
View File

@@ -107,7 +107,7 @@ const submit = () => {
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="flex items-center justify-end mt-4">
<Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900"> <Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
Already registered? Already registered?
</Link> </Link>

4
resources/js/Pages/Auth/TwoFactorChallenge.vue
View File

@@ -45,7 +45,7 @@ const submit = () => {
<JetAuthenticationCardLogo /> <JetAuthenticationCardLogo />
</template> </template>
<div class="mb-4 text-sm text-gray-600"> <div class="mb-4 text-sm text-gray-600 dark:text-gray-300">
<template v-if="! recovery"> <template v-if="! recovery">
Please confirm access to your account by entering the authentication code provided by your authenticator application. Please confirm access to your account by entering the authentication code provided by your authenticator application.
</template> </template>
@@ -85,7 +85,7 @@ const submit = () => {
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="flex items-center justify-end mt-4">
<button type="button" class="text-sm text-gray-600 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery"> <button type="button" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery">
<template v-if="! recovery"> <template v-if="! recovery">
Use a recovery code Use a recovery code
</template> </template>

6
resources/js/Pages/Auth/VerifyEmail.vue
View File

@@ -26,7 +26,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
<JetAuthenticationCardLogo /> <JetAuthenticationCardLogo />
</template> </template>
<div class="mb-4 text-sm text-gray-600"> <div class="mb-4 text-sm text-gray-600 dark:text-gray-300">
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>
@@ -43,7 +43,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
<div> <div>
<Link <Link
:href="route('profile.show')" :href="route('profile.show')"
class="underline text-sm text-gray-600 hover:text-gray-900" class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900"
> >
Edit Profile</Link> Edit Profile</Link>
@@ -51,7 +51,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
:href="route('logout')" :href="route('logout')"
method="post" method="post"
as="button" as="button"
class="underline text-sm text-gray-600 hover:text-gray-900 ml-2" class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 ml-2"
> >
Log Out Log Out
</Link> </Link>

2
resources/js/Pages/Profile/Partials/DeleteUserForm.vue
View File

@@ -48,7 +48,7 @@ const closeModal = () => {
</template> </template>
<template #content> <template #content>
<div class="max-w-xl text-sm text-gray-600"> <div class="max-w-xl text-sm text-gray-600 dark:text-gray-200">
Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain. Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.
</div> </div>

10
resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
View File

@@ -53,7 +53,7 @@ const closeModal = () => {
</template> </template>
<template #content> <template #content>
<div class="max-w-xl text-sm text-gray-600"> <div class="max-w-xl text-sm text-gray-600 dark:text-gray-200">
If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password. If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.
</div> </div>
@@ -69,7 +69,7 @@ const closeModal = () => {
stroke-width="2" stroke-width="2"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
class="w-8 h-8 text-gray-500" class="w-8 h-8 text-gray-500 dark:text-gray-50"
> >
<path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> <path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg> </svg>
@@ -83,7 +83,7 @@ const closeModal = () => {
fill="none" fill="none"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
class="w-8 h-8 text-gray-500" class="w-8 h-8 text-gray-500 dark:text-gray-50"
> >
<path d="M0 0h24v24H0z" stroke="none" /><rect <path d="M0 0h24v24H0z" stroke="none" /><rect
x="7" x="7"
@@ -96,12 +96,12 @@ const closeModal = () => {
</div> </div>
<div class="ml-3"> <div class="ml-3">
<div class="text-sm text-gray-600"> <div class="text-sm text-gray-600 dark:text-gray-100">
{{ session.agent.platform ? session.agent.platform : 'Unknown' }} - {{ session.agent.browser ? session.agent.browser : 'Unknown' }} {{ session.agent.platform ? session.agent.platform : 'Unknown' }} - {{ session.agent.browser ? session.agent.browser : 'Unknown' }}
</div> </div>
<div> <div>
<div class="text-xs text-gray-500"> <div class="text-xs text-gray-500 dark:text-gray-50">
{{ session.ip_address }}, {{ session.ip_address }},
<span v-if="session.is_current_device" class="text-green-500 font-semibold">This device</span> <span v-if="session.is_current_device" class="text-green-500 font-semibold">This device</span>

14
resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
View File

@@ -115,19 +115,19 @@ const disableTwoFactorAuthentication = () => {
</template> </template>
<template #content> <template #content>
<h3 v-if="twoFactorEnabled && ! confirming" class="text-lg font-medium text-gray-900"> <h3 v-if="twoFactorEnabled && ! confirming" class="text-lg font-medium text-gray-900 dark:text-gray-100">
You have enabled two factor authentication. You have enabled two factor authentication.
</h3> </h3>
<h3 v-else-if="twoFactorEnabled && confirming" class="text-lg font-medium text-gray-900"> <h3 v-else-if="twoFactorEnabled && confirming" class="text-lg font-medium text-gray-900 dark:text-gray-100">
Finish enabling two factor authentication. Finish enabling two factor authentication.
</h3> </h3>
<h3 v-else class="text-lg font-medium text-gray-900"> <h3 v-else class="text-lg font-medium text-gray-900 dark:text-gray-100">
You have not enabled two factor authentication. You have not enabled two factor authentication.
</h3> </h3>
<div class="mt-3 max-w-xl text-sm text-gray-600"> <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-200">
<p> <p>
When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application. When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.
</p> </p>
@@ -135,7 +135,7 @@ const disableTwoFactorAuthentication = () => {
<div v-if="twoFactorEnabled"> <div v-if="twoFactorEnabled">
<div v-if="qrCode"> <div v-if="qrCode">
<div class="mt-4 max-w-xl text-sm text-gray-600"> <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-200">
<p v-if="confirming" class="font-semibold"> <p v-if="confirming" class="font-semibold">
To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code. To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.
</p> </p>
@@ -147,7 +147,7 @@ const disableTwoFactorAuthentication = () => {
<div class="mt-4" v-html="qrCode" /> <div class="mt-4" v-html="qrCode" />
<div class="mt-4 max-w-xl text-sm text-gray-600" v-if="setupKey"> <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-200" v-if="setupKey">
<p class="font-semibold"> <p class="font-semibold">
Setup Key: <span v-html="setupKey"></span> Setup Key: <span v-html="setupKey"></span>
</p> </p>
@@ -173,7 +173,7 @@ const disableTwoFactorAuthentication = () => {
</div> </div>
<div v-if="recoveryCodes.length > 0 && ! confirming"> <div v-if="recoveryCodes.length > 0 && ! confirming">
<div class="mt-4 max-w-xl text-sm text-gray-600"> <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-200">
<p class="font-semibold"> <p class="font-semibold">
Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost. Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.
</p> </p>

12
resources/js/Pages/Profile/Show.vue
View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
import AppLayout from '@/Layouts/AppLayout.vue'; import DashboardLayout from '@/Layouts/DashboardLayout.vue';
import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue'; import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue';
import JetSectionBorder from '@/Jetstream/SectionBorder.vue'; import JetSectionBorder from '@/Jetstream/SectionBorder.vue';
import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue'; import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
@@ -14,13 +14,7 @@ defineProps({
</script> </script>
<template> <template>
<AppLayout title="Profile"> <DashboardLayout title="Profile">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Profile
</h2>
</template>
<div> <div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<div v-if="$page.props.jetstream.canUpdateProfileInformation"> <div v-if="$page.props.jetstream.canUpdateProfileInformation">
@@ -53,5 +47,5 @@ defineProps({
</template> </template>
</div> </div>
</div> </div>
</AppLayout> </DashboardLayout>
</template> </template>