Added color picker setting for public message and comp. Fixed a bug w…

…here protection did not work (#2)
designcontainer · Jul 28, 2021 · 1ccd722 · 1ccd722
1 parent 0f5c239
commit 1ccd722
Show file tree

Hide file tree

Showing 15 changed files with 3,142 additions and 76 deletions.
diff --git a/build/css/app.css b/build/css/app.css
diff --git a/build/js/app.admin.js b/build/js/app.admin.js
diff --git a/includes/class-passnado-deactivator.php b/includes/class-passnado-deactivator.php
@@ -37,6 +37,7 @@ public static function deactivate() {
         delete_option('passnado_message_title');
         delete_option('passnado_message_text');
         delete_option('passnado_login_link_text');
+        delete_option('passnado_message_color');
         delete_option('passnado_checklist');
     }
 }
diff --git a/includes/class-passnado-settings.php b/includes/class-passnado-settings.php
@@ -137,6 +137,16 @@ private function register_settings() {
             )
         );
 
+        register_setting(
+            'passnado_options_group',
+            'passnado_message_color',
+            array(
+                'type'         => 'string',
+                'show_in_rest' => true,
+                'default'      => '#247cf9',
+            )
+        );
+
         register_setting(
             'passnado_options_group',
             'passnado_checklist',

diff --git a/includes/public/class-passnado-public.php b/includes/public/class-passnado-public.php
@@ -69,7 +69,9 @@ public function __construct($plugin_name, $version) {
 	 * @return mixed
 	 */
 	public function init_protection() {
-		if (false === $this->protect)                return; // Return if protection is not enabled
+		// Check with empty cause WordPress settings are weird
+		// https://developer.wordpress.org/reference/functions/get_option/#description
+		if (true === empty($this->protect))          return; // Return if protection is not enabled. 
 		if (true === is_user_logged_in())            return; // Return if use is logged in
 		if (true === $this->has_protection_param())  return; // Return if authenticated with url param
 		if (true === $this->has_protection_cookie()) return; // Return if authenticated with cookie

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "passnado",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "",
 	"main": "index.js",
 	"scripts": {

diff --git a/passnado.php b/passnado.php
@@ -8,7 +8,7 @@
  * Plugin Name: Passnado
  * Plugin URI:  https://designcontainer.no
  * Description: Password protect site
- * Version:     2.0.1
+ * Version:     2.1.0
  * Author:      Design Container AS
  * Author URI:  https://designcontainer.no
  * License:     GNU General Public License version 3.0
@@ -26,7 +26,7 @@
  * Rename this when releasing new versions.
  */
 if (!defined('PASSNADO_VERSION')) {
-	define('PASSNADO_VERSION', '2.0.1');
+	define('PASSNADO_VERSION', '2.1.0');
 }
 
 /**

diff --git a/public/partials/passnado-public-message.php b/public/partials/passnado-public-message.php
@@ -20,6 +20,11 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Protected webiste</title>
 	<link rel="stylesheet" href="<?php echo plugin_dir_url(dirname(__DIR__)) . 'build/css/app.css'; ?>">
+	<style>
+		.passnado-message {
+			--passnado-message-color: <?php echo get_option('passnado_message_color'); ?>;
+		}
+	</style>
 </head>
 
 <body class="passnado-message <?php printf('passnado-message--%s ', get_option('passnado_message_layout')); ?>">
@@ -48,7 +53,7 @@
 			<?php if ($text = get_option('passnado_message_text')) : ?>
 				<p><?php echo $text; ?></p>
 			<?php endif; ?>
-			<?php if ($login_label = get_option('passnado_message_login_label')) : ?>
+			<?php if ($login_label = get_option('passnado_login_link_text')) : ?>
 				<a href="<?php echo wp_login_url(); ?>" class="button"><?php echo $login_label; ?></a>
 			<?php endif; ?>
 		</section>

diff --git a/src/admin/js/components/color-picker-modal.component.js b/src/admin/js/components/color-picker-modal.component.js
@@ -0,0 +1,47 @@
+import { __ } from '@wordpress/i18n';
+import { Button, ColorIndicator, ColorPicker } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+
+const ColorPickerModal = (props) => {
+	const [open, setOpen] = useState(false);
+	const [color, setColor] = useState('#247cf9');
+
+	const saveColor = () => {
+		setOpen(false);
+		props.onChange(color);
+	};
+
+	return (
+		<div className="color-picker-modal">
+			<div className="color-picker-modal__toggle">
+				<Button onClick={() => setOpen(!open)}>
+					<ColorIndicator colorValue={props.color} />
+					{__('Change color', 'passnado')}
+				</Button>
+			</div>
+			{open && (
+				<div className="color-picker-modal__modal">
+					<ColorPicker
+						color={props.color}
+						onChangeComplete={(color) => setColor(color.hex)}
+						disableAlpha
+					/>
+
+					<div class="passnado-button-group">
+						<Button
+							isPrimary={true}
+							text={__('Save', 'passnado')}
+							onClick={() => saveColor()}
+						/>
+						<Button
+							isSecondary={true}
+							text={__('Cancel', 'passnado')}
+							onClick={() => setOpen(false)}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
+export default ColorPickerModal;
diff --git a/src/admin/js/parts/public-layout.part.js b/src/admin/js/parts/public-layout.part.js
@@ -14,25 +14,30 @@ import useSetting from '../hooks/use-setting.hook';
  */
 import PartContainer from '../components/part-container.component';
 import TransparentInput from '../components/transparent-input.component';
+import ColorPickerModal from '../components/color-picker-modal.component';
 
 const PublicLayout = () => {
 	const [layout, setLayout] = useSetting('passnado_message_layout');
 	const [title, setTitle, titleLoading] = useSetting('passnado_message_title');
 	const [text, setText, textLoading] = useSetting('passnado_message_text');
 	const [login, setLogin, loginLoading] = useSetting('passnado_login_link_text');
+	const [color, setColor] = useSetting('passnado_message_color');
 
 	return (
 		<PartContainer noPadding={true}>
-			<RadioControl
-				className="passnado-message__layout-selector"
-				selected={layout}
-				options={[
-					{ label: 'Default', value: 'default' },
-					{ label: 'Background', value: 'image' },
-				]}
-				onChange={(value) => setLayout(value)}
-			/>
+			<div className="passnado-message__layout-nav">
+				<RadioControl
+					selected={layout}
+					options={[
+						{ label: 'Default', value: 'default' },
+						{ label: 'Background', value: 'image' },
+					]}
+					onChange={(value) => setLayout(value)}
+				/>
+				<ColorPickerModal color={color} onChange={(value) => setColor(value)} />
+			</div>
 			<div className={`passnado-message passnado-message--${layout}`}>
+				<style>{`.passnado-message{--passnado-message-color: ${color}}`}</style>
 				<div className="container">
 					{!titleLoading && !textLoading && !loginLoading && (
 						<section className="content">

diff --git a/src/scss/_public.scss b/src/scss/_public.scss
@@ -5,13 +5,25 @@
 	height: 100%;
 	min-height: rem-calc(460);
 	font-family: 'Open Sans', sans-serif;
-	background-color: $light-blue;
-
 	&:not(.passnado-message--image) {
 		justify-content: center;
 		align-items: center;
+		position: relative;
+		&:before {
+			opacity: 0.1;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			content: '';
+			background-color: var(--passnado-message-color);
+			transition: background-color 0.2s ease-in-out;
+		}
 		.container {
 			margin: rem-calc(18);
+			position: relative;
+			z-index: 1;
 			.content {
 				margin: rem-calc(36 0);
 				padding: rem-calc(40);
@@ -45,36 +57,39 @@
 		header {
 			text-align: center;
 			.lock-icon {
-				fill: $blue;
+				fill: var(--passnado-message-color);
 			}
 		}
 
 		.content {
+			box-sizing: border-box;
+			width: 100%;
 			text-align: center;
 			background-color: $white;
-			width: 100%;
 			h1 {
 				margin-top: 0;
 				font-size: rem-calc(26);
 			}
 			.button {
+				all: unset;
 				display: block;
 				max-width: 300px;
 				margin-top: rem-calc(40);
 				margin-right: auto;
 				margin-left: auto;
 				padding: rem-calc(16);
+				border: 0;
 				border-radius: rem-calc(6);
 				color: $white;
 				text-align: center;
 				text-decoration: none;
-				background-color: $blue;
+				background-color: var(--passnado-message-color);
 				transition: background-color 0.2s ease-in-out;
 
-				&:hover,
-				&:focus {
-					background-color: darken($blue, 10%);
-				}
+				// &:hover,
+				// &:focus {
+				// 	background-color: darken($blue, 10%);
+				// }
 			}
 		}
 	}

diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -25,3 +25,4 @@
 @import 'components/help';
 @import 'components/fake-list';
 @import 'components/transparent-input';
+@import 'components/color-picker-modal';
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
@@ -1,7 +1,7 @@
 .passnado-button-group {
 	display: flex;
 	align-items: center;
-	column-gap: rem-calc(16);
+	column-gap: rem-calc(8);
 }
 .components-button.has-icon {
 	padding-right: rem-calc(12);

diff --git a/src/scss/components/_color-picker-modal.scss b/src/scss/components/_color-picker-modal.scss
@@ -0,0 +1,22 @@
+.color-picker-modal {
+	position: relative;
+	&__toggle {
+		.component-color-indicator {
+			width: rem-calc(20);
+			height: rem-calc(20);
+			border-radius: 50%;
+			margin-right: rem-calc(6);
+		}
+	}
+	&__modal {
+		z-index: 20;
+		position: absolute;
+		top: 100%;
+		right: rem-calc(-18);
+		max-width: rem-calc(400);
+		padding: rem-calc(16);
+		border-radius: rem-calc(4);
+		background-color: $white;
+		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+	}
+}
diff --git a/src/scss/parts/_public-layout.scss b/src/scss/parts/_public-layout.scss
@@ -1,7 +1,10 @@
 .passnado-settings__part {
 	.passnado-message {
 		height: auto;
-		&__layout-selector {
+		&__layout-nav {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
 			.components-base-control__field {
 				display: flex;
 				align-items: center;