From 14b385cf1c811aec0f44abfbc47f03571ffafbec Mon Sep 17 00:00:00 2001
From: 8cy <50817549+8cy@users.noreply.github.com>
Date: Sun, 10 May 2020 03:20:30 -0700
Subject: yes

---
 views/error.ejs   |   2 +-
 views/index.ejs   | 188 ++++++++++++++++++++++++++++++++++++------------------
 views/login.ejs   |   2 +-
 views/profile.ejs |  17 ++++-
 views/signup.ejs  |  23 ++++++-
 5 files changed, 163 insertions(+), 69 deletions(-)

(limited to 'views')

diff --git a/views/error.ejs b/views/error.ejs
index b38f681..05344c0 100644
--- a/views/error.ejs
+++ b/views/error.ejs
@@ -110,7 +110,7 @@
             </div>
         </div>
 
-        <footer>
+        <footer class="hideme">
             <link rel="stylesheet" type="text/css"
                 href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
             Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours).
diff --git a/views/index.ejs b/views/index.ejs
index 04d1cce..48144ba 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -95,12 +95,14 @@
             </div>
         </nav>
 
-        <div class="container my-5 hideme">
-            <form action="/submitEntry" method="POST" class="my-4 form-inline">
+        <div class="container my-5">
+            <form action="/submitEntry" method="POST" class="my-4 form-inline hideme">
                 <div class="row">
                     <div class="col-sm">
                         <label for="transactionType" class="sr-only">Type of transaction</label>
-                        <select name="transactionType" id="transactionType" class="form-control mr-2" <% if (name === null) { %> disabled <% } %>>
+                        <select name="transactionType" id="transactionType" class="form-control mr-2"
+                            <% if (name === null) { %> disabled data-toggle="tooltip" data-placement="top"
+                            title="Login to submit" <% } %>>
                             <option value="purchase">Purchase</option>
                             <option value="sale">Sale</option>
                             <option value="trade">Trade</option>
@@ -108,16 +110,21 @@
                         
                         <label for="carsType" class="sr-only">Cars</label>
                         <input type="text" name="carsType" id="carsType" class="form-control mr-2"
-                            placeholder="Car(s)" min="2" max="16" required <% if (name === null) { %> disabled <% } %>>
+                            placeholder="Car(s)" min="2" max="16" required <% if (name === null) { %> disabled
+                            data-toggle="tooltip" data-placement="top"
+                            title="Login to submit" <% } %>>
 
                         <label for="sellerType" class="sr-only">Seller, Buyer or Trader's Name</label>
                         <input type="text" name="sellerType" id="sellerType" class="form-control mr-2"
                             placeholder="Seller/ Buyer/ Trader's Name" min="1" max="50" required
-                            <% if (name === null) { %> disabled <% } %>>
+                            <% if (name === null) { %> disabled data-toggle="tooltip" data-placement="top"
+                            title="Login to submit" <% } %>>
 
                         <label for="priceType" class="sr-only">Price or Received Cars</label>
                         <input type="text" name="priceType" id="priceType" class="form-control mr-2"
                             placeholder="Price/ Received Car(s)" min="1" required <% if (name === null) { %> disabled
+                            data-toggle="tooltip" data-placement="top"
+                            title="Login to submit"
                             <% } %>>
 
                         <% if (name === null) { %>
@@ -131,116 +138,175 @@
                 </div>
             </form>
 
-             <div class="row">
+            <div class="row">
                 <div class="col-sm">
-                    <h3 id="white-txt">Purchases</h3>
+                    <h3 id="white-txt" class="hideme">Purchases</h3>
                     <table class="table table-striped">
-                        <thead>
+                        <thead class="hideme">
                             <tr>
-                                <th id="white-txt">Car(s)</th>
-                                <th id="white-txt">Seller</th>
-                                <th id="white-txt">Price</th>
-                                <th id="white-txt">TOS</th>
+                                <th id="white-txt" class="hideme">Car(s)</th>
+                                <th id="white-txt" class="hideme">Seller</th>
+                                <th id="white-txt" class="hideme">Price</th>
+                                <th id="white-txt" class="hideme" data-toggle="tooltip" data-placement="top"
+                                    title="Time of Sale">TOS</th>
                             </tr>
                         </thead>
-                        <tbody>
+                        <tbody class="hideme">
                             <% if (name === null) { %>
                                 <tr>
-                                    <td id="white-txt" class="highlightable">RX7</td>
-                                    <td id="white-txt" class="highlightable">Sin</td>
-                                    <td id="white-txt" class="highlightable">150000</td>
-                                    <td id="white-txt" class="highlightable">2020-05-06T08:08:34.827Z</td>
+                                    <td id="white-txt" class="highlightable hideme">RX7</td>
+                                    <td id="white-txt" class="highlightable hideme">Sin</td>
+                                    <td id="white-txt" class="highlightable hideme">150000</td>
+                                    <td id="white-txt" class="highlightable hideme">2020-05-06T08:08:34.827Z</td>
                                 </tr>
                             <% } else { %>
-                                <% loop.forEach(lp => { %>
+                                <% if (loopCount < 1) { %>
                                     <tr>
-                                        <td id="white-txt" class="highlightable"><%= lp.cars %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.seller %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.price %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.date %></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
                                     </tr>
-                                <% }) %> 
+                                <% } else { %>
+                                    <% loop.forEach(lp => { %>
+                                        <tr>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.cars %></td>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.seller %></td>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.price %></td>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.date %></td>
+                                        </tr>
+                                    <% }) %>
+                                <% } %>
                             <% } %>
                         </tbody>
                     </table>
                 </div>
                 <div class="col-sm">
-                    <h3 id="white-txt">Sales</h3>
+                    <h3 id="white-txt" class="hideme">Sales</h3>
                     <table class="table table-striped">
-                        <thead>
+                        <thead class="hideme">
                             <tr>
-                                <th id="white-txt">Car(s)</th>
-                                <th id="white-txt">Buyer</th>
-                                <th id="white-txt">Price</th>
-                                <th id="white-txt">TOS</th>
+                                <th id="white-txt" class="hideme">Car(s)</th>
+                                <th id="white-txt" class="hideme">Buyer</th>
+                                <th id="white-txt" class="hideme">Price</th>
+                                <th id="white-txt" class="hideme" data-toggle="tooltip" data-placement="top"
+                                    title="Time of Sale">TOS</th>
                             </tr>
                         </thead>
-                        <tbody>
+                        <tbody class="hideme">
                             <% if (name === null) { %>
                                 <tr>
-                                    <td id="white-txt" class="highlightable">R34</td>
-                                    <td id="white-txt" class="highlightable">Sin</td>
-                                    <td id="white-txt" class="highlightable">180000</td>
-                                    <td id="white-txt" class="highlightable">2020-05-04T02:02:56.8F9J</td>
+                                    <td id="white-txt" class="highlightable hideme">R34</td>
+                                    <td id="white-txt" class="highlightable hideme">Sin</td>
+                                    <td id="white-txt" class="highlightable hideme">180000</td>
+                                    <td id="white-txt" class="highlightable hideme">2020-05-04T02:02:56.8F9J</td>
                                 </tr>
                             <% } else { %>
-                                <% loop2.forEach(lp => { %>
+                                <% if (loop2Count < 1) { %>
                                     <tr>
-                                        <td id="white-txt" class="highlightable"><%= lp.cars %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.seller %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.price %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.date %></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
+                                        <td id="white-txt" class="highlightable hideme"></td>
                                     </tr>
-                                <% }) %> 
+                                <% } else { %>
+                                    <% loop2.forEach(lp => { %>
+                                        <tr>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.cars %></td>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.seller %></td>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.price %></td>
+                                            <td id="white-txt" class="highlightable hideme"><%= lp.date %></td>
+                                        </tr>
+                                    <% }) %>
+                                <% } %>
                             <% } %>
                         </tbody>
                     </table>
                 </div>
                 <div class="col-sm">
-                    <h3 id="white-txt">Trades</h3>
+                    <h3 id="white-txt" class="hideme">Trades</h3>
                     <table class="table table-striped">
-                        <thead>
+                        <thead class="hideme">
                             <tr>
                                 <th id="white-txt">Received Car(s)</th>
                                 <th id="white-txt">Trader</th>
                                 <th id="white-txt">Traded Car(s)</th>
-                                <th id="white-txt">TOS</th>
+                                <th id="white-txt" data-toggle="tooltip" data-placement="top" title="Time of Sale">TOS</th>
                             </tr>
                         </thead>
-                        <tbody>
+                        <tbody class="hideme">
                             <% if (name === null) { %>
                                 <td id="white-txt" class="highlightable">R32</td>
                                 <td id="white-txt" class="highlightable">Sin</td>
                                 <td id="white-txt" class="highlightable">R34</td>
                                 <td id="white-txt" class="highlightable">2020-05-02T06:21:23.2J7F</td>
                             <% } else { %>
-                                <% loop3.forEach(lp => { %>
+                                <% if (loop3Count < 1) { %>
                                     <tr>
-                                        <td id="white-txt" class="highlightable"><%= lp.cars %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.seller %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.price %></td>
-                                        <td id="white-txt" class="highlightable"><%= lp.date %></td>
+                                        <td id="white-txt" class="highlightable"></td>
+                                        <td id="white-txt" class="highlightable"></td>
+                                        <td id="white-txt" class="highlightable"></td>
+                                        <td id="white-txt" class="highlightable"></td>
                                     </tr>
-                                <% }) %> 
+                                <% } else { %>
+                                    <% loop3.forEach(lp => { %>
+                                        <tr>
+                                            <td id="white-txt" class="highlightable"><%= lp.cars %></td>
+                                            <td id="white-txt" class="highlightable"><%= lp.seller %></td>
+                                            <td id="white-txt" class="highlightable"><%= lp.price %></td>
+                                            <td id="white-txt" class="highlightable"><%= lp.date %></td>
+                                        </tr>
+                                    <% }) %>
+                                <% } %>
                             <% } %>
                         </tbody>
                     </table>
                 </div>
             </div>
 
-            <div class="newest hideme" style="position: absolute; top: 5%; left: 5%;">
-                <h1 id="white-txt">TODO:</h1>
-                <ul style="position: relative; left: -25%;">
-                    <li id="white-txt">Add more API features</li>
-                    <li id="white-txt">Add delete and change features (lol)</li>
-                    <li id="white-txt">Add marketplace</li>
-                    <li id="white-txt">Add automated password, email and<br /> username change requests</li>
-                    <li id="white-txt">Add feature which imports old Sin's <br /> SS Logger desktop app data into web app.</li>
-                </ul>
-            </div>
+            <% if (name === 'sin') { %>
+                <div class="newest hideme" style="position: fixed; top: 5%; left: 5%;">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th id="white-txt">Users</th>
+                                <th id="white-txt">Entries</th>
+                                <th id="white-txt">Uptime</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="white-txt" class="highlightable"><%= UserCount %></td>
+                                <td id="white-txt" class="highlightable"><%= EntryCount %></td>
+                                <td id="white-txt" class="highlightable"><%= process.uptime() %></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            <% } %> 
+
+            <% if (req.session.exampleVideo) { %>
+                <div class="example-video__container hideme" style="position: absolute; bottom: 15px; left: 15px;">
+                    <form action="/closeExampleVideo" method="post">
+                        <button type="submit" class="btn btn-danger" style="float: right; font-size: 10px !important;"
+                            data-toggle="tooltip" data-placement="top" title="Close the demo">Close Demo</button>
+                    </form>
+                    <br />
+
+                    <iframe src="https://streamable.com/e/669gny?autoplay=1" width="578" height="325" frameborder="0"
+                        allowfullscreen id="example-video"></iframe>
+                </div>
+            <% } else { %>
+                <div class="example-video__container hideme" style="position: fixed; bottom: 15px; left: 15px;">
+                    <form action="/openExampleVideo" method="post">
+                        <button type="submit" class="btn btn-info"
+                            style="float: right; font-size: 10px !important;" data-toggle="tooltip" data-placement="top" title="Re-watch the demo">Re-watch Demo</button>
+                    </form>
+                </div>
+            <% } %> 
         </div>
 
-        <footer>
+        <footer class="hideme">
             <link rel="stylesheet" type="text/css"
                 href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
             Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours).
diff --git a/views/login.ejs b/views/login.ejs
index f7f0b6f..c282b7f 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -122,7 +122,7 @@
             </div>
         </div>
 
-        <footer>
+        <footer class="hideme">
             <link rel="stylesheet" type="text/css"
                 href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
             Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours).
diff --git a/views/profile.ejs b/views/profile.ejs
index b949794..ff15c3b 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -106,9 +106,20 @@
                 <div class="col-sm"></div>
                 <div class="col-sm">
                     <h4 class="pt-4" id="white-txt">
-                        <a href="https://www.youtube.com/watch?v=ZClu_I6U6aM" id="deez-nuts">
-                            <%= name %> 
+                        <a href="https://www.youtube.com/watch?v=ZClu_I6U6aM" id="deez-nuts" data-toggle="tooltip"
+                            data-placement="top" title="Oh no, you found me...">
+                            <%= name %>
                         </a>
+                        <br />
+
+                        <img src="https://i.imgur.com/qrrXOst.jpg"
+                            alt="Profile Picture Default" width="120px" class="pt-4">
+                        <small class="form-text text-muted" style="font-size: 15px;">Custom PFPs coming soon!</small>
+
+                        <!-- <form action="/submitPFP" method="post">
+                            <input type="file" id="pfp-img" name="pfp-img" accept="image/*" required style="font-size: 16px;">
+                            <input type="submit" style="font-size: 16px;">
+                        </form> -->
                     </h4>
                     <form action="/logout" method="POST" class="my-4">
                         <div class="form-group">
@@ -123,7 +134,7 @@
             </div>
         </div>
 
-        <footer>
+        <footer class="hideme">
             <link rel="stylesheet" type="text/css"
                 href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
             Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours).
diff --git a/views/signup.ejs b/views/signup.ejs
index b6b0eae..3d1356b 100644
--- a/views/signup.ejs
+++ b/views/signup.ejs
@@ -100,7 +100,7 @@
                         <div class="form-group">
                             <label for="emailSignup" class="sr-only">Email</label>
                             <input type="email" name="emailSignup" id="emailSignup" class="form-control mr-2"
-                                placeholder="Email" pattern=".{6,}" required>
+                                placeholder="Email" pattern=".{6,}">
                             <small id="loginUserhelp" class="form-text text-muted">Don't worry, we never share your email with anyone. Fake users will be pruned and deleted.</small>
                         </div>
                         <div class="form-group">
@@ -111,8 +111,25 @@
                         </div>
                         <div class="form-group">
                             <label for="passSignup" class="sr-only">Password</label>
-                            <input type="password" name="passSignup" id="passSignup" class="form-control mr-2"
+                            <input type="password" name="passSignup" id="passSignup" class="form-control mr-2 mb-2"
                                 placeholder="Password" pattern=".{3,}" required>
+                            <input type="password" name="passSignupCheck" id="passSignupCheck" class="form-control mr-2"
+                                placeholder="Confirm Password" pattern=".{3,}" required>
+                            <script>
+                                var password = document.getElementById("passSignup"),
+                                    confirm_password = document.getElementById("passSignupCheck");
+
+                                function validatePassword() {
+                                    if (password.value != confirm_password.value) {
+                                        confirm_password.setCustomValidity("Passwords do not match!");
+                                    } else {
+                                        confirm_password.setCustomValidity('');
+                                    }
+                                }
+
+                                password.onchange = validatePassword;
+                                confirm_password.onkeyup = validatePassword;
+                            </script>
                             <small id="loginUserhelp" class="form-text text-muted">Pick something secure and easy to remember! Must be atleast 3 characters.</small>
                             <div>
                                 <input type="checkbox" class="form-check-input" id="terms-check" required style="margin-left: 0 !important; margin-top: .45rem;">
@@ -132,7 +149,7 @@
             </div>
         </div>
 
-        <footer>
+        <footer class="hideme">
             <link rel="stylesheet" type="text/css"
                 href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
             Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours).
-- 
cgit v1.2.3