Merge pull request #13 from iamapinan/dev

Dev
iamapinan · May 14, 2020 · edf1d32 · edf1d32
2 parents dbd6bfa + 9a20bd4
commit edf1d32
Show file tree

Hide file tree

Showing 16 changed files with 604 additions and 278 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,21 @@
 ![assets/pdpa-consent-banner.png](assets/pdpa-consent-banner.png)  
 
 This WordPress plugin help you to generate Thailand PDPA consent terms page and consent notification popup. 
-You can edit the term page and publish on your website with elegant and powerful solution. !!! No jquery need at all. 
+You can edit the term page and publish on your website with elegant and powerful solution. !!! No jquery need at all.
+
+### Code of conduct
+
+- ปลั๊กอินนี้จัดทำขึ้นเพื่อตอบสนองต่อการปฏิบัติตาม พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล 2562 (PDPA) ของประเทศไทย
+- ปลั๊กอินนี้จัดทำขึ้นเพื่อแจกฟรี
+- ปลั๊กอินไม่มีความประสงค์ที่จะจัดเก็บค่าใช้งานแต่อย่างใด
+- ปลั๊กอินไม่ได้รับประกันในด้านความปลอดภัยต่อข้อมูล
+- ปลั๊กอินไม่ได้ป้องกันการฟ้องร้องที่อาจเกิดขึ้นโดยคู่กรณีได้  
+- ผู้ใช้งานปลั๊กอินเป็นผู้รับผิดชอบและตัดสินใจต่อการใช้และรักษาความปลอดภัยของข้อมูล
+- ปลั๊กอินไม่ได้เป็นผู้ประมวลผลข้อมูลหรือใช้ข้อมูลส่วนบุคคล
+- ปลั๊กอินไม่ได้เป็นผู้บล็อคการทำงานส่วนหนึ่งส่วนใดของเว็บไซต์ 
+- ปลั๊กอินจะมีการปรับปรุงเงื่อนไข PDPA ให้รัดกุมมากขึ้นเสมอ
+- การบริจาคมิใช่เพื่อเป็นสิ่งแลกเปลี่ยนในการใช้งานปลั๊กอิน PDPA Consent
+
 
 ### Download new release
 -> [Release page is here.](https://github.com/iamapinan/PDPA-Consent/releases)
@@ -14,21 +28,34 @@ You can edit the term page and publish on your website with elegant and powerful
 ### Features
 * Customizable message
 * Identity setup
-* User data list
 * Popup placement
 * Consent page generate
-* Custom CSS
+* CSS Class for developer
+* Dark mode
+* Button color config
 * Support WP Super Cache (idea from Cookie Notice plugin)
 * Save user action to database
 * Display user PDPA Status on user list
+* Responsive
 * Multi language support (Thai, English) more translate is accept
 
 ### Roadmap
 
-* Allow user to request profile data.
-* Allow user to request to delete account.
-* Allow user to allow consent again.
-* User page.
+* หน้าจัดการข้อมูลของผู้ใช้
+* ผู้ใช้สามารถขอถ่ายโอนข้อมูลได้
+* ผู้ใช้สามารถ ลบหรือขอให้ลบข้อมูลได้ ขึ้นกับนโยบาย
+* ผู้ใช้สามารถเลือกการยินยอมใหม่ได้
+* ผู้ใช้สามารถ แก้ไข/ขอให้แก้ไข ข้อมูลที่ยินยอมได้
+* ผู้ใช้สามารถเลือกประเภทข้อมูลที่ยินยอมและไม่ยินยอมได้
+* แบ่งประเภทข้อมูลพื้นฐาน, ข้อมูลละเอียดอ่อน, ข้อมูลทางอ้อม
+* เพิ่มเรื่อง การจัดเก็บข้อมูลแต่ละประเภท
+* เพิ่มเรื่อง การเผยแพร่ข้อมูลผ่าน API หรือไม่
+* เพิ่มเรื่อง การส่งข้อมูลไปต่างประเทศ หรือไม่
+* เพิ่ม Wizard การตั้งค่า
+* ให้ผู้ใช้ต้องติ๊กถูกก่อนคลิกยินยอม โดยค่าเริ่มต้นคือไม่ติ๊ก
+* บันทึกประวัติการ ยินยอม/ไม่ยินยอม ย้อนหลัง
+* API สำหรับขอความยินยอมเป็นครั้งคราว
+* Server อยู่ในต่างประเทศหรือไม่
 
 ### Contributors.
 - **Apinan Woratrakun** *as developer* <[email protected]>, <https://facebook.com/9apinan>, <https://ioblog.me>
@@ -37,4 +64,15 @@ You can edit the term page and publish on your website with elegant and powerful
 [GNU 3.0 License](https://opensource.org/licenses/lgpl-3.0.html0)
 
 ### Special Thank
-* Thai Programmer Association
+* Thai Programmer Association
+* WordPress Bangkok friends
+
+### Changelogs
+
+#### 1.0.2
+* Add dark mode
+* Button color
+* Use page id as privacy page url link
+* List of css class for developer
+* Remove custom css for security reason
+* Fix security and code style
diff --git a/assets/pdpa-consent-user.css b/assets/pdpa-consent-user.css
@@ -0,0 +1,59 @@
+/**
+* User privacy page style
+*/
+.pdpa_user_warp {
+    display: flex;
+    flex-direction: column;
+}
+.pdpa_user_warp .user_toolbar {
+    justify-content: center;
+    flex-direction: row;
+    display: flex;
+}
+.pdpa_user_warp button {
+    padding: 10px 25px;
+    border-radius: 30px;
+    font-size: 16px;
+    margin: 3px;
+}
+.pdpa_user_warp .profile-header-top {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    background: rgb(170,34,195);
+    background: linear-gradient(0deg, rgba(170,34,195,1) 0%, rgba(253,45,121,1) 100%);
+    height: 150px;
+    padding: 10px;
+    margin-bottom: 25px;
+    margin-top: 25px;
+    border-radius: 8px;
+}
+
+.pdpa_user_warp .profile-header-top img {
+    border-radius: 50%;
+    width: 96px;
+    height: 96px;
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.pdpa_user_warp .profile-header-top .user_title {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-left: 25px;
+}
+.profile-header-top .user_title h3{
+    margin-bottom: 10px;
+    color: #fff;
+}
+.profile-header-top .user_title p {
+    color: rgb(255, 236, 221);
+    font-size: 0.8em;
+}
+.profile-header-top .user_title span {
+    vertical-align: middle;
+}
+.profile-header-top .user_title .status_bage {
+    color: #fff;
+}
diff --git a/assets/pdpa-consent-user.js b/assets/pdpa-consent-user.js
@@ -0,0 +1,3 @@
+(()=>{
+
+})
diff --git a/assets/pdpa-consent-user.min.css b/assets/pdpa-consent-user.min.css
diff --git a/assets/pdpa-consent-user.min.js b/assets/pdpa-consent-user.min.js
@@ -0,0 +1,3 @@
+(()=>{
+
+})
diff --git a/assets/pdpa-consent.css b/assets/pdpa-consent.css
@@ -1,4 +1,3 @@
-
 .pdpa-consent-wrap {
     padding: 15px;
     background-color: #ffffff;
@@ -8,57 +7,71 @@
     justify-content: center;
     flex-direction: column;
 }
+
 .pdpa-place-top {
     position: fixed;
     z-index: 99999;
     top: 0;
     left: 0;
     width: 100%;
 }
+
 .pdpa-place-bottom {
     position: fixed;
     z-index: 9999;
     bottom: 0;
     left: 0;
     width: 100%;
 }
+
 .pdpa-place-center {
     position: fixed;
     z-index: 999;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     max-width: 100vh;
-    box-shadow: 3px 3px 50px rgba(3,3,3,0.25);
+    box-shadow: 3px 3px 50px rgba(3, 3, 3, 0.25);
     border-radius: 6px;
 }
+
 .pdpa-darkmode {
     background-color: #272727 !important;
 }
-.pdpa-darkmode .pdpa-consent-text, .pdpa-darkmode a {
+
+.pdpa-darkmode .pdpa-consent-text,
+.pdpa-darkmode a {
     color: #fff !important;
 }
+
 .pdpa-consent-text {
     margin-bottom: 10px;
     font-size: 14px;
 }
-.pdpa-consent-allow-button, .pdpa-consent-not-allow-button {
+
+.pdpa-consent-allow-button,
+.pdpa-consent-not-allow-button {
     padding: 8px 15px;
     font-size: 14px;
     border-radius: 15px;
     margin-inline: 5px;
 }
-.pdpa-consent-allow-button:hover, .pdpa-consent-not-allow-button:hover {
+
+.pdpa-consent-allow-button:hover,
+.pdpa-consent-not-allow-button:hover {
     opacity: 0.8;
 }
+
 .pdpa-consent-allow-button {
     background-color: #355eb8;
     color: #fff;
 }
+
 .pdpa-consent-not-allow-button {
     background-color: #d4304c;
     color: #fff;
 }
+
 /** Tablet **/
 @media (max-width: 1023px) {
     .pdpa-place-center {
@@ -68,7 +81,7 @@
         top: 50%;
         transform: translate(-50%, -50%);
         width: 100%;
-        box-shadow: 3px 3px 50px rgba(3,3,3,0.25);
+        box-shadow: 3px 3px 50px rgba(3, 3, 3, 0.25);
         border-radius: 6px;
     }
 }
@@ -82,7 +95,7 @@
         top: 50%;
         transform: translate(-50%, -50%);
         width: 100%;
-        box-shadow: 3px 3px 50px rgba(3,3,3,0.25);
+        box-shadow: 3px 3px 50px rgba(3, 3, 3, 0.25);
         border-radius: 6px;
     }
-}
+}
diff --git a/assets/pdpa-consent.js b/assets/pdpa-consent.js
@@ -3,17 +3,17 @@
  * (c) Apinan Woratrakun <[email protected]>
  */
 console.log(pdpa_ajax.consent_enable)
-if(pdpa_ajax.consent_enable == 'yes') {
-document.addEventListener("DOMContentLoaded", function() {
+if (pdpa_ajax.consent_enable == 'yes') {
+    document.addEventListener("DOMContentLoaded", function () {
         var allow_button = document.getElementById("PDPAAllow")
         var not_allow_button = document.getElementById("PDPANotAllow")
         var consent_win = document.getElementById("pdpa_screen")
-    
+
         not_allow_button.addEventListener("click", () => {
             pdpa_ajax_call('pdpa-not-allow');
             consent_win.style.display = 'none'
         });
-    
+
         allow_button.addEventListener("click", () => {
             pdpa_ajax_call('pdpa-allow');
             consent_win.style.display = 'none'
@@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 const pdpa_ajax_call = (action_require) => {
     var xhr = new XMLHttpRequest();
-    var fd  = new FormData();
+    var fd = new FormData();
 
     xhr.open("POST", pdpa_ajax.ajax_url, true);
     xhr.onreadystatechange = function () {
@@ -33,18 +33,18 @@ const pdpa_ajax_call = (action_require) => {
         }
     };
 
-    fd.append( "action", "pdpa_action" );
-    fd.append( "set_status", action_require );
-    fd.append( "security", pdpa_ajax.pdpa_nonce );
+    fd.append("action", "pdpa_action");
+    fd.append("set_status", action_require);
+    fd.append("security", pdpa_ajax.pdpa_nonce);
     xhr.send(fd);
 }
 
-const cookie_process = ( $d ) => {
+const cookie_process = ($d) => {
     var cookie_string = '';
-    if($d.type == 'user_allow') {
-        cookie_string = $d.cookie_name+"=1; expires="+$d.cookie_expire+"; domain="+$d.cookie_domain+"; path=/";
-    }else if($d.type == 'user_not_allow') {
-        cookie_string = $d.cookie_name+"=0; expires="+$d.cookie_expire+"; domain="+$d.cookie_domain+"; path=/";
+    if ($d.type == 'user_allow') {
+        cookie_string = $d.cookie_name + "=1; expires=" + $d.cookie_expire + "; domain=" + $d.cookie_domain + "; path=/";
+    } else if ($d.type == 'user_not_allow') {
+        cookie_string = $d.cookie_name + "=0; expires=" + $d.cookie_expire + "; domain=" + $d.cookie_domain + "; path=/";
     } else {
         console.log("error.")
     }