[FIX] Review input validation & some minor bug

web/book_detail/controller.php

@@ -78,7 +78,7 @@
                 }
                 $this->book_rating = round($sum/$count, 1);
             } else {
-                $this->book_rating = (float) 0;
+                $this->book_rating = 0;
             }
         }
     }

web/book_detail/view.php

@@ -46,7 +46,7 @@
                         <div class="rating-pict">'.
                         self::drawRating($book_rating).
                         '</div>
-                        <div class="text-size-20"><b>'.$book_rating.'/5.0</b></div>
+                        <div class="text-size-20"><b>'.self::floatRating($book_rating).'/5.0</b></div>
                     </div>
                 </div>';
             return $str;
@@ -120,7 +120,7 @@
                         <div class="add-flex-direction-column">
                             <div> <img id="star-icon" src="../svgIcon/'.self::STAR_FULL_IMG.'">
                             </div>
-                            <div class="text-size-20" align="center"><b>'.round($review['rating'], 1).'/5.0</b></div>
+                            <div class="text-size-20" align="center"><b>'.self::floatRating($review['rating']).'/5.0</b></div>
                         </div>
                     </div>';
                 $str = $str . $str_review;
@@ -143,5 +143,9 @@
             }
             return $str;
         }
+
+        private function floatRating($rate) {
+            return number_format((float)$rate, 1, '.', '');
+        }
     }
 ?>
\ No newline at end of file

web/css/book_detail.css

@@ -117,7 +117,7 @@ label {
 
 .modal-message {
     display: flex;
-    height: 15%;
+    height: 10%;
     margin-top: 40px;
     margin-bottom: 40px;
     margin-left: 40px;

web/css/login.css

@@ -66,6 +66,7 @@ input, textarea {
     border-width: 2px;
     border-radius: 5px;
     font-family: 'Lucida Sans Regular';
+    font-size: 20px;
     color: orange;
     font-weight: bold;
     letter-spacing: 2px;

web/css/registration.css

@@ -12,31 +12,19 @@ td {
     margin-right: 5px;
 }
 
-textarea {
+#validate_username {
+    margin-top: 5px;
+    display: inline-block;
+}
+
+.form-input textarea {
     width: 100%;
 }
 
-/*Tooltip*/
-.tooltiptext {
-    width: 120px;
-    background-color: black;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    top: -5px;
-    left: 110%;
+.form-input input {
+    width: 100%;
 }
 
-.tooltiptext::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 100%;
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent black transparent transparent;
+a {
+    color: #000000;
 }
\ No newline at end of file

web/css/review.css

-#textarea-comment {
+.textarea-comment {
     width: 100%;
-    resize: none;
     font-size: 28px;
     font-family: 'Nunito', sans-serif;
     padding: 5px;
-    margin-block-end: 30px;
+    resize: none;
+}
+
+.warning-empty-inputs {
+    position: relative;
+}
+
+.comment-bar {
+    margin-block-end: 50px;
 }
 
 .fivestar-rating {

web/javascript/review-book.js

@@ -29,4 +29,26 @@ function noHoverStar(starValue) {
             document.getElementById("star"+idx).src = STAR;
         }
     }
-}
\ No newline at end of file
+}
+
+function IsEmptyCommentBar() {
+    return document.getElementById('comment').value === "";
+}
+
+
+function trySubmitSearch() {
+    if (IsEmptyCommentBar()) {
+        document.getElementById("warning-empty-input").style.display = 'table';
+    } else {
+        document.getElementById('book-review').submit();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('comment').addEventListener('keypress', function(event) {
+        if (event.keyCode == 13) {
+            event.preventDefault();
+            trySubmitSearch();
+        }
+    });
+}, false);
\ No newline at end of file

web/registration/view.php

@@ -45,7 +45,7 @@
         return $form;
     }
     function getTable() {
-        return '<table align="center">
+        return '<table class="form-input" align="center">
                     <tr>
                         <td>Name</td>
                         <td><input id="name-input" type="text" size="25" name="name"></td>
@@ -67,12 +67,12 @@
                     </tr>
                     <tr>
                         <td>Password</td>
-                        <td><input id="password-input" type="password" size="25" maxlength="16" name="password">
+                        <td><input id="password-input" type="password" size="25" name="password">
                         </td>
                     </tr>
                     <tr>
                         <td>Confirm Password</td>
-                        <td><input id="confpassword-input" type="password" size="25" maxlength="16" name="conf_password"></td>
+                        <td><input id="confpassword-input" type="password" size="25" name="conf_password"></td>
                     </tr>
                     <tr>
                         <td>Address</td>

web/review/view.php

@@ -45,7 +45,7 @@
         
         private function showReviewForm($order_id, $book_id) {
             $str = '
-                <form action="review/submit_review.php" method="POST">
+                <form id="book-review" action="review/submit_review.php" method="POST">
                     <div class="book-detail">
                         <div class="head-title">Add Rating</div>
                         <div class="order-select">'.
@@ -57,8 +57,9 @@
                         <div class="head-title">Add Comment</div>
                         <div class="flex-review-tab">
                             <div class="comment-bar">
-                                <textarea id="textarea-comment" name="comment" cols="180" rows="5"></textarea>
-                                <p id="warning-empty-input" class="red-theme alert-box text-size-20 add-nunito-font c-round">Input can\'t be empty</p>
+                                <textarea id="comment" class="textarea-comment" name="comment" cols="180" rows="5"></textarea>
+                                <span id="warning-empty-input" class="red-theme alert-box text-size-20 add-nunito-font c-round">
+                                    Input can\'t be empty</span>
                             </div>
                         </div>
                     </div>