Skip to content

Commit

Permalink
style: Tweaked the mfa manager
Browse files Browse the repository at this point in the history
  • Loading branch information
@lewislarsen
lewislarsen committed Aug 23, 2024
1 parent 6562a5a commit 5e56313
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 84 deletions.
5 changes: 5 additions & 0 deletions resources/views/components/icons/onepassword.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {{ $attributes->merge() }}><title>
1Password</title>
<path
d="M12 .007C5.373.007 0 5.376 0 11.999c0 6.624 5.373 11.994 12 11.994S24 18.623 24 12C24 5.376 18.627.007 12 .007Zm-.895 4.857h1.788c.484 0 .729.002.914.096a.86.86 0 0 1 .377.377c.094.185.095.428.095.912v6.016c0 .12 0 .182-.015.238a.427.427 0 0 1-.067.137.923.923 0 0 1-.174.162l-.695.564c-.113.092-.17.138-.191.194a.216.216 0 0 0 0 .15c.02.055.078.101.191.193l.695.565c.094.076.14.115.174.162.03.042.053.087.067.137a.936.936 0 0 1 .015.238v2.746c0 .484-.001.727-.095.912a.86.86 0 0 1-.377.377c-.185.094-.43.096-.914.096h-1.788c-.484 0-.726-.002-.912-.096a.86.86 0 0 1-.377-.377c-.094-.185-.095-.428-.095-.912v-6.016c0-.12 0-.182.015-.238a.437.437 0 0 1 .067-.139c.034-.047.08-.083.174-.16l.695-.564c.113-.092.17-.138.191-.194a.216.216 0 0 0 0-.15c-.02-.055-.078-.101-.191-.193l-.695-.565a.92.92 0 0 1-.174-.162.437.437 0 0 1-.067-.139.92.92 0 0 1-.015-.236V6.25c0-.484.001-.727.095-.912a.86.86 0 0 1 .377-.377c.186-.094.428-.096.912-.096z"/>
</svg>
159 changes: 75 additions & 84 deletions resources/views/livewire/profile/multi-factor-authentication-manager.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ public function mfaMethods(): array
'description' => __('Use a mobile app to generate secure, time-based codes for login.'),
'icon' => 'heroicon-o-device-phone-mobile',
'benefits' => [
__('Works offline without cellular or internet connection'),
__('Supports multiple accounts across various services'),
__('Widely adopted and compatible with most online platforms'),
__('Functions without internet or mobile network connection'),
__('Allows management of multiple accounts across various services'),
__('Widely accepted and compatible with most online platforms'),
],
],
];
Expand Down Expand Up @@ -251,34 +251,11 @@ public function downloadBackupCodes(): ?StreamedResponse
<div wire:key="current-view-{{ $currentView }}">
@if ($currentView === 'methods')
<x-form-wrapper>
<x-slot name="title">{{ __('Multi-Factor Authentication (2FA)') }}</x-slot>
<x-slot name="title">{{ __('Two-Factor Authentication') }}</x-slot>
<x-slot name="description">
{{ __('Enhance your account security by enabling 2FA. This adds an extra layer of protection to your account.') }}
{{ __('Enhance your account security by enabling Two-Factor Authentication.') }}
</x-slot>
<x-slot name="icon">heroicon-o-shield-check</x-slot>

<div class="mb-8 p-6 bg-blue-50 dark:bg-blue-900/50 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
@svg('heroicon-o-light-bulb', 'w-8 h-8 text-blue-500 mr-3')
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200">{{ __('Why use 2FA?') }}</h3>
</div>
<ul class="space-y-3">
<li class="flex items-start">
@svg('heroicon-o-check-circle', 'w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0')
<span
class="text-blue-700 dark:text-blue-300">{{ __('Adds an extra layer of security to your account') }}</span>
</li>
<li class="flex items-start">
@svg('heroicon-o-check-circle', 'w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0')
<span
class="text-blue-700 dark:text-blue-300">{{ __('Protects against unauthorized access even if your password is compromised') }}</span>
</li>
<li class="flex items-start">
@svg('heroicon-o-check-circle', 'w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0')
<span class="text-blue-700 dark:text-blue-300">{{ __('Easy to set up and use') }}</span>
</li>
</ul>
</div>
<x-slot name="icon">heroicon-o-lock-closed</x-slot>

<div class="space-y-6">
@foreach ($this->mfaMethods as $methodKey => $method)
Expand Down Expand Up @@ -458,84 +435,98 @@ class="mt-1 block w-full"
</x-slot>
<x-slot name="icon">heroicon-o-device-phone-mobile</x-slot>

<div class="mb-6 p-6 border-b border-gray-200 dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-6">{{ __('Setup Instructions') }}</h3>
<ol class="list-none space-y-6">
<li class="flex items-start">
<span
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">1</span>
<div>
<p class="text-gray-700 dark:text-gray-300 mb-3">{{ __('Open your preferred authenticator app:') }}</p>
<div class="flex flex-wrap gap-4">
<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
target="_blank" rel="noopener noreferrer"
class="flex items-center px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300">
<x-icons.google-auth
class="w-6 h-6 mr-2 text-gray-600 dark:text-gray-100 fill-current"/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Google Authenticator</span>
</a>
<a href="https://authy.com/download/" target="_blank" rel="noopener noreferrer"
class="flex items-center px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300">
<x-icons.authy
class="w-6 h-6 mr-2 text-gray-600 dark:text-gray-300 fill-current"/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Authy</span>
</a>
</div>
</div>
</li>
<li class="flex items-start">
<span
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">2</span>
<p class="text-gray-700 dark:text-gray-300">{{ __('Scan the QR code or enter the secret key manually') }}</p>
</li>
<li class="flex items-start">
<span
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">3</span>
<p class="text-gray-700 dark:text-gray-300">{{ __('Enter the 6-digit code generated by the app below') }}</p>
</li>
<li class="flex items-start">
<span
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">4</span>
<p class="text-gray-700 dark:text-gray-300">{{ __('Click "Enable" to activate two-factor authentication') }}</p>
</li>
</ol>
<div x-data="{ open: false }" class="mb-6 border-b border-gray-200 dark:border-gray-600">
<button @click="open = !open" class="flex justify-between items-center w-full p-6 text-left">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">{{ __('Two-Factor Authentication Setup Instructions') }}</h3>
<svg x-show="!open" class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
<svg x-show="open" class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg>
</button>

<div x-show="open" x-collapse>
<div class="p-6">
<ol class="list-none space-y-6">
<li class="flex items-start">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">1</span>
<div>
<p class="text-gray-700 dark:text-gray-300 mb-3">{{ __('Install and open an authenticator app on your device:') }}</p>
<div class="flex flex-wrap gap-4">
<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
target="_blank" rel="noopener noreferrer"
class="flex items-center px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300">
<x-icons.google-auth
class="w-6 h-6 mr-2 text-gray-600 dark:text-gray-100 fill-current"/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Google Authenticator</span>
</a>
<a href="https://authy.com/download/" target="_blank" rel="noopener noreferrer"
class="flex items-center px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300">
<x-icons.authy
class="w-6 h-6 mr-2 text-gray-600 dark:text-gray-300 fill-current"/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Authy</span>
</a>
<a href="https://1password.com/downloads/" target="_blank" rel="noopener noreferrer"
class="flex items-center px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300">
<x-icons.onepassword
class="w-6 h-6 mr-2 text-gray-600 dark:text-gray-300 fill-current"/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">1Password</span>
</a>
</div>
</div>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">2</span>
<p class="text-gray-700 dark:text-gray-300">{{ __('In your authenticator app, add a new account by scanning the QR code below or manually entering the provided secret key') }}</p>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">3</span>
<p class="text-gray-700 dark:text-gray-300">{{ __('Once added, your app will display a 6-digit code that changes every 30 seconds') }}</p>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4 flex-shrink-0 text-lg font-semibold">4</span>
<p class="text-gray-700 dark:text-gray-300">{{ __('Enter the current 6-digit code from your app in the verification field below, then click "Enable Two-Factor Auth"') }}</p>
</li>
</ol>
</div>
</div>
</div>

<div class="mb-6">
<div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
<p class="font-semibold">
{{ __('Scan the QR code or enter the setup key in your authenticator app.') }}
{{ __('Scan the QR code or enter the secret key in your authenticator app.') }}
</p>
</div>

<div class="flex flex-col md:flex-row items-center justify-center mt-6">
<div class="w-48 h-48 mb-4 md:mb-0 md:mr-8">
<div class="flex flex-col lg:flex-row items-center justify-between max-w-5xl mx-auto mt-8 space-y-8 lg:space-y-0 lg:space-x-8">
<div class="w-72 h-72 flex-shrink-0">
<div id="qr-code-container"
class="w-full h-full flex items-center justify-center rounded-lg overflow-hidden bg-white dark:bg-gray-800">
<div class="qr-code-wrapper">
class="w-full h-full flex items-center justify-center rounded-lg overflow-hidden">
<div class="qr-code-wrapper p-2">
{!! $this->qrCodeSvg !!}
</div>
</div>
</div>

<div class="w-full md:w-64">
<x-input-label for="setup_key" :value="__('Secret Key')" class="mb-2"/>
<div class="flex flex-col sm:flex-row">
<div class="w-full lg:w-2/3">
<x-input-label for="setup_key" :value="__('Secret Key')" class="mb-3 text-lg font-medium"/>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<x-text-input
id="setup_key"
type="text"
name="setup_key"
class="block w-full mb-2 sm:mb-0 sm:mr-2"
class="block w-full text-lg py-2 px-3"
:value="$this->twoFactorSecret"
readonly
/>
<x-secondary-button
wire:click="copySetupKey"
iconOnly
type="button"
class="w-full sm:w-auto justify-center inline-flex items-center ml-2"
class="whitespace-nowrap justify-center inline-flex items-center px-4 py-2"
>
@svg('heroicon-o-clipboard', 'w-5 h-5')
{{ __('Copy') }}
@svg('heroicon-o-clipboard', 'w-5 h-5 ml-2')
</x-secondary-button>
</div>
</div>
Expand Down Expand Up @@ -602,7 +593,7 @@ class="w-full sm:w-auto justify-center inline-flex items-center ml-2"
</x-slot>
<x-slot name="icon">heroicon-o-check-circle</x-slot>

<div class="mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg">
<div class="flex items-center mb-4">
<svg class="w-8 h-8 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
Expand Down

0 comments on commit 5e56313

Please sign in to comment.