From 8abf4374742ecb872738feebffeca5aa8d37e7cb Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Mon, 16 Jan 2023 22:00:02 +0100
Subject: [PATCH] start hacking on the settings

---
 app/Actions/User/TokenDisable.php             |  25 +++
 app/Actions/User/TokenReset.php               |  26 +++
 app/Contracts/Http/RuleSet.php                |  20 +++
 .../Administration/UserController.php         |  19 +--
 app/Http/Livewire/Components/Header.php       |  32 ++++
 .../Forms/Settings/BooleanSetting.php         |  47 ++++++
 .../Livewire/Forms/Settings/GetApiToken.php   |  71 +++++++++
 app/Http/Livewire/Forms/Settings/SetLogin.php |  73 +++++++++
 app/Http/Livewire/Index.php                   |  13 +-
 app/Http/Livewire/Pages/Gallery.php           |  12 +-
 app/Http/Requests/User/ChangeLoginRequest.php |   9 +-
 app/Http/RuleSets/ChangeLoginRuleSet.php      |  20 +++
 resources/views/layouts/livewire.blade.php    |   8 +-
 .../livewire/components/header.blade.php      |  68 ++++----
 .../form/form-get-api-token.blade.php         |  56 +++++++
 .../views/livewire/form/form-login.blade.php  |  66 ++++----
 .../livewire/form/form-set-login.blade.php    |  18 +++
 .../views/livewire/form/form-toggle.blade.php |  14 ++
 resources/views/livewire/form/form.blade.php  |   2 +-
 resources/views/livewire/index.blade.php      |   3 +-
 .../views/livewire/pages/gallery.blade.php    |  10 +-
 .../views/livewire/pages/settings.blade.php   | 150 +++++-------------
 22 files changed, 529 insertions(+), 233 deletions(-)
 create mode 100644 app/Actions/User/TokenDisable.php
 create mode 100644 app/Actions/User/TokenReset.php
 create mode 100644 app/Contracts/Http/RuleSet.php
 create mode 100644 app/Http/Livewire/Forms/Settings/BooleanSetting.php
 create mode 100644 app/Http/Livewire/Forms/Settings/GetApiToken.php
 create mode 100644 app/Http/Livewire/Forms/Settings/SetLogin.php
 create mode 100644 app/Http/RuleSets/ChangeLoginRuleSet.php
 create mode 100644 resources/views/livewire/form/form-get-api-token.blade.php
 create mode 100644 resources/views/livewire/form/form-set-login.blade.php
 create mode 100644 resources/views/livewire/form/form-toggle.blade.php

diff --git a/app/Actions/User/TokenDisable.php b/app/Actions/User/TokenDisable.php
new file mode 100644
index 0000000000..74daba3e61
--- /dev/null
+++ b/app/Actions/User/TokenDisable.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Actions\User;
+
+use App\Exceptions\InvalidPropertyException;
+use App\Exceptions\ModelDBException;
+use App\Models\User;
+use Illuminate\Support\Facades\Auth;
+
+class TokenDisable
+{
+	/**
+	 * @throws InvalidPropertyException
+	 * @throws ModelDBException
+	 */
+	public function do(): User
+	{
+		/** @var User $user */
+		$user = Auth::user();
+		$user->token = null;
+		$user->save();
+
+		return $user;
+	}
+}
diff --git a/app/Actions/User/TokenReset.php b/app/Actions/User/TokenReset.php
new file mode 100644
index 0000000000..c84e86a444
--- /dev/null
+++ b/app/Actions/User/TokenReset.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Actions\User;
+
+use App\Exceptions\InvalidPropertyException;
+use App\Exceptions\ModelDBException;
+use App\Models\User;
+use Illuminate\Support\Facades\Auth;
+
+class TokenReset
+{
+	/**
+	 * @throws InvalidPropertyException
+	 * @throws ModelDBException
+	 */
+	public function do(): User
+	{
+		/** @var User $user */
+		$user = Auth::user();
+		$token = strtr(base64_encode(random_bytes(16)), '+/', '-_');
+		$user->token = hash('SHA512', $token);
+		$user->save();
+
+		return $user;
+	}
+}
diff --git a/app/Contracts/Http/RuleSet.php b/app/Contracts/Http/RuleSet.php
new file mode 100644
index 0000000000..bfddb03298
--- /dev/null
+++ b/app/Contracts/Http/RuleSet.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Contracts\Http;
+
+/**
+ * In order to avoid code duplication, we centralize the rule sets
+ * used during the validation of requests as they are used both
+ * in Livewire and in the Requests class.
+ */
+interface RuleSet
+{
+	/**
+	 * Return an array containing the rules to be applied to the request attributes
+	 *
+	 * @return array
+	 */
+	public static function rules(): array;
+
+	// TODO: Associate error message to above rules.
+}
diff --git a/app/Http/Controllers/Administration/UserController.php b/app/Http/Controllers/Administration/UserController.php
index 0e7778545f..2ada2c2061 100644
--- a/app/Http/Controllers/Administration/UserController.php
+++ b/app/Http/Controllers/Administration/UserController.php
@@ -3,6 +3,8 @@
 namespace App\Http\Controllers\Administration;
 
 use App\Actions\Settings\UpdateLogin;
+use App\Actions\User\TokenDisable;
+use App\Actions\User\TokenReset;
 use App\Contracts\Exceptions\InternalLycheeException;
 use App\Exceptions\Internal\FrameworkException;
 use App\Exceptions\ModelDBException;
@@ -93,15 +95,11 @@ public function getAuthenticatedUser(): ?User
 	 * @throws ModelDBException
 	 * @throws \Exception
 	 */
-	public function resetToken(ChangeTokenRequest $request): array
+	public function resetToken(ChangeTokenRequest $request, TokenReset $tokenReset): array
 	{
-		/** @var User $user */
-		$user = Auth::user();
-		$token = strtr(base64_encode(random_bytes(16)), '+/', '-_');
-		$user->token = hash('SHA512', $token);
-		$user->save();
+		$user = $tokenReset->do();
 
-		return ['token' => $token];
+		return ['token' => $user->token];
 	}
 
 	/**
@@ -112,11 +110,8 @@ public function resetToken(ChangeTokenRequest $request): array
 	 * @throws UnauthenticatedException
 	 * @throws ModelDBException
 	 */
-	public function unsetToken(ChangeTokenRequest $request): void
+	public function unsetToken(ChangeTokenRequest $request, TokenDisable $tokenDisable): void
 	{
-		/** @var User $user */
-		$user = Auth::user();
-		$user->token = null;
-		$user->save();
+		$tokenDisable->do();
 	}
 }
diff --git a/app/Http/Livewire/Components/Header.php b/app/Http/Livewire/Components/Header.php
index 08279266a4..37a4c0a0bc 100644
--- a/app/Http/Livewire/Components/Header.php
+++ b/app/Http/Livewire/Components/Header.php
@@ -49,4 +49,36 @@ public function openLoginModal(): void
 	{
 		$this->openModal('forms.login');
 	}
+
+	/**
+	 * Go back one step
+	 *
+	 * @return void
+	 */
+	public function back(): void
+	{
+		$this->emitTo('pages.gallery', 'back');
+	}
+
+	/**
+	 * Open the Left menu.
+	 *
+	 * @return void
+	 */
+	public function openLeftMenu(): void
+	{
+		$this->emitTo('components.left-menu', 'open');
+	}
+
+	/**
+	 * Toggle the side bar.
+	 *
+	 * @return void
+	 */
+	public function toggleSideBar(): void
+	{
+		$this->emitTo('components.sidebar', 'toggle');
+	}
+
+
 }
\ No newline at end of file
diff --git a/app/Http/Livewire/Forms/Settings/BooleanSetting.php b/app/Http/Livewire/Forms/Settings/BooleanSetting.php
new file mode 100644
index 0000000000..e10b84a15e
--- /dev/null
+++ b/app/Http/Livewire/Forms/Settings/BooleanSetting.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Livewire\Forms\Settings;
+
+use App\Facades\Lang;
+use App\Models\Configs;
+use Illuminate\Database\Eloquent\InvalidCastException;
+use Illuminate\Database\Eloquent\JsonEncodingException;
+use Livewire\Component;
+use RuntimeException;
+
+class BooleanSetting extends Component
+{
+	public Configs $config;
+	public string $description;
+	public string $footer;
+	public bool $flag; //! Wired
+
+	public function mount(string $description, string $name, string $footer = '') {
+		$this->description = Lang::get($description);
+		$this->footer = $footer !== '' ? Lang::get($footer) : '';
+		$this->config = Configs::where('key', '=', $name)->firstOrFail();
+	}
+
+	public function render()
+	{
+		$this->flag = $this->config->value === '1';
+		return view('livewire.form.form-toggle');
+	}
+
+	/**
+	 * This runs before a wired property is updated.
+	 *
+	 * @param mixed $field
+	 * @param mixed $value
+	 * @return void
+	 * @throws InvalidCastException
+	 * @throws JsonEncodingException
+	 * @throws RuntimeException
+	 */
+	public function updating($field, $value)
+	{
+		$this->config->value = $value === true ? '1' : '0';
+		$this->config->save();
+	}
+
+}
\ No newline at end of file
diff --git a/app/Http/Livewire/Forms/Settings/GetApiToken.php b/app/Http/Livewire/Forms/Settings/GetApiToken.php
new file mode 100644
index 0000000000..80ca05a615
--- /dev/null
+++ b/app/Http/Livewire/Forms/Settings/GetApiToken.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Http\Livewire\Forms\Settings;
+
+use App\Actions\User\TokenDisable;
+use App\Actions\User\TokenReset;
+use App\Http\Livewire\Traits\InteractWithModal;
+use App\Models\User;
+use App\Policies\UserPolicy;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+
+class GetApiToken extends Component
+{
+	use InteractWithModal;
+	use AuthorizesRequests;
+
+	// String of the token or message
+	public string $token = '';
+
+	// token is disabled
+	public bool $isDisabled;
+
+	// token is hidden
+	public bool $isHidden;
+
+	public function mount() {
+		$user = Auth::user();
+
+		$this->isDisabled = !$user->has_token;
+		$this->isHidden = true;
+	}
+
+	public function render()
+	{
+		return view('livewire.form.form-get-api-token');
+	}
+
+	/**
+	 * Add an handle to close the modal form from a user-land call.
+	 *
+	 * @return void
+	 */
+	public function close(): void
+	{
+		$this->closeModal();
+	}
+
+	public function resetToken(TokenReset $tokenReset) {
+		/**
+		 * Authorize the request
+		 */
+		$this->authorize(UserPolicy::CAN_EDIT, [User::class]);
+
+		$this->token = $tokenReset->do()->token;
+		$this->isDisabled = false;
+		$this->isHidden = false;
+	}
+
+	public function disableToken(TokenDisable $tokenDisable) {
+		/**
+		 * Authorize the request
+		 */
+		$this->authorize(UserPolicy::CAN_EDIT, [User::class]);
+
+		$tokenDisable->do();
+		$this->token = '';
+		$this->isDisabled = true;
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Livewire/Forms/Settings/SetLogin.php b/app/Http/Livewire/Forms/Settings/SetLogin.php
new file mode 100644
index 0000000000..5fca6d9553
--- /dev/null
+++ b/app/Http/Livewire/Forms/Settings/SetLogin.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Http\Livewire\Forms\Settings;
+
+use App\Actions\Settings\UpdateLogin;
+use App\Http\Livewire\Traits\InteractWithModal;
+use App\Http\RuleSets\ChangeLoginRuleSet;
+use App\Models\User;
+use App\Policies\UserPolicy;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+
+/**
+ * Because Livewire is sending the data to the client,
+ * we do not provide the model as public property.
+ */
+class SetLogin extends Component
+{
+	use InteractWithModal;
+    use AuthorizesRequests;
+
+	public string $oldPassword = ''; //! wired
+	public string $username = ''; //! wired
+	public string $password = ''; //! wired
+	public string $confirm = ''; //! wired
+
+	public function render()
+	{
+		return view('livewire.form.form-set-login');
+	}
+
+	/**
+	 * Update Username & Password of current user
+	 */
+	public function submit(UpdateLogin $updateLogin) {
+
+		/**
+		 * For the validation to work it is important that the above wired property match
+		 * the keys in the rules applied
+		 */
+		$this->validate(ChangeLoginRuleSet::rules());
+
+		/**
+		 * Authorize the request
+		 */
+		$this->authorize(UserPolicy::CAN_EDIT, [User::class]);
+
+		$currentUser = $updateLogin->do(
+			$this->username,
+			$this->password,
+			$this->oldPassword,
+			request()->ip()
+		);
+
+		// Update the session with the new credentials of the user.
+		// Otherwise, the session is out-of-sync and falsely assumes the user
+		// to be unauthenticated upon the next request.
+		Auth::login($currentUser);
+	}
+
+
+	/**
+	 * Open a login modal box.
+	 *
+	 * @return void
+	 */
+	public function openApiTokenModal(): void
+	{
+		$this->openModal('forms.settings.get-api-token');
+	}
+
+}
\ No newline at end of file
diff --git a/app/Http/Livewire/Index.php b/app/Http/Livewire/Index.php
index c253809e95..101d34a7b4 100644
--- a/app/Http/Livewire/Index.php
+++ b/app/Http/Livewire/Index.php
@@ -22,7 +22,6 @@ class Index extends Component
 
 	// listeners of click events
 	protected $listeners = [
-		'openLeftMenu',
 		'openPage',
 		'reloadPage',
 	];
@@ -81,16 +80,6 @@ private function getLayout(): array
 		];
 	}
 
-	/**
-	 * Open the Left menu.
-	 *
-	 * @return void
-	 */
-	public function openLeftMenu(): void
-	{
-		$this->emitTo('components.left-menu', 'open');
-	}
-
 	/**
 	 * Open page.
 	 *
@@ -104,7 +93,7 @@ public function openPage(string $page): void
 
 		// update URL
 		$this->emitUrlChange($this->mode, $this->albumId ?? '', $this->photoId ?? '');
-
+		// $this->render();
 	}
 
 	/*
diff --git a/app/Http/Livewire/Pages/Gallery.php b/app/Http/Livewire/Pages/Gallery.php
index d055e081d7..64ac12264d 100644
--- a/app/Http/Livewire/Pages/Gallery.php
+++ b/app/Http/Livewire/Pages/Gallery.php
@@ -172,7 +172,7 @@ public function openAlbum(string $albumId)
 	{
 		$this->albumId = $albumId;
 		$this->load();
-		$this->emitUrlChange(PageMode::GALLERY, $this->albumId, $this->photoId);
+		$this->emitUrlChange(PageMode::GALLERY, $this->albumId, $this->photoId ?? '');
 	}
 
 	/**
@@ -209,14 +209,4 @@ public function back()
 		// This ensures that the history has been updated
 		$this->emitUrlChange(PageMode::GALLERY, $this->albumId ?? '', $this->photoId ?? '');
 	}
-
-	/**
-	 * Toggle the side bar.
-	 *
-	 * @return void
-	 */
-	public function toggleSideBar(): void
-	{
-		$this->emitTo('components.sidebar', 'toggle');
-	}
 }
diff --git a/app/Http/Requests/User/ChangeLoginRequest.php b/app/Http/Requests/User/ChangeLoginRequest.php
index 6b77029187..7c9df5d2c2 100644
--- a/app/Http/Requests/User/ChangeLoginRequest.php
+++ b/app/Http/Requests/User/ChangeLoginRequest.php
@@ -6,10 +6,9 @@
 use App\Contracts\Http\Requests\RequestAttribute;
 use App\Http\Requests\BaseApiRequest;
 use App\Http\Requests\Traits\HasPasswordTrait;
+use App\Http\RuleSets\ChangeLoginRuleSet;
 use App\Models\User;
 use App\Policies\UserPolicy;
-use App\Rules\PasswordRule;
-use App\Rules\UsernameRule;
 use Illuminate\Support\Facades\Gate;
 
 class ChangeLoginRequest extends BaseApiRequest implements HasPassword
@@ -32,11 +31,7 @@ public function authorize(): bool
 	 */
 	public function rules(): array
 	{
-		return [
-			RequestAttribute::USERNAME_ATTRIBUTE => ['sometimes', new UsernameRule(true)],
-			RequestAttribute::PASSWORD_ATTRIBUTE => ['required', new PasswordRule(false)],
-			RequestAttribute::OLD_PASSWORD_ATTRIBUTE => ['required', new PasswordRule(false)],
-		];
+		return ChangeLoginRuleSet::rules();
 	}
 
 	/**
diff --git a/app/Http/RuleSets/ChangeLoginRuleSet.php b/app/Http/RuleSets/ChangeLoginRuleSet.php
new file mode 100644
index 0000000000..d624bdc959
--- /dev/null
+++ b/app/Http/RuleSets/ChangeLoginRuleSet.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\RuleSets;
+
+use App\Contracts\Http\Requests\RequestAttribute;
+use App\Contracts\Http\RuleSet;
+use App\Rules\PasswordRule;
+use App\Rules\UsernameRule;
+
+class ChangeLoginRuleSet implements RuleSet
+{
+	public static function rules(): array
+	{
+		return [
+			RequestAttribute::USERNAME_ATTRIBUTE => ['sometimes', new UsernameRule(true)],
+			RequestAttribute::PASSWORD_ATTRIBUTE => ['required', new PasswordRule(false)],
+			RequestAttribute::OLD_PASSWORD_ATTRIBUTE => ['required', new PasswordRule(false)],
+		];
+	}
+}
diff --git a/resources/views/layouts/livewire.blade.php b/resources/views/layouts/livewire.blade.php
index 50404e89d1..396bde0a85 100644
--- a/resources/views/layouts/livewire.blade.php
+++ b/resources/views/layouts/livewire.blade.php
@@ -2,10 +2,10 @@
 <html lang="{{ str_replace('_', '-', Lang::get_code()) }}">
 	<head>
 		<meta charset="UTF-8">
-		<link rel="shortcut icon" href="favicon.ico">
-		<link rel="apple-touch-icon" href="img/apple-touch-icon-ipad.png" sizes="120x120">
-		<link rel="apple-touch-icon" href="img/apple-touch-icon-iphone.png" sizes="152x152">
-		<link rel="apple-touch-icon" href="img/apple-touch-icon-iphone-plus.png" sizes="180x180">
+		<link rel="shortcut icon" href="{{ URL::asset('favicon.ico') }}">
+		<link rel="apple-touch-icon" href="{{ URL::asset('img/apple-touch-icon-ipad.png') }}" sizes="120x120">
+		<link rel="apple-touch-icon" href="{{ URL::asset('img/apple-touch-icon-iphone.png') }}" sizes="152x152">
+		<link rel="apple-touch-icon" href="{{ URL::asset('img/apple-touch-icon-iphone-plus.png') }}" sizes="180x180">
 		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=4.0, user-scalable=yes">
 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 		<meta name="apple-mobile-web-app-capable" content="yes">
diff --git a/resources/views/livewire/components/header.blade.php b/resources/views/livewire/components/header.blade.php
index 21399e3546..16694383ff 100644
--- a/resources/views/livewire/components/header.blade.php
+++ b/resources/views/livewire/components/header.blade.php
@@ -5,83 +5,81 @@
 	@if ($gallery_mode === App\Enum\Livewire\GalleryMode::ALBUMS) <!-- ALBUMS -->
 		@if (Auth::user() === null) <!-- NOT LOGGED -->
 		<div id="lychee_toolbar_public" class="toolbar visible">
-			<a class="button" wire:click="openLoginModal" id="button_settings"><x-icons.iconic icon="account-login" />
-				{{-- <svg class="iconic"><use xlink:href="#account-login" /></svg> --}}
-			</a>
+			<a class="button" wire:click="openLoginModal" id="button_settings"><x-icons.iconic icon="account-login" /></a>
 			<a class="header__title">{{ $title }}</a>
 			<div class="header__search__field">
 				<input class="header__search" type="text" name="search" placeholder="Search …">
 				<a class="header__clear">&times;</a>
 			</div>
-			<a class="button button--map-albums"><svg class="iconic"><use xlink:href="#map" /></svg></a>
+			<a class="button button--map-albums"><x-icons.iconic icon="map" /></a>
 		</div>
 		@else <!-- LOGGED -->
 		<div id="lychee_toolbar_albums" class="toolbar visible">
-			<a class="button" wire:click="$emitTo('pages.gallery','openLeftMenu')" id="button_settings"><svg class="iconic"><use xlink:href="#cog" /></svg></a>
+			<a class="button" wire:click="openLeftMenu" id="button_settings"><x-icons.iconic icon="cog" /></a>
 			<a class="header__title">{{ $title }}</a>
 			<div class="header__search__field">
 				<input class="header__search" type="text" name="search" placeholder="Search …">
 				<a class="header__clear">&times;</a>
 			</div>
 			<a class="header__divider"></a>
-			{{-- <a class="button button--map-albums"><svg class="iconic"><use xlink:href="#map" /></svg></a> --}}
+			{{-- <a class="button button--map-albums"><x-icons.iconic icon="map" /></a> --}}
 			@can(App\Policies\AlbumPolicy::CAN_UPLOAD, [App\Contracts\Models\AbstractAlbum::class, null])
-				<a class="button button_add"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
+				<a class="button button_add"><x-icons.iconic icon="plus" /></a>
 			@endcan
 		</div>
 		@endif
 	@elseif ($gallery_mode === App\Enum\Livewire\GalleryMode::ALBUM) <!-- ALBUM -->
 		<div id="lychee_toolbar_album" class="toolbar visible">
-			<a class="button" id="button_back_home" title="Close Album" wire:click="$emitTo('pages.gallery','back')"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
+			<a class="button" id="button_back_home" title="Close Album" wire:click="back"><x-icons.iconic icon="chevron-left" /></a>
 			<a class="header__title">{{ $title }}</a>
-			<a class="button button--eye" id="button_visibility_album"><svg class="iconic iconic--eye"><use xlink:href="#eye" /></svg></a>
+			<a class="button button--eye" id="button_visibility_album"><x-icons.iconic class="iconic--eye" icon="eye" /></a>
 			@can(App\Policies\AlbumPolicy::CAN_SHARE_WITH_USERS, [App\Contracts\Models\AbstractAlbum::class, $this->album])
-			<a class="button" id="button_sharing_album_users"><svg class="iconic"><use xlink:href="#people" /></svg></a>
+			<a class="button" id="button_sharing_album_users"><x-icons.iconic icon="people" /></a>
 			@endcan
 			@can(App\Policies\AlbumPolicy::CAN_EDIT, [App\Contracts\Models\AbstractAlbum::class, $this->album])
-			<a class="button button--nsfw" id="button_nsfw_album"><svg class="iconic"><use xlink:href="#warning" /></svg></a>
+			<a class="button button--nsfw" id="button_nsfw_album"><x-icons.iconic icon="warning" /></a>
 			@endcan
-			<a class="button button--share" id="button_share_album"><svg class="iconic ionicons"><use xlink:href="#share-ion" /></svg></a>
+			<a class="button button--share" id="button_share_album"><x-icons.iconic class="ionicons" icon="share-ion" /></a>
 			@can(App\Policies\AlbumPolicy::CAN_DOWNLOAD, [App\Contracts\Models\AbstractAlbum::class, $this->album])
-			<a class="button" id="button_archive"><svg class="iconic"><use xlink:href="#cloud-download" /></svg></a>
+			<a class="button" id="button_archive"><x-icons.iconic icon="cloud-download" /></a>
 			@endcan
-			<a class="button button--info" id="button_info_album"><svg class="iconic"><use xlink:href="#info" /></svg></a>
-			<a class="button button--map" id="button_map_album"><svg class="iconic"><use xlink:href="#map" /></svg></a>
+			<a class="button button--info" id="button_info_album"><x-icons.iconic icon="info" /></a>
+			<a class="button button--map" id="button_map_album"><x-icons.iconic icon="map" /></a>
 			@can(App\Policies\AlbumPolicy::CAN_EDIT, [App\Contracts\Models\AbstractAlbum::class, $this->album])
-			<a class="button" id="button_move_album"><svg class="iconic"><use xlink:href="#folder" /></svg></a>
-			<a class="button" id="button_trash_album"><svg class="iconic"><use xlink:href="#trash" /></svg></a>
+			<a class="button" id="button_move_album"><x-icons.iconic icon="folder" /></a>
+			<a class="button" id="button_trash_album"><x-icons.iconic icon="trash" /></a>
 			@endcan
-			<a class="button" id="button_fs_album_enter"><svg class="iconic"><use xlink:href="#fullscreen-enter" /></svg></a>
-			<a class="button" id="button_fs_album_exit"><svg class="iconic"><use xlink:href="#fullscreen-exit" /></svg></a>
+			<a class="button" id="button_fs_album_enter"><x-icons.iconic icon="fullscreen-enter" /></a>
+			<a class="button" id="button_fs_album_exit"><x-icons.iconic icon="fullscreen-exit" /></a>
 			<a class="header__divider"></a>
-			<a class="button button_add"><svg class="iconic"><use xlink:href="#plus" /></svg></a>
+			<a class="button button_add"><x-icons.iconic icon="plus" /></a>
 		</div>
 	@elseif ($gallery_mode === App\Enum\Livewire\GalleryMode::PHOTO) <!-- PHOTO -->
 		<div id="lychee_toolbar_photo" class="toolbar visible">
-			<a class="button" id="button_back" wire:click="$emitTo('pages.gallery','back')"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
+			<a class="button" id="button_back" wire:click="back"><x-icons.iconic icon="chevron-left" /></a>
 			<a class="header__title"></a>
-			<a class="button button--star" id="button_star"><svg class="iconic"><use xlink:href="#star" /></svg></a>
-			<a class="button button--eye" id="button_visibility"><svg class="iconic"><use xlink:href="#eye" /></svg></a>
-			<a class="button button--rotate" id="button_rotate_ccwise"><svg class="iconic"><use xlink:href="#counterclockwise" /></svg></a>
-			<a class="button button--rotate" id="button_rotate_cwise"><svg class="iconic"><use xlink:href="#clockwise" /></svg></a>
-			<a class="button button--share" id="button_share"><svg class="iconic ionicons"><use xlink:href="#share-ion" /></svg></a>
-			<a class="button button--info" id="button_info"><svg class="iconic"><use xlink:href="#info" /></svg></a>
-			<a class="button button--map" id="button_map"><svg class="iconic"><use xlink:href="#map" /></svg></a>
-			<a class="button" id="button_move"><svg class="iconic"><use xlink:href="#folder" /></svg></a>
-			<a class="button" id="button_trash"><svg class="iconic"><use xlink:href="#trash" /></svg></a>
-			<a class="button" id="button_fs_enter"><svg class="iconic"><use xlink:href="#fullscreen-enter" /></svg></a>
-			<a class="button" id="button_fs_exit"><svg class="iconic"><use xlink:href="#fullscreen-exit" /></svg></a>
+			<a class="button button--star" id="button_star"><x-icons.iconic icon="star" /></a>
+			<a class="button button--eye" id="button_visibility"><x-icons.iconic icon="eye" /></a>
+			<a class="button button--rotate" id="button_rotate_ccwise"><x-icons.iconic icon="counterclockwise" /></a>
+			<a class="button button--rotate" id="button_rotate_cwise"><x-icons.iconic icon="clockwise" /></a>
+			<a class="button button--share" id="button_share"><x-icons.iconic class='ionicons' icon="share-ion" /></a>
+			<a class="button button--info" id="button_info"><x-icons.iconic icon="info" /></a>
+			<a class="button button--map" id="button_map"><x-icons.iconic icon="map" /></a>
+			<a class="button" id="button_move"><x-icons.iconic icon="folder" /></a>
+			<a class="button" id="button_trash"><x-icons.iconic icon="trash" /></a>
+			<a class="button" id="button_fs_enter"><x-icons.iconic icon="fullscreen-enter" /></a>
+			<a class="button" id="button_fs_exit"><x-icons.iconic icon="fullscreen-exit" /></a>
 			<a class="header__divider"></a>
-			<a class="button" id="button_more"><svg class="iconic"><use xlink:href="#ellipses" /></svg></a>
+			<a class="button" id="button_more"><x-icons.iconic icon="ellipses" /></a>
 		</div>
 	@elseif ($gallery_mode === App\Enum\Livewire\GalleryMode::MAP) <!-- MAP -->
 		<div id="lychee_toolbar_map" class="toolbar visible">
-			<a class="button" id="button_back_map"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
+			<a class="button" id="button_back_map"><x-icons.iconic icon="chevron-left" /></a>
 			<a class="header__title"></a>
 		</div>
 	@elseif ($page_mode === App\Enum\Livewire\PageMode::SETTINGS) <!-- SETTINGS -->
 		<div id="lychee_toolbar_config" class="toolbar visible">
-			<a class="button" id="button_close_config"><svg class="iconic"><use xlink:href="#chevron-left" /></svg></a>
+			<a class="button" id="button_close_config"><x-icons.iconic icon="chevron-left" /></a>
 			<a class="header__title">{{ $title }}</a>
 		</div>
 	@endif
diff --git a/resources/views/livewire/form/form-get-api-token.blade.php b/resources/views/livewire/form/form-get-api-token.blade.php
new file mode 100644
index 0000000000..0acd88d52a
--- /dev/null
+++ b/resources/views/livewire/form/form-get-api-token.blade.php
@@ -0,0 +1,56 @@
+<div>
+	<div class="basicModal__content">
+		<form class="token">
+			<div class="input-group stacked">
+				<label for="token-dialog-token">Token</label>
+				<input id="token-dialog-token"
+					@if($isDisabled)
+						{{-- token is completely disabled --}}
+						value="{{ Lang::get('DISABLED_TOKEN_STATUS_MSG') }}"
+						disabled="disabled"
+					@elseif($isHidden)
+						value="{{ Lang::get('TOKEN_NOT_AVAILABLE') }}"
+						disabled="disabled"
+					@else
+						value="{{ $token }}"
+					@endif
+					type="text"
+					readonly="readonly"
+					placeholder="{{ Lang::get("TOKEN_WAIT") }}"
+					 />
+
+				<div class="button-group">
+					<a id="button_reset_token"
+						class='button'
+						title='{{ Lang::get('RESET') }}'
+						wire:click='resetToken'
+						>
+						<x-icons.iconic class='ionicons' icon='reload' />
+					</a>
+					<a id="button_copy_token"
+						class='button'
+						title='{{ Lang::get('URL_COPY_TO_CLIPBOARD') }}'
+						@if($isDisabled || $isHidden)
+						style='display:none;'
+						@endif
+						>
+						<x-icons.iconic class='ionicons' icon='copy' />
+					</a>
+					<a id="button_disable_token"
+						class='button'
+						tile='{{ Lang::get('DISABLE_TOKEN_TOOLTIP') }}'
+						wire:click='disableToken'
+						@if($isDisabled)
+						style='display:none;'
+						@endif
+						>
+						<x-icons.iconic class='ionicons' icon='ban' />
+					</a>
+				</div>
+			</div>
+		</form>
+	</div>
+	<div class="basicModal__buttons">
+		<a id="basicModal__cancel" class="basicModal__button" data-tabindex="{{ Helpers::data_index() }}" wire:click="close">{{ Lang::get('CANCEL') }}</a>
+	</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/form/form-login.blade.php b/resources/views/livewire/form/form-login.blade.php
index f2ab96b622..4723325ced 100644
--- a/resources/views/livewire/form/form-login.blade.php
+++ b/resources/views/livewire/form/form-login.blade.php
@@ -1,36 +1,34 @@
-<div class="basicModalContainer basicModalContainer--fadeIn" data-closable="true">
-	<div class="basicModal basicModal--fadeIn login" role="dialog">
-		<div class="basicModal__content">
-			@if($errors->has('wrongLogin'))
-				<span syle="color:red; font-weight:bold;">{{ $errors->first('wrongLogin') }}</span>
+<div>
+	<div class="basicModal__content">
+		@if($errors->has('wrongLogin'))
+			<span syle="color:red; font-weight:bold;">{{ $errors->first('wrongLogin') }}</span>
+		@endif
+		<form class="force-first-child">
+			<div class="input-group stacked">
+				<input class="text" autocomplete="on" type="text" placeholder="{{ Lang::get('USERNAME') }}" autocapitalize="off" data-tabindex="{{ Helpers::data_index() }}" wire:model="form.username">
+			</div>
+			<div class="input-group stacked">
+				<input class="text" autocomplete="current-password" type="password" placeholder="{{ Lang::get('PASSWORD') }}" data-tabindex="{{ Helpers::data_index() }}" wire:model="form.password">
+			</div>
+		</form>
+		<p class="version">
+			Lychee
+			@if($show_version)
+			<span class="version-number">4.7.0</span>
 			@endif
-			<form class="force-first-child">
-				<div class="input-group stacked">
-					<input class="text" name="username" autocomplete="on" type="text" placeholder="{{ Lang::get('USERNAME') }}" autocapitalize="off" data-tabindex="{{ Helpers::data_index() }}" wire:model="form.username">
-				</div>
-				<div class="input-group stacked">
-					<input class="text" name="password" autocomplete="current-password" type="password" placeholder="{{ Lang::get('PASSWORD') }}" data-tabindex="{{ Helpers::data_index() }}" wire:model="form.password">
-				</div>
-			</form>
-			<p class="version">
-				Lychee
-				@if($show_version)
-				<span class="version-number">4.7.0</span>
-				@endif
-				@if($is_new_release_available)
-				<span class="update-status up-to-date-release">
-					– <a target="_blank" href="https://github.com/LycheeOrg/Lychee/releases" data-tabindex="-1">Update available!</a>
-				</span>
-				@elseif($is_git_update_available)
-				<span class="update-status up-to-date-git">
-					– <a target="_blank" href="https://github.com/LycheeOrg/Lychee" data-tabindex="-1">Update available!</a>
-				</span>
-				@endif
-			</p>
-		</div>
-		<div class="basicModal__buttons">
-			<a id="basicModal__cancel" class="basicModal__button" data-tabindex="{{ Helpers::data_index() }}" wire:click="close">{{ $cancel }}</a>
-			<a id="basicModal__action" class="basicModal__button" data-tabindex="{{ Helpers::data_index() }}" wire:click="submit">{{ $validate }}</a>
-		</div>
+			@if($is_new_release_available)
+			<span class="update-status up-to-date-release">
+				– <a target="_blank" href="https://github.com/LycheeOrg/Lychee/releases" data-tabindex="-1">Update available!</a>
+			</span>
+			@elseif($is_git_update_available)
+			<span class="update-status up-to-date-git">
+				– <a target="_blank" href="https://github.com/LycheeOrg/Lychee" data-tabindex="-1">Update available!</a>
+			</span>
+			@endif
+		</p>
+	</div>
+	<div class="basicModal__buttons">
+		<a id="basicModal__cancel" class="basicModal__button" data-tabindex="{{ Helpers::data_index() }}" wire:click="close">{{ $cancel }}</a>
+		<a id="basicModal__action" class="basicModal__button" data-tabindex="{{ Helpers::data_index() }}" wire:click="submit">{{ $validate }}</a>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/livewire/form/form-set-login.blade.php b/resources/views/livewire/form/form-set-login.blade.php
new file mode 100644
index 0000000000..cfed51ab22
--- /dev/null
+++ b/resources/views/livewire/form/form-set-login.blade.php
@@ -0,0 +1,18 @@
+<div class="setLogin">
+	<form>
+		<p>
+			{{ Lang::get('PASSWORD_TITLE') }}
+			<input wire:model="oldPassword" class="text" type="password" placeholder="{{ Lang::get('PASSWORD_CURRENT') }}">
+		</p>
+		<p>
+			{{ Lang::get('PASSWORD_TEXT') }}
+			<input wire:model="username" class="text" type="text" placeholder="{{ Lang::get('LOGIN_USERNAME') }}">
+			<input wire:model="password" class="text" type="password" placeholder="{{ Lang::get('LOGIN_PASSWORD') }}">
+			<input wire:model="confirm" class="text" type="password" placeholder="{{ Lang::get('LOGIN_PASSWORD_CONFIRM') }}">
+		</p>
+		<div class="basicModal__buttons">
+			<a id="basicModal__action_password_change" class="basicModal__button " wire:click="submit">{{ Lang::get('PASSWORD_CHANGE') }}</a>
+			<a id="basicModal__action_token" class="basicModal__button " wire:click="openApiTokenModal">{{ Lang::get('TOKEN_BUTTON') }}</a>
+		</div>
+	</form>
+</div>
diff --git a/resources/views/livewire/form/form-toggle.blade.php b/resources/views/livewire/form/form-toggle.blade.php
new file mode 100644
index 0000000000..d79ff2888e
--- /dev/null
+++ b/resources/views/livewire/form/form-toggle.blade.php
@@ -0,0 +1,14 @@
+<div>
+	<p>
+		{{ $description }}
+		<label class="switch">
+			<input wire:model="flag" type="checkbox">
+			<span class="slider round"></span>
+		</label>
+	</p>
+	@if($footer !== '')
+	<p>
+		{{ $footer }}
+	</p>
+	@endif
+</div>
diff --git a/resources/views/livewire/form/form.blade.php b/resources/views/livewire/form/form.blade.php
index a436eb1bde..0edf30873c 100644
--- a/resources/views/livewire/form/form.blade.php
+++ b/resources/views/livewire/form/form.blade.php
@@ -10,7 +10,7 @@
 				<div class="input-group stacked">
 				@if (is_string($f))
 					{{-- Work in Progess, will probably evolve --}}
-					<input class="text" name="{{ $f }}" autocomplete="on" type="text" placeholder="{{ Lang::get($formLocale['form.'.$f]) }}" autocapitalize="off" data-tabindex="{{ Helpers::data_index() }}" wire:model="form.{{ $f }}">
+					<input class="text" autocomplete="on" type="text" placeholder="{{ Lang::get($formLocale['form.'.$f]) }}" autocapitalize="off" data-tabindex="{{ Helpers::data_index() }}" wire:model="form.{{ $f }}">
 				@else
 					{{ $f }} not supported yet.
 				@endif
diff --git a/resources/views/livewire/index.blade.php b/resources/views/livewire/index.blade.php
index b3b4c78dc6..239f7899c2 100644
--- a/resources/views/livewire/index.blade.php
+++ b/resources/views/livewire/index.blade.php
@@ -4,11 +4,10 @@
 	<livewire:components.left-menu>
 
 	@if($mode === App\Enum\Livewire\PageMode::GALLERY)
-	<livewire:pages.gallery albumId="{{$this->albumId}}" photoId="{{$this->photoId}}" />
+	<livewire:pages.gallery albumId="{{$this->albumId}}" photoId="{{$this->photoId}}" key="gallery-{{ now() }}" />
 	@elseif($mode === App\Enum\Livewire\PageMode::SETTINGS)
 	<livewire:pages.settings />
 	@else
 		DO NOTHING FOR NOW;
 	@endif
-	{{-- @include('includes.footer') --}}
 </div>
diff --git a/resources/views/livewire/pages/gallery.blade.php b/resources/views/livewire/pages/gallery.blade.php
index f8b7abdf8c..57c00f6c0e 100644
--- a/resources/views/livewire/pages/gallery.blade.php
+++ b/resources/views/livewire/pages/gallery.blade.php
@@ -1,6 +1,6 @@
 <div class="hflex-item-stretch vflex-container">
 	<!-- toolbar -->
-	<livewire:components.header key="header-{{ now() }}" :gallery_mode="$mode" :title="$this->title" :album="$this->album" />
+	<livewire:components.header key="header-{{$this->albumId}}-{{$this->photoId ?? ''}}" :gallery_mode="$mode" :title="$this->title" :album="$this->album" />
 	<!--
 		This container vertically shares space with the toolbar.
 		It fills the remaining vertical space not taken by the toolbar.
@@ -28,7 +28,7 @@
 				Do not that those need to not colide with other components, as a result we use prefix-id-time
 				strings to avoid such problems.
 			-->
-			<livewire:modules.album key="view-{{$this->albumId}}-{{ now() }}" :album="$this->album" />
+			<livewire:modules.album key="view-album-{{$this->albumId}}" :album="$this->album" />
 			@elseif($mode === App\Enum\Livewire\GalleryMode::MAP)
 			<!--
 				For now
@@ -43,7 +43,7 @@
 			Do not that those need to not colide with other components, as a result we use prefix-id-time
 			strings to avoid such problems.
 		-->
-		<livewire:modules.photo key="view-{{$this->photoId}}-{{ now() }}" :album="$this->album" :photo="$this->photo" />
+		<livewire:modules.photo key="view-photo-{{$this->photoId}}" :album="$this->album" :photo="$this->photo" />
 		@endif
 	</div>
 	<!-- SIDE BARS --->
@@ -53,14 +53,14 @@
 		Do not that those need to not colide with other components, as a result we use prefix-id-time
 		strings to avoid such problems.
 	-->
-	<livewire:components.sidebar key="sidebar-{{$this->albumId}}-{{ now() }}" :album="$this->album"/>
+	<livewire:components.sidebar key="sidebar-album-{{$this->albumId}}" :album="$this->album"/>
 	@elseif($mode === App\Enum\Livewire\GalleryMode::PHOTO)
 		<!--
 			The key="..." attribute ensure that we are triggering a refresh of the child component on reload.
 			Do not that those need to not colide with other components, as a result we use prefix-id-time
 			strings to avoid such problems.
 		-->
-		<livewire:components.sidebar key="sidebar-{{$this->photoId}}-{{ now() }}" :album="$this->album" :photo="$this->photo" />
+		<livewire:components.sidebar key="sidebar-photo-{{$this->photoId}}" :album="$this->album" :photo="$this->photo" />
 	@endif
 	<livewire:components.base.modal />
 </div>
diff --git a/resources/views/livewire/pages/settings.blade.php b/resources/views/livewire/pages/settings.blade.php
index 010c4c3326..3ecb328c24 100644
--- a/resources/views/livewire/pages/settings.blade.php
+++ b/resources/views/livewire/pages/settings.blade.php
@@ -27,25 +27,7 @@
 				-->
 				<div id="lychee_view_content" class="vflex-item-stretch contentZoomIn"><div class="settings_view">
 
-					<div class="setLogin">
-						<form>
-							<p>
-								Enter your current password:
-								<input name="oldPassword" class="text" type="password" placeholder="Current Password" value="">
-							</p>
-							<p>
-								Your credentials will be changed to the following:
-								<input name="username" class="text" type="text" placeholder="New Username" value="">
-								<input name="password" class="text" type="password" placeholder="New Password" value="">
-								<input name="confirm" class="text" type="password" placeholder="Confirm Password" value="">
-							</p>
-							<div class="basicModal__buttons">
-								<!--<a id="basicModal__cancel" class="basicModal__button ">Cancel</a>-->
-								<a id="basicModal__action_password_change" class="basicModal__button ">Change Login</a>
-								<a id="basicModal__action_token" class="basicModal__button ">API Token ...</a>
-							</div>
-						</form>
-					</div>
+					<livewire:forms.settings.set-login />
 
 					<div class="setSorting">
 						<p>
@@ -191,16 +173,7 @@
 							<a id="basicModal__action_set_layout" class="basicModal__button">Change layout</a>
 						</div>
 					</div>
-
-					<div class="setPublicSearch">
-						<p>
-							Public search allowed:
-							<label class="switch">
-								<input id="PublicSearch" type="checkbox" name="public_search">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
+					<livewire:forms.settings.boolean-setting key="set-public_search" description="PUBLIC_SEARCH_TEXT" name="public_search" />
 
 					<div class="setAlbumDecoration">
 						<p>
@@ -248,25 +221,14 @@
 						</div>
 					</div>
 
-					<div class="setMapDisplay">
-						<p>
-							Enable maps (provided by OpenStreetMap):
-							<label class="switch">
-								<input id="MapDisplay" type="checkbox" name="map_display">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
-
-					<div class="setMapDisplayPublic">
-						<p>
-							Enable maps for public albums (provided by OpenStreetMap):
-							<label class="switch">
-								<input id="MapDisplayPublic" type="checkbox" name="map_display_public">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
+					<livewire:forms.settings.boolean-setting
+						key="set-map_display"
+						description="MAP_DISPLAY_TEXT"
+						name="map_display" />
+					<livewire:forms.settings.boolean-setting
+						key="set-map_display_public"
+						description="MAP_DISPLAY_PUBLIC_TEXT"
+						name="map_display_public" />
 
 					<div class="setMapProvider">
 						<p>
@@ -286,68 +248,35 @@
 						</div>
 					</div>
 
-					<div class="setMapIncludeSubAlbums">
-						<p>
-							Include photos of subalbums on map:
-							<label class="switch">
-								<input id="MapIncludeSubAlbums" type="checkbox" name="map_include_subalbums">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
-
-					<div class="setLocationDecoding">
-						<p>
-							Decode GPS data into location name
-							<label class="switch">
-								<input id="LocationDecoding" type="checkbox" name="location_decoding">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
-
-					<div class="setLocationShow">
-						<p>
-							Show location name
-							<label class="switch">
-								<input id="LocationShow" type="checkbox" name="location_show">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
-
-					<div class="setLocationShowPublic">
-						<p>
-							Show location name for public mode
-							<label class="switch">
-								<input id="LocationShowPublic" type="checkbox" name="location_show_public">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
-
-					<div class="setNSFWVisible">
-						<p>
-							Make Sensitive albums visible by default.
-							<label class="switch">
-								<input id="NSFWVisible" type="checkbox" name="nsfw_visible">
-								<span class="slider round"></span>
-							</label>
-						</p>
-						<p>
-							If the album is public, it is still accessible, just hidden from the view and <b>can be revealed by pressing <kbd>H</kbd></b>.
-						</p>
-					</div>
-
-					<div class="setNewPhotosNotification">
-						<p>
-							Send new photos notification emails.
-							<label class="switch">
-								<input id="NewPhotosNotification" type="checkbox" name="new_photos_notification">
-								<span class="slider round"></span>
-							</label>
-						</p>
-					</div>
+					<livewire:forms.settings.boolean-setting
+						key="set-map_include_subalbums"
+						description="MAP_INCLUDE_SUBALBUMS_TEXT"
+						name="map_include_subalbums" />
+					<livewire:forms.settings.boolean-setting
+						key="set-location_decoding"
+						description="LOCATION_DECODING"
+						name="location_decoding" />
+					<livewire:forms.settings.boolean-setting
+						key="set-location_show"
+						description="LOCATION_SHOW"
+						name="location_show" />
+					<livewire:forms.settings.boolean-setting
+						key="set-location_show_public"
+						description="LOCATION_SHOW_PUBLIC"
+						name="location_show_public" />
+					<livewire:forms.settings.boolean-setting
+						key="set-location_show_public"
+						description="LOCATION_SHOW_PUBLIC"
+						name="location_show_public" />
+					<livewire:forms.settings.boolean-setting
+						key="set-nsfw_visible"
+						description="NSFW_VISIBLE_TEXT_1"
+						name="nsfw_visible"
+						footer="NSFW_VISIBLE_TEXT_2"/>
+					<livewire:forms.settings.boolean-setting
+						key="set-new_photos_notification"
+						description="NEW_PHOTOS_NOTIFICATION"
+						name="new_photos_notification" />
 
 					<div class="setCSS">
 						<p>
@@ -370,4 +299,5 @@
 
 		</div>
 	</div>
+	<livewire:components.base.modal />
 </div>
\ No newline at end of file