app/views/settings.php

@@ -19,16 +19,20 @@ $nestedPrefix = 'config';
 <form action="<?= $url->generate('settings-post') ?>" method="POST">
 	<main class='form'>
 		<button type="submit">Save Changes</button>
-		<br />
+		<div class="tabs">
+			<?php $i = 0; ?>
+
 			<?php foreach ($form as $section => $fields): ?>
-		<fieldset class="box">
-			<legend><?= $sectionMapping[$section] ?></legend>
-			<section class='form'>
+				<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="settings-tab<?= $i ?>"
+					name="settings-tabs"
+				/>
+				<label for="settings-tab<?= $i ?>"><h3><?= $sectionMapping[$section] ?></h3></label>
+				<section class="content">
 					<?php require __DIR__ . '/_form.php' ?>
 				</section>
-		</fieldset>
+				<?php $i++; ?>
 			<?php endforeach ?>
-
+		</div>
 		<hr />
 		<?php foreach ($hiddenFields as $field): ?>
 			<?= $field ?>

index.php

@@ -55,7 +55,7 @@ $overrideConfig = file_exists($overrideFile)
 	? loadTomlFile($overrideFile)
 	: [];
 
-$configArray = array_merge($baseConfig, $config, $overrideConfig);
+$configArray = array_replace_recursive($baseConfig, $config, $overrideConfig);
 
 $checkedConfig = (new ConfigType($configArray))->toArray();
 $container = $di($checkedConfig);

public/css/base.css

@@ -861,7 +861,7 @@ CSS Tabs
 	margin-top: 1.5em;
 }
 
-.tabs label {
+.tabs > label {
 	border: 1px solid #e5e5e5;
 	width: 100%;
 	padding: 20px 30px;
@@ -874,31 +874,31 @@ CSS Tabs
 	/* margin-left: 4em; */
 }
 
-.tabs label:hover {
+.tabs > label:hover {
 	background: #d8d8d8;
 }
 
-.tabs label:active {
+.tabs > label:active {
 	background: #ccc;
 }
 
-.tabs [type=radio]:focus + label {
+.tabs > [type=radio]:focus + label {
 	box-shadow: inset 0px 0px 0px 3px #2aa1c0;
 	z-index: 1;
 }
 
-.tabs [type=radio] {
+.tabs > [type=radio] {
 	position: absolute;
 	opacity: 0;
 }
 
-.tabs [type=radio]:checked + label {
+.tabs > [type=radio]:checked + label {
 	border-bottom: 1px solid #fff;
 	background: #fff;
 	color: #000;
 }
 
-.tabs [type=radio]:checked + label + .content {
+.tabs > [type=radio]:checked + label + .content {
 	border: 1px solid #e5e5e5;
 	border-top: 0;
 	display: block;
@@ -912,7 +912,7 @@ CSS Tabs
 }
 
 @media (min-width: 600px) {
-	.tabs label {
+	.tabs > label {
 		width: auto;
 	}
 
@@ -921,23 +921,3 @@ CSS Tabs
 	}
 }
 
-/* ----------------------------------------------------------------------------
-Settings page forms
------------------------------------------------------------------------------*/
-fieldset.box {
-	display: inline-block;
-	vertical-align:top;
-	width:40%;
-	margin: 2em;
-}
-
-fieldset.box section {
-	margin: 0 auto;
-	text-align:center;
-}
-
-fieldset.box article {
-	margin: auto;
-	text-align:left;
-}
-

src/Controller/Index.php

@@ -164,6 +164,9 @@ final class Index extends BaseController {
 	{
 		$auth = $this->container->get('auth');
 		$form = $this->settingsModel->getSettingsForm();
+
+		// dump($this->session->getFlash('message'));
+
 		$this->outputHTML('settings', [
 			'auth' => $auth,
 			'form' => $form,

src/Model/Settings.php

@@ -45,20 +45,30 @@ final class Settings {
 				'default' => FALSE,
 				'description' => 'Enable syncing data between Kitsu and Anilist. Requires appropriate API keys to be set in config',
 			],
+			'client_id' => [
+				'type' => 'string',
+				'title' => 'Anilist API Client ID',
+				'default' => '',
+				'description' => 'The client id for your Anilist API application',
+			],
+			'client_secret' => [
+				'type' => 'string',
+				'title' => 'Anilist API Client Secret',
+				'default' => '',
+				'description' => 'The client secret for your Anilist API application',
+			],
 		],
 		'config' => [
 			'kitsu_username' => [
 				'type' => 'string',
 				'title' => 'Kitsu Username',
 				'default' => '',
-				'readonly' => TRUE,
 				'description' => 'Username of the account to pull list data from.',
 			],
 			'whose_list' => [
 				'type' => 'string',
 				'title' => 'Whose List',
 				'default' => 'Somebody',
-				'readonly' => TRUE,
 				'description' => 'Name of the owner of the list data.',
 			],
 			'show_anime_collection' => [
@@ -73,11 +83,6 @@ final class Settings {
 				'default' => FALSE,
 				'description' => 'Should the manga collection be shown?',
 			],
-			'asset_path' => [
-				'type' => 'string',
-				'display' => FALSE,
-				'description' => 'Path to public directory, where images/css/javascript are located',
-			],
 			'default_list' => [
 				'type' => 'select',
 				'title' => 'Default List',
@@ -241,17 +246,21 @@ final class Settings {
 				{
 					foreach($value['fields'] as $k => $field)
 					{
-						$value['fields'][$k]['value'] = $values[$key][$k] ?? '';
+						$value['fields'][$k]['disabled'] = FALSE;
 						$value['fields'][$k]['display'] = TRUE;
 						$value['fields'][$k]['readonly'] = FALSE;
-						$value['fields'][$k]['disabled'] = FALSE;
+						$value['fields'][$k]['value'] = $values[$key][$k] ?? '';
 					}
 				}
 
-				if (is_scalar($values[$key]))
+				if (array_key_exists($key, $values) && is_scalar($values[$key]))
 				{
 					$value['value'] = $values[$key];
 				}
+				else
+				{
+					$value['value'] = $value['default'] ?? '';
+				}
 
 				foreach (['readonly', 'disabled'] as $flag)
 				{