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