-
-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #49 from WillTheDeveloper/account-management
Account management
- Loading branch information
Showing
5 changed files
with
326 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,155 @@ | ||
<x-app-layout> | ||
<x-slot name="header"> | ||
<h2 class="font-semibold text-xl text-gray-800 leading-tight"> | ||
{{ __('Dashboard') }} | ||
</h2> | ||
</x-slot> | ||
|
||
<div class="min-h-full"> | ||
|
||
<!-- Main column --> | ||
<div class="lg:pl-64 flex flex-col"> | ||
<!-- Search header --> | ||
<div class="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden"> | ||
<!-- Sidebar toggle, controls the 'sidebarOpen' sidebar state. --> | ||
<button @click="menu = true" type="button" | ||
class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 lg:hidden"> | ||
<span class="sr-only">Open sidebar</span> | ||
<!-- Heroicon name: outline/menu-alt-1 --> | ||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" | ||
stroke="currentColor" aria-hidden="true"> | ||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | ||
d="M4 6h16M4 12h8m-8 6h16"/> | ||
</svg> | ||
</button> | ||
<div class="flex-1 flex justify-between px-4 sm:px-6 lg:px-8"> | ||
<div class="flex-1 flex"> | ||
<form class="w-full flex md:ml-0" action="#" method="GET"> | ||
<label for="search-field" class="sr-only">Search</label> | ||
<div class="relative w-full text-gray-400 focus-within:text-gray-600"> | ||
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none"> | ||
<!-- Heroicon name: solid/search --> | ||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" | ||
fill="currentColor" aria-hidden="true"> | ||
<path fill-rule="evenodd" | ||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" | ||
clip-rule="evenodd"/> | ||
</svg> | ||
</div> | ||
<input id="search-field" name="search-field" | ||
class="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-0 focus:border-transparent focus:placeholder-gray-400 sm:text-sm" | ||
placeholder="Search" type="search"> | ||
</div> | ||
</form> | ||
</div> | ||
<div class="flex items-center"> | ||
<!-- Profile dropdown --> | ||
<div class="ml-3 relative"> | ||
<div> | ||
<button @click="profile = true" type="button" | ||
class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" | ||
id="user-menu-button" aria-expanded="false" aria-haspopup="true"> | ||
<span class="sr-only">Open user menu</span> | ||
<img class="h-8 w-8 rounded-full" | ||
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" | ||
alt=""> | ||
</button> | ||
</div> | ||
|
||
<!-- | ||
Dropdown menu, show/hide based on menu state. | ||
Entering: "transition ease-out duration-100" | ||
From: "transform opacity-0 scale-95" | ||
To: "transform opacity-100 scale-100" | ||
Leaving: "transition ease-in duration-75" | ||
From: "transform opacity-100 scale-100" | ||
To: "transform opacity-0 scale-95" | ||
--> | ||
<div x-show="profile" x-cloak | ||
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none" | ||
role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" | ||
tabindex="-1"> | ||
<div class="py-1" role="none"> | ||
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" --> | ||
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" | ||
tabindex="-1" id="user-menu-item-0">View profile</a> | ||
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" | ||
tabindex="-1" id="user-menu-item-1">Settings</a> | ||
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" | ||
tabindex="-1" id="user-menu-item-2">Notifications</a> | ||
</div> | ||
<div class="py-1" role="none"> | ||
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" | ||
tabindex="-1" id="user-menu-item-3">Get desktop app</a> | ||
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" | ||
tabindex="-1" id="user-menu-item-4">Support</a> | ||
</div> | ||
<div class="py-1" role="none"> | ||
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" | ||
tabindex="-1" id="user-menu-item-5">Logout</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<!-- This example requires Tailwind CSS v2.0+ --> | ||
<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | ||
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | ||
<!-- | ||
Background overlay, show/hide based on modal state. | ||
Entering: "ease-out duration-300" | ||
From: "opacity-0" | ||
To: "opacity-100" | ||
Leaving: "ease-in duration-200" | ||
From: "opacity-100" | ||
To: "opacity-0" | ||
--> | ||
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> | ||
|
||
<!-- This element is to trick the browser into centering the modal contents. --> | ||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | ||
|
||
<!-- | ||
Modal panel, show/hide based on modal state. | ||
Entering: "ease-out duration-300" | ||
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" | ||
To: "opacity-100 translate-y-0 sm:scale-100" | ||
Leaving: "ease-in duration-200" | ||
From: "opacity-100 translate-y-0 sm:scale-100" | ||
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" | ||
--> | ||
<div class="relative inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"> | ||
<div class="sm:flex sm:items-start"> | ||
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> | ||
<!-- Heroicon name: outline/exclamation --> | ||
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | ||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> | ||
</svg> | ||
</div> | ||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | ||
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Delete "{{$name}}" account</h3> | ||
<div class="mt-2"> | ||
<p class="text-sm text-gray-500">Are you sure you want to delete your account? All of your data will be permanently removed from our servers forever. This action cannot be undone. This includes; {{$posts}} posts and {{$comments}} comments.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> | ||
<form method="post" action="{{route('delete.confirmed')}}"> | ||
@csrf | ||
<button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Deactivate</button> | ||
</form> | ||
<a href="{{route('settings')}}" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">Cancel</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
|
||
</div> | ||
</div> | ||
</x-app-layout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.