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>
<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" />
</div>
</div>

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

@@ -1,10 +1,10 @@
<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>
<slot name="logo" />
</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 />
</div>
</div>

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

@@ -8,7 +8,7 @@ defineProps({
</script>
<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 />
</button>
</template>

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

@@ -31,6 +31,6 @@ const proxyChecked = computed({
v-model="proxyChecked"
type="checkbox"
: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>

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

@@ -40,7 +40,7 @@ const close = () => {
</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" />
</div>
</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">
<form @submit.prevent="$emit('submitted')">
<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'"
>
<div class="grid grid-cols-6 gap-6">
@@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
</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" />
</div>
</form>

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

@@ -21,7 +21,7 @@ defineExpose({ focus: () => input.value.focus() });
<template>
<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"
@input="$emit('update:modelValue', $event.target.value)"
>

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

@@ -5,7 +5,7 @@ defineProps({
</script>
<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-else><slot /></span>
</label>

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

@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
leave-to-class="opacity-0"
>
<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>
</transition>
@@ -81,7 +81,7 @@ const maxWidthClass = computed(() => {
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"
>
<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" />
</div>
</transition>

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

@@ -8,7 +8,7 @@ defineProps({
</script>
<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 />
</button>
</template>

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

@@ -1,11 +1,11 @@
<template>
<div class="md:col-span-1 flex justify-between">
<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" />
</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" />
</p>
</div>

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

@@ -33,7 +33,7 @@ const submit = () => {
<JetAuthenticationCardLogo />
</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.
</div>

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

@@ -28,7 +28,7 @@ const submit = () => {
<JetAuthenticationCardLogo />
</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.
</div>

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

@@ -71,12 +71,12 @@ const submit = () => {
<div class="block mt-4">
<label class="flex items-center">
<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>
</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 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?
</Link>

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

@@ -107,7 +107,7 @@ const submit = () => {
</div>
<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?
</Link>

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

@@ -45,7 +45,7 @@ const submit = () => {
<JetAuthenticationCardLogo />
</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">
Please confirm access to your account by entering the authentication code provided by your authenticator application.
</template>
@@ -85,7 +85,7 @@ const submit = () => {
</div>
<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">
Use a recovery code
</template>

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

@@ -26,7 +26,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
<JetAuthenticationCardLogo />
</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.
</div>
@@ -43,7 +43,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
<div>
<Link
: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>
@@ -51,7 +51,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
:href="route('logout')"
method="post"
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
</Link>

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

@@ -48,7 +48,7 @@ const closeModal = () => {
</template>
<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.
</div>

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

@@ -53,7 +53,7 @@ const closeModal = () => {
</template>
<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.
</div>
@@ -69,7 +69,7 @@ const closeModal = () => {
stroke-width="2"
viewBox="0 0 24 24"
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" />
</svg>
@@ -83,7 +83,7 @@ const closeModal = () => {
fill="none"
stroke-linecap="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
x="7"
@@ -96,12 +96,12 @@ const closeModal = () => {
</div>
<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' }}
</div>
<div>
<div class="text-xs text-gray-500">
<div class="text-xs text-gray-500 dark:text-gray-50">
{{ session.ip_address }},
<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 #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.
</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.
</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.
</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>
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>
@@ -135,7 +135,7 @@ const disableTwoFactorAuthentication = () => {
<div v-if="twoFactorEnabled">
<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">
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>
@@ -147,7 +147,7 @@ const disableTwoFactorAuthentication = () => {
<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">
Setup Key: <span v-html="setupKey"></span>
</p>
@@ -173,7 +173,7 @@ const disableTwoFactorAuthentication = () => {
</div>
<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">
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>

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

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