https://telecominfraproject.atlassian.net/browse/WIFI-11303

Signed-off-by: stephb9959 <stephane.bourque@gmail.com>

src/ActionLinkManager.cpp

@@ -110,7 +110,7 @@ namespace OpenWifi {
 
                     case OpenWifi::SecurityObjects::LinkActions::SUB_SIGNUP: {
                         auto Signup = Poco::StringTokenizer(UInfo.signingUp,":");
-                        if(AuthService::SendEmailToSubUser(i.id, UInfo.email, MessagingTemplates::SIGNUP_VERIFICATION, Signup.count()==1 ? "" : Signup[0])) {
+                        if(AuthService::SendEmailToSubUser(i.id, UInfo.email, MessagingTemplates::SUB_SIGNUP_VERIFICATION, Signup.count()==1 ? "" : Signup[0])) {
                             poco_information(Logger(),fmt::format("Send new subscriber email verification link to {}",UInfo.email));
                         }
                         StorageService()->ActionLinksDB().SentAction(i.id);

src/AuthService.cpp

@@ -689,14 +689,14 @@ namespace OpenWifi {
                 }
                 break;
 
-                case MessagingTemplates::SIGNUP_VERIFICATION: {
+                case MessagingTemplates::SUB_SIGNUP_VERIFICATION: {
                     MessageAttributes Attrs;
                     Attrs[RECIPIENT_EMAIL] = UInfo.email;
                     Attrs[LOGO] = GetSubLogoAssetURI();
                     Attrs[SUBJECT] = "Signup e-mail Address Verification";
                     Attrs[ACTION_LINK] = MicroServiceGetPublicAPIEndPoint() + "/actionLink?action=signup_verification&id=" + LinkId ;
                     Attrs[ACTION_LINK_HTML] = "/api/v1/actionLink?action=signup_verification&id=" + LinkId ;
-                    SMTPMailerService()->SendMessage(UInfo.email, MessagingTemplates::TemplateName(MessagingTemplates::SIGNUP_VERIFICATION, OperatorName), Attrs, true);
+                    SMTPMailerService()->SendMessage(UInfo.email, MessagingTemplates::TemplateName(MessagingTemplates::SUB_SIGNUP_VERIFICATION, OperatorName), Attrs, true);
                     UInfo.waitingForEmailCheck = true;
                 }
                 break;

src/MessagingTemplates.h

@@ -19,7 +19,7 @@ namespace OpenWifi {
         enum EMAIL_REASON {
             FORGOT_PASSWORD = 0,
             EMAIL_VERIFICATION,
-            SIGNUP_VERIFICATION,
+            SUB_SIGNUP_VERIFICATION,
             EMAIL_INVITATION,
             VERIFICATION_CODE,
             SUB_FORGOT_PASSWORD,
@@ -37,7 +37,7 @@ namespace OpenWifi {
             switch (r) {
                 case FORGOT_PASSWORD: return AddOperator(EmailTemplateNames[FORGOT_PASSWORD],OperatorName);
                 case EMAIL_VERIFICATION: return AddOperator(EmailTemplateNames[EMAIL_VERIFICATION],OperatorName);
-                case SIGNUP_VERIFICATION: return AddOperator(EmailTemplateNames[SIGNUP_VERIFICATION],OperatorName);
+                case SUB_SIGNUP_VERIFICATION: return AddOperator(EmailTemplateNames[SUB_SIGNUP_VERIFICATION],OperatorName);
                 case EMAIL_INVITATION: return AddOperator(EmailTemplateNames[EMAIL_INVITATION],OperatorName);
                 case VERIFICATION_CODE: return AddOperator(EmailTemplateNames[VERIFICATION_CODE],OperatorName);
                 case SUB_FORGOT_PASSWORD: return AddOperator(EmailTemplateNames[SUB_FORGOT_PASSWORD],OperatorName);
@@ -60,7 +60,7 @@ namespace OpenWifi {
         inline const static std::vector<std::string>  EmailTemplateNames = {
                 "password_reset",
                 "email_verification",
-                "signup_verification",
+                "sub_signup_verification",
                 "email_invitation",
                 "verification_code",
                 "sub_password_reset",

src/RESTAPI/RESTAPI_action_links.cpp

@@ -62,7 +62,7 @@ namespace OpenWifi {
 
     void RESTAPI_action_links::DoNewSubVerification(SecurityObjects::ActionLink &Link) {
         Logger_.information(fmt::format("REQUEST-SUB-SIGNUP({}): For ID={}", Request->clientAddress().toString(), Link.userId));
-        Poco::File  FormFile{ Daemon()->AssetDir() + "/signup_verification.html"};
+        Poco::File  FormFile{ Daemon()->AssetDir() + "/sub_signup_verification.html"};
         Types::StringPairVec    FormVars{ {"UUID", Link.id},
                                           {"PASSWORD_VALIDATION", AuthService()->PasswordValidationExpression()}};
         SendHTMLFileBack(FormFile,FormVars);
@@ -161,7 +161,7 @@ namespace OpenWifi {
             }
 
             if(Password1!=Password2 || !AuthService()->ValidateSubPassword(Password1)) {
-                Poco::File  FormFile{ Daemon()->AssetDir() + "/password_reset_error.html"};
+                Poco::File  FormFile{ Daemon()->AssetDir() + "/sub_password_reset_error.html"};
                 Types::StringPairVec    FormVars{ {"UUID", Id},
                                                   {"ERROR_TEXT", "For some reason, the passwords entered do not match or they do not comply with"
                                                                  " accepted password creation restrictions. Please consult our on-line help"
@@ -173,14 +173,14 @@ namespace OpenWifi {
             SecurityObjects::UserInfo   UInfo;
             bool Found = StorageService()->SubDB().GetUserById(Link.userId,UInfo);
             if(!Found) {
-                Poco::File  FormFile{ Daemon()->AssetDir() + "/signup_verification_error.html"};
+                Poco::File  FormFile{ Daemon()->AssetDir() + "/sub_signup_verification_error.html"};
                 Types::StringPairVec    FormVars{ {"UUID", Id},
                                                   {"ERROR_TEXT", "This request does not contain a valid user ID. Please contact your system administrator."}};
                 return SendHTMLFileBack(FormFile,FormVars);
             }
 
             if(UInfo.blackListed || UInfo.suspended) {
-                Poco::File  FormFile{ Daemon()->AssetDir() + "/signup_verification_error.html"};
+                Poco::File  FormFile{ Daemon()->AssetDir() + "/sub_signup_verification_error.html"};
                 Types::StringPairVec    FormVars{ {"UUID", Id},
                                                   {"ERROR_TEXT", "Please contact our system administrators. We have identified an error in your account that must be resolved first."}};
                 return SendHTMLFileBack(FormFile,FormVars);
@@ -188,7 +188,7 @@ namespace OpenWifi {
 
             bool GoodPassword = AuthService()->SetSubPassword(Password1,UInfo);
             if(!GoodPassword) {
-                Poco::File  FormFile{ Daemon()->AssetDir() + "/signup_verification_error.html"};
+                Poco::File  FormFile{ Daemon()->AssetDir() + "/sub_signup_verification_error.html"};
                 Types::StringPairVec    FormVars{ {"UUID", Id},
                                                   {"ERROR_TEXT", "You cannot reuse one of your recent passwords."}};
                 return SendHTMLFileBack(FormFile,FormVars);
@@ -202,7 +202,7 @@ namespace OpenWifi {
 
             StorageService()->SubDB().UpdateUserInfo(UInfo.email,Link.userId,UInfo);
 
-            Poco::File  FormFile{ Daemon()->AssetDir() + "/signup_verification_success.html"};
+            Poco::File  FormFile{ Daemon()->AssetDir() + "/sub_signup_verification_success.html"};
             Types::StringPairVec    FormVars{ {"UUID", Id},
                                               {"USERNAME", UInfo.email} };
             StorageService()->ActionLinksDB().CompleteAction(Id);

wwwassets/404_error.css

@@ -1,294 +1,308 @@
 @import url(https://fonts.googleapis.com/css?family=Ubuntu);
-html,
-body {
-    background: #28254c;
-    font-family: "Ubuntu";
+html, body {
+  font-family: "Ubuntu";
 }
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
+
 .box {
-    width: 350px;
-    height: 100%;
-    max-height: 600px;
-    min-height: 450px;
-    background: #332f63;
-    border-radius: 20px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: 30px 50px;
+  width: 350px;
+  height: 100%;
+  max-height: 600px;
+  min-height: 450px;
+  background: #332F63;
+  border-radius: 20px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 30px 50px;
 }
 .box .box__ghost {
-    padding: 15px 25px 25px;
-    position: absolute;
-    left: 50%;
-    top: 30%;
-    transform: translate(-50%, -30%);
+  padding: 15px 25px 25px;
+  position: absolute;
+  left: 50%;
+  top: 20%;
+  transform: translate(-50%, -30%);
+}
+
+.logo-box {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+.logo-img {
+  width: 100%;
+  height: 100%;
+  max-height: 120px;
+  margin-left:15px;
+  margin-top: 10px;
+  object-fit: contain;
 }
 .box .box__ghost .symbol:nth-child(1) {
-    opacity: 0.2;
-    animation: shine 4s ease-in-out 3s infinite;
+  opacity: 0.2;
+  animation: shine 4s ease-in-out 3s infinite;
 }
 .box .box__ghost .symbol:nth-child(1):before, .box .box__ghost .symbol:nth-child(1):after {
-    content: "";
-    width: 12px;
-    height: 4px;
-    background: #fff;
-    position: absolute;
-    border-radius: 5px;
-    bottom: 65px;
-    left: 0;
+  content: "";
+  width: 12px;
+  height: 4px;
+  background: #fff;
+  position: absolute;
+  border-radius: 5px;
+  bottom: 65px;
+  left: 0;
 }
 .box .box__ghost .symbol:nth-child(1):before {
-    transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 .box .box__ghost .symbol:nth-child(1):after {
-    transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 .box .box__ghost .symbol:nth-child(2) {
-    position: absolute;
-    left: -5px;
-    top: 30px;
-    height: 18px;
-    width: 18px;
-    border: 4px solid;
-    border-radius: 50%;
-    border-color: #fff;
-    opacity: 0.2;
-    animation: shine 4s ease-in-out 1.3s infinite;
+  position: absolute;
+  left: -5px;
+  top: 30px;
+  height: 18px;
+  width: 18px;
+  border: 4px solid;
+  border-radius: 50%;
+  border-color: #fff;
+  opacity: 0.2;
+  animation: shine 4s ease-in-out 1.3s infinite;
 }
 .box .box__ghost .symbol:nth-child(3) {
-    opacity: 0.2;
-    animation: shine 3s ease-in-out 0.5s infinite;
+  opacity: 0.2;
+  animation: shine 3s ease-in-out 0.5s infinite;
 }
 .box .box__ghost .symbol:nth-child(3):before, .box .box__ghost .symbol:nth-child(3):after {
-    content: "";
-    width: 12px;
-    height: 4px;
-    background: #fff;
-    position: absolute;
-    border-radius: 5px;
-    top: 5px;
-    left: 40px;
+  content: "";
+  width: 12px;
+  height: 4px;
+  background: #fff;
+  position: absolute;
+  border-radius: 5px;
+  top: 5px;
+  left: 40px;
 }
 .box .box__ghost .symbol:nth-child(3):before {
-    transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 .box .box__ghost .symbol:nth-child(3):after {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 .box .box__ghost .symbol:nth-child(4) {
-    opacity: 0.2;
-    animation: shine 6s ease-in-out 1.6s infinite;
+  opacity: 0.2;
+  animation: shine 6s ease-in-out 1.6s infinite;
 }
 .box .box__ghost .symbol:nth-child(4):before, .box .box__ghost .symbol:nth-child(4):after {
-    content: "";
-    width: 15px;
-    height: 4px;
-    background: #fff;
-    position: absolute;
-    border-radius: 5px;
-    top: 10px;
-    right: 30px;
+  content: "";
+  width: 15px;
+  height: 4px;
+  background: #fff;
+  position: absolute;
+  border-radius: 5px;
+  top: 10px;
+  right: 30px;
 }
 .box .box__ghost .symbol:nth-child(4):before {
-    transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 .box .box__ghost .symbol:nth-child(4):after {
-    transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 .box .box__ghost .symbol:nth-child(5) {
-    position: absolute;
-    right: 5px;
-    top: 40px;
-    height: 12px;
-    width: 12px;
-    border: 3px solid;
-    border-radius: 50%;
-    border-color: #fff;
-    opacity: 0.2;
-    animation: shine 1.7s ease-in-out 7s infinite;
+  position: absolute;
+  right: 5px;
+  top: 40px;
+  height: 12px;
+  width: 12px;
+  border: 3px solid;
+  border-radius: 50%;
+  border-color: #fff;
+  opacity: 0.2;
+  animation: shine 1.7s ease-in-out 7s infinite;
 }
 .box .box__ghost .symbol:nth-child(6) {
-    opacity: 0.2;
-    animation: shine 2s ease-in-out 6s infinite;
+  opacity: 0.2;
+  animation: shine 2s ease-in-out 6s infinite;
 }
 .box .box__ghost .symbol:nth-child(6):before, .box .box__ghost .symbol:nth-child(6):after {
-    content: "";
-    width: 15px;
-    height: 4px;
-    background: #fff;
-    position: absolute;
-    border-radius: 5px;
-    bottom: 65px;
-    right: -5px;
+  content: "";
+  width: 15px;
+  height: 4px;
+  background: #fff;
+  position: absolute;
+  border-radius: 5px;
+  bottom: 65px;
+  right: -5px;
 }
 .box .box__ghost .symbol:nth-child(6):before {
-    transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 .box .box__ghost .symbol:nth-child(6):after {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 .box .box__ghost .box__ghost-container {
-    background: #fff;
-    width: 100px;
-    height: 100px;
-    border-radius: 100px 100px 0 0;
-    position: relative;
-    margin: 0 auto;
-    animation: upndown 3s ease-in-out infinite;
+  background: #fff;
+  width: 100px;
+  height: 100px;
+  border-radius: 100px 100px 0 0;
+  position: relative;
+  margin: 0 auto;
+  animation: upndown 3s ease-in-out infinite;
 }
 .box .box__ghost .box__ghost-container .box__ghost-eyes {
-    position: absolute;
-    left: 50%;
-    top: 45%;
-    height: 12px;
-    width: 70px;
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  height: 12px;
+  width: 70px;
 }
 .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left {
-    width: 12px;
-    height: 12px;
-    background: #332f63;
-    border-radius: 50%;
-    margin: 0 10px;
-    position: absolute;
-    left: 0;
+  width: 12px;
+  height: 12px;
+  background: #332F63;
+  border-radius: 50%;
+  margin: 0 10px;
+  position: absolute;
+  left: 0;
 }
 .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
-    width: 12px;
-    height: 12px;
-    background: #332f63;
-    border-radius: 50%;
-    margin: 0 10px;
-    position: absolute;
-    right: 0;
+  width: 12px;
+  height: 12px;
+  background: #332F63;
+  border-radius: 50%;
+  margin: 0 10px;
+  position: absolute;
+  right: 0;
 }
 .box .box__ghost .box__ghost-container .box__ghost-bottom {
-    display: flex;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
+  display: flex;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
 }
 .box .box__ghost .box__ghost-container .box__ghost-bottom div {
-    flex-grow: 1;
-    position: relative;
-    top: -10px;
-    height: 20px;
-    border-radius: 100%;
-    background-color: #fff;
+  flex-grow: 1;
+  position: relative;
+  top: -10px;
+  height: 20px;
+  border-radius: 100%;
+  background-color: #fff;
 }
 .box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
-    top: -12px;
-    margin: 0 0px;
-    border-top: 15px solid #332f63;
-    background: transparent;
+  top: -12px;
+  margin: 0 0px;
+  border-top: 15px solid #332F63;
+  background: transparent;
 }
 .box .box__ghost .box__ghost-shadow {
-    height: 20px;
-    box-shadow: 0 50px 15px 5px #3b3769;
-    border-radius: 50%;
-    margin: 0 auto;
-    animation: smallnbig 3s ease-in-out infinite;
+  height: 20px;
+  box-shadow: 0 50px 15px 5px #3B3769;
+  border-radius: 50%;
+  margin: 0 auto;
+  animation: smallnbig 3s ease-in-out infinite;
 }
 .box .box__description {
-    position: absolute;
-    bottom: 30px;
-    left: 50%;
-    transform: translateX(-50%);
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 .box .box__description .box__description-container {
-    color: #fff;
-    text-align: center;
-    width: 200px;
-    font-size: 16px;
-    margin: 0 auto;
+  color: #fff;
+  text-align: left;
+  width: 200px;
+  font-size: 16px;
+  margin: 0 auto;
 }
 .box .box__description .box__description-container .box__description-title {
-    font-size: 24px;
-    letter-spacing: 0.5px;
+  font-size: 24px;
+  letter-spacing: 0.5px;
 }
 .box .box__description .box__description-container .box__description-text {
-    color: #8c8aa7;
-    line-height: 20px;
-    margin-top: 20px;
+  color: #8C8AA7;
+  line-height: 20px;
+  margin-top: 20px;
 }
 .box .box__description .box__button {
-    display: block;
-    position: relative;
-    background: #ff5e65;
-    border: 1px solid transparent;
-    border-radius: 50px;
-    height: 50px;
-    text-align: center;
-    text-decoration: none;
-    color: #fff;
-    line-height: 50px;
-    font-size: 18px;
-    padding: 0 70px;
-    white-space: nowrap;
-    margin-top: 25px;
-    transition: background 0.5s ease;
-    overflow: hidden;
-    -webkit-mask-image: -webkit-radial-gradient(white, black);
+  display: block;
+  position: relative;
+  background: #FF5E65;
+  border: 1px solid transparent;
+  border-radius: 50px;
+  height: 50px;
+  text-align: center;
+  text-decoration: none;
+  color: #fff;
+  line-height: 50px;
+  font-size: 18px;
+  padding: 0 70px;
+  white-space: nowrap;
+  margin-top: 25px;
+  transition: background 0.5s ease;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
 .box .box__description .box__button:before {
-    content: "";
-    position: absolute;
-    width: 20px;
-    height: 100px;
-    background: #fff;
-    bottom: -25px;
-    left: 0;
-    border: 2px solid #fff;
-    transform: translateX(-50px) rotate(45deg);
-    transition: transform 0.5s ease;
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 100px;
+  background: #fff;
+  bottom: -25px;
+  left: 0;
+  border: 2px solid #fff;
+  transform: translateX(-50px) rotate(45deg);
+  transition: transform 0.5s ease;
 }
 .box .box__description .box__button:hover {
-    background: transparent;
-    border-color: #fff;
+  background: transparent;
+  border-color: #fff;
 }
 .box .box__description .box__button:hover:before {
-    transform: translateX(250px) rotate(45deg);
+  transform: translateX(250px) rotate(45deg);
 }
 
 @keyframes upndown {
-    0% {
-        transform: translateY(5px);
-    }
-    50% {
-        transform: translateY(15px);
-    }
-    100% {
-        transform: translateY(5px);
-    }
+  0% {
+    transform: translateY(5px);
+  }
+  50% {
+    transform: translateY(15px);
+  }
+  100% {
+    transform: translateY(5px);
+  }
 }
 @keyframes smallnbig {
-    0% {
-        width: 90px;
-    }
-    50% {
-        width: 100px;
-    }
-    100% {
-        width: 90px;
-    }
+  0% {
+    width: 90px;
+  }
+  50% {
+    width: 100px;
+  }
+  100% {
+    width: 90px;
+  }
 }
 @keyframes shine {
-    0% {
-        opacity: 0.2;
-    }
-    25% {
-        opacity: 0.1;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0.2;
-    }
+  0% {
+    opacity: 0.2;
+  }
+  25% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0.2;
+  }
 }

wwwassets/404_error.html

@@ -1,70 +1,64 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" >
 <head>
-    <meta charset="UTF-8">
-    <title>Whoops...</title>
-    <link rel="stylesheet" href="/wwwassets/404_error.css">
+  <meta charset="UTF-8">
+  <title>Whoops!</title>
+  <link rel="stylesheet" href="./404_error.css">
 </head>
 <body>
+
+<div class="logo-box"><img src="logo.png" alt="Arilia" class="logo-img"></div>
+<div class="box-container">
 <div class="box">
-    <div class="box__ghost">
-        <div class="symbol"></div>
-        <div class="symbol"></div>
-        <div class="symbol"></div>
-        <div class="symbol"></div>
-        <div class="symbol"></div>
-        <div class="symbol"></div>
-
-        <div class="box__ghost-container">
-            <div class="box__ghost-eyes">
-                <div class="box__eye-left"></div>
-                <div class="box__eye-right"></div>
-            </div>
-            <div class="box__ghost-bottom">
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-            </div>
-        </div>
-        <div class="box__ghost-shadow"></div>
+  <div class="box__ghost">
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    
+    <div class="box__ghost-container">
+      <div class="box__ghost-eyes">
+        <div class="box__eye-left"></div>
+        <div class="box__eye-right"></div>
+      </div>
+      <div class="box__ghost-bottom">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </div>
-
-    <div class="box__description">
-        <div class="box__description-container">
-            <div class="box__description-title">Whoops!</div>
-            <div class="box__description-text">You know computers sometimes go crazy... So we'll just assume one of them got
-                fed up and refused to help you...
-                If you get this again, we need to know. We need to let that thing know who's the boss...
-            </div>
-        </div>
-        <!-- <a href="https://codepen.io/diogo_ml_gomes/" target="_blank" class="box__button">Go back</a> -->
+    <div class="box__ghost-shadow"></div>
+  </div>
+  
+  <div class="box__description">
+    <div class="box__description-container">
+      <div class="box__description-title">Whoops!</div>
+      <div class="box__description-text">You know computers sometimes go crazy...</div>
+      <div class="box__description-text">So we'll just assume one of them got
+                fed up and refused to help you...</div>
+      <div class="box__description-text"> If you get this again, we need to know. We need to let that thing know who's the boss...</div>
     </div>
-
-</div>
-
-<script>
-    //based on https://dribbble.com/shots/3913847-404-page
-
-    var pageX = $(document).width();
+  </div>
+  
+</div></div>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script>var pageX = $(document).width();
     var pageY = $(document).height();
     var mouseY=0;
     var mouseX=0;
 
     $(document).mousemove(function( event ) {
-        //verticalAxis
         mouseY = event.pageY;
-        yAxis = (pageY/2-mouseY)/pageY*300;
-        //horizontalAxis
+        yAxis = (pageY/2-mouseY)/pageY*300; 
         mouseX = event.pageX / -pageX;
         xAxis = -mouseX * 100 - 100;
 
-        $('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' });
-
-        //console.log('X: ' + xAxis);
-
+        $('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' }); 
     });
 </script>
+
 </body>
-</html>
+</html>

wwwassets/access_policy.html

@@ -1,102 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <title>Access Policy</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {font-family: Arial, Helvetica, sans-serif;}
-        form {border: 3px solid #f1f1f1;}
-
-        input[type=text], input[type=password] {
-            width: 100%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        .info-card {
-            padding: 30px;
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            display: block;
-            width: 50%;
-            border: 1em;
-            background-color: white;
-            width: 40%;
-            height: auto;
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: auto;
-            margin-top: 50px;
-            position: relative;
-        }
-        
-        .info-list {
-            width: 80%;
-            margin: auto;
-        }
-
-        .info-title {
-            padding-bottom: 20px;
-            width: 80%;
-            margin: auto;
-        }
-
-        .container {
-            padding: 16px;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        body {
-            background-color: #ebedef;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
+  <link rel="stylesheet" href="./common.css">
 </head>
 <body>
 
 <div class="logo-grid">
     <div></div>
-    <div><img src="/wwwassets/logo.png" alt="OpenWifi"></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
     <div></div>
 </div>
 
@@ -105,8 +18,15 @@
     <ul class="info-list">
         <li>Must be a TIP Member.</li>
     </ul>
+     <div id="footer" />
 </div>
 
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
 
+</script>
 </body>
 </html>

wwwassets/common.css

@@ -0,0 +1,171 @@
+body {font-family: Arial, Helvetica, sans-serif;}
+
+input[type=text], input[type=password] {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+button {
+  background-color: #04AA6D;
+  color: white;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+.logo-grid {
+  display: grid;
+  grid-template-columns: 20% 60% 20%;
+  margin-top: calc(10vh)
+}
+
+.logo-grid > div > img {
+  width: 100%;
+  height: 100%;
+  max-height: 200px;
+  object-fit: contain;
+}
+
+
+.info-card {
+  padding: 30px;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  display: block;
+  width: 50%;
+  min-width: 400px;
+  border: 1em;
+  background-color: white;
+  width: 40%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: auto;
+  margin-top: 50px;
+  position: relative;
+  border-radius: 15px;
+}
+
+.info-list {
+  margin-left: 5%;
+}
+
+.info-title {
+  margin-left: 5%;
+  color: #63B3ED;
+}
+
+.flex-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  margin-left: 5%;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  min-height: 30px
+}
+
+.flex-box > h3 {
+  margin-right: 4px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.container {
+  padding: 16px;
+}
+
+span.password1 {
+  float: right;
+  padding-top: 16px;
+}
+
+body {
+  background-color: #ebedef;
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+  span.password1 {
+    display: block;
+    float: none;
+  }
+  .cancelbtn {
+    width: 100%;
+  }
+}
+
+.form-container {
+  border: 0px;
+  margin-left: 5%;
+}
+
+.form-label {
+    float: left;
+}
+
+.form-input {
+  border-radius: 15px;
+}
+
+.form-control {
+  margin-bottom: 6px;
+}
+
+.form-submit-btn {
+    display: inline-flex;
+    appearance: none;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    position: relative;
+    white-space: nowrap;
+    vertical-align: middle;
+    outline-color: transparent;
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 2px;
+    line-height: 1.2;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+    height: 45px;
+    background-color:#4299E1;
+    font-size: 15px;
+    padding-inline-start: 16px;
+    padding-inline-end: 16px;
+    width: 100%;
+    margin-bottom: 20px;
+    color: white;
+    margin-top: 20px;
+}
+
+.footer{
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  margin-left: 5%;
+}
+
+hr.rounded {
+  margin-top: 40px;
+  margin-bottom: 0px;
+  margin-left: 5%;
+  margin-right: 5%;
+  border-top: 1px solid #bbb;
+  border-radius: 5px;
+}

wwwassets/email_verification_error.html

@@ -1,121 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>email Verification Error</title>
-
-    <style>
-        body {font-family: Arial, Helvetica, sans-serif;}
-        form {border: 3px solid #f1f1f1;}
-
-        input[type=text], input[type=password] {
-            width: 100%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        .info-card {
-            padding: 30px;
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            display: block;
-            width: 50%;
-            border: 1em;
-            background-color: white;
-            width: 40%;
-            height: auto;
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: auto;
-            margin-top: 50px;
-            position: relative;
-        }
-
-        .info-list {
-            width: 80%;
-            margin: auto;
-        }
-
-        .info-title {
-            padding-bottom: 20px;
-            width: 80%;
-            margin: auto;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .container {
-            padding: 16px;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        body {
-            background-color: #ebedef;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
+    <title>Email Verification Error</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
 </head>
 <body>
 
 <div class="logo-grid">
     <div></div>
-    <div><img src="/wwwassets/logo.png" alt="OpenWifi"></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
     <div></div>
 </div>
 
-<h1>Password reset failed...</h1>
-<div>
-  <h3>ID</h3>
-  <b>${UUID}</b>
-</div>
-<div>
-  <h3>Error</h3>
-  <b>${ERROR_TEXT}</b>
+<div class="info-card">
+    <h2 class="info-title">Email Verification Failed...</h2>
+    <div class="flex-box">
+        <h3>ID: </h3>
+        <b>${UUID}</b>
+    </div>
+    <div class="flex-box">
+        <h3>Error: </h3>
+        <b>${ERROR_TEXT}</b>
+    </div>
+     <div id="footer" />
 </div>
 
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
+
+</script>
 </body>
-</html>
+</html>

wwwassets/email_verification_success.html

@@ -1,119 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>email was successfully validated</title>
-  <style>
-    body {font-family: Arial, Helvetica, sans-serif;}
-    form {border: 3px solid #f1f1f1;}
-
-    input[type=text], input[type=password] {
-      width: 100%;
-      padding: 12px 20px;
-      margin: 8px 0;
-      display: inline-block;
-      border: 1px solid #ccc;
-      box-sizing: border-box;
-    }
-
-    button {
-      background-color: #04AA6D;
-      color: white;
-      padding: 14px 20px;
-      margin: 8px 0;
-      border: none;
-      cursor: pointer;
-      width: 100%;
-    }
-
-    button:hover {
-      opacity: 0.8;
-    }
-
-    .logo-grid {
-      display: grid;
-      grid-template-columns: 20% 60% 20%;
-    }
-
-    .logo-grid > div > img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-
-    .info-card {
-      padding: 30px;
-      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-      display: block;
-      width: 50%;
-      border: 1em;
-      background-color: white;
-      width: 40%;
-      height: auto;
-      margin-left: auto;
-      margin-right: auto;
-      margin-bottom: auto;
-      margin-top: 50px;
-      position: relative;
-    }
-
-    .info-list {
-      width: 80%;
-      margin: auto;
-    }
-
-    .info-title {
-      padding-bottom: 20px;
-      width: 80%;
-      margin: auto;
-    }
-
-    img.avatar {
-      width: 40%;
-      border-radius: 50%;
-    }
-
-    .container {
-      padding: 16px;
-    }
-
-    span.password1 {
-      float: right;
-      padding-top: 16px;
-    }
-
-    body {
-      background-color: #ebedef;
-    }
-
-    /* Change styles for span and cancel button on extra small screens */
-    @media screen and (max-width: 300px) {
-      span.password1 {
-        display: block;
-        float: none;
-      }
-      .cancelbtn {
-        width: 100%;
-      }
-    }
-  </style>
-
+    <title>Email Validated!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
 </head>
 <body>
 
 <div class="logo-grid">
-  <div></div>
-  <div><img src="/wwwassets/logo.png" alt="OpenWifi"></div>
-  <div></div>
+    <div></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
 </div>
 
-<h1>email was successfully validated</h1>
-<div>
-  <h3>ID</h3>
-  <b>${UUID}</b>
-</div>
-<div>
-  <h3>Thank you ${USERNAME} for validating your email.</h3>
+<div class="info-card">
+    <h2 class="info-title">Email verification completed!</h2>
+    <div class="flex-box">
+        <h3>ID: </h3>
+        <b>${UUID}</b>
+    </div>
+    <div class="flex-box">
+        <h3>Thank you ${USERNAME} for completing email verification!</h3>
+    </div>
+     <div id="footer" />
 </div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
+
+</script>
 </body>
-</html>
+</html>

wwwassets/footer.html

@@ -0,0 +1,11 @@
+<hr class="rounded">
+<div class="footer">
+  <p>
+    For questions & support regarding this application, please contact us at
+    <a href="mailto:tip-keys@arilia.com" target="_blank">tip-keys@arilia.com</a>.
+    For question regarding the Telecom Infra Project, please contact us at
+    <a href="mailto:info@telecominfraproject.com">
+        info@telecominfraproject.com
+    </a>.
+  </p>
+</div>

wwwassets/password_policy.html

@@ -1,113 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <title>Password Policy</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {font-family: Arial, Helvetica, sans-serif;}
-        form {border: 3px solid #f1f1f1;}
-
-        input[type=text], input[type=password] {
-            width: 100%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .container {
-            padding: 16px;
-        }
-
-        .info-card {
-            padding: 30px;
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            display: block;
-            width: 50%;
-            border: 1em;
-            background-color: white;
-            width: 40%;
-            height: auto;
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: auto;
-            margin-top: 50px;
-            position: relative;
-        }
-
-        .info-list {
-            width: 80%;
-            margin: auto;
-        }
-
-        .info-title {
-            padding-bottom: 20px;
-            width: 80%;
-            margin: auto;
-        }
-        
-        .body {
-            background-color: #ebedef;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
+  <link rel="stylesheet" href="./common.css">
 </head>
-<body class="body">
+<body>
 
 <div class="logo-grid">
     <div></div>
-    <div><img src="/wwwassets/logo.png" alt="OpenWifi"></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
     <div></div>
 </div>
 
-
 <div class="info-card">
-    <h2 class="info-title">Password rules</h2>
+    <h2 class="info-title">Password Policy</h2>
     <ul class="info-list">
         <li>Must be at least 8 characters long</li>
         <li>Must contain 1 uppercase letter</li>
@@ -115,9 +22,16 @@
         <li>Must contain 1 digit</li>
         <li>Must contain 1 special character</li>
     </ul>
+     <div id="footer" />
 </div>
 
 
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
 
+</script>
 </body>
 </html>

wwwassets/password_reset.html

@@ -1,168 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <title>Reset Password</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {
-            font-family: Arial, 
-            Helvetica, sans-serif;
-            background-color: #ebedef;
-        }
-
-        .body {
-            background-color: #ebedef;
-        }
-
-        input[type=text], input[type=password] {
-            width: 90%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 40%;
-            font-size: medium;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .grid-container  {
-            display: grid;
-            grid-template-columns: 15% 70% 15%;
-            grid-column-gap: 5px;
-            background-color: rgba(255, 255, 255, 0.8);
-            text-align: center;
-            padding: 30px;
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            display: block;
-            width: 50%;
-            border: 1em;
-            background-color: white;
-            width: 40%;
-            height: auto;
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: auto;
-            margin-top: 50px;
-            position: relative;
-        }
-
-        .passwordtext {
-            float: left;
-            margin-left: 5%;
-        }
-
-        .password-input {
-            margin-top: 0px;
-        }
-
-        .rulestext {
-            width: 95%;
-            margin: auto;
-            display: inline-block;
-            text-align: left;
-            text-justify: none;
-            margin: 5px 0 5px 0;
-            grid-column-start: 2;
-            grid-column-end: 2;
-        }
-
-        ul {
-            display: inline-block;
-            text-align: left;
-            font-size: small;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
+  <link rel="stylesheet" href="./common.css">
 </head>
-
 <body>
 
 <div class="logo-grid">
     <div></div>
-    <div><img src="/wwwassets/logo.png" alt="OpenWifi"></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
     <div></div>
 </div>
 
-<form action="/api/v1/actionLink?action=password_reset" method="post" onsubmit="return validatePassword()">
-<input type="hidden" id="custId" name="id" value="${UUID}">
-<div class="grid-container">
-    <h2>Reset Password</h2>
-    <div class="passwordlabel">
-        <label class="passwordtext" for="password1" ><b>New Password</b></label>
-        <input className="password-input" id="password1" type="password" placeholder="New Password" name="password1" pattern="${PASSWORD_VALIDATION}" required>
-    </div>
-    <div class="passwordlabel">
-        <label class="passwordtext" for="password2"><b>Retype Password</b></label>
-        <input id="password2" type="password" placeholder="Retype Password" name="password2" pattern="${PASSWORD_VALIDATION}" required>
-    </div>
-    <div class="passwordlabel">
-        <button type="submit">Reset Password</button>
-    </div>
-
-    <div class="rulestext">
-        <ul>
-            <li>Must be at least 8 characters long</li>
-            <li>Must contain 1 uppercase letter</li>
-            <li>Must contain 1 lowercase letter</li>
-            <li>Must contain 1 digit</li>
-            <li>Must contain 1 special character</li>
-        </ul>
-    </div>
+<div class="info-card">
+    <h2 class="info-title">Reset Password</h2>
+    <form action="/api/v1/actionLink?action=password_reset" method="post" onsubmit="return validatePassword()" class="form-container">
+        <div class="form-control">
+            <label class="form-label" for="password1" ><b>New Password</b></label>
+            <input class="form-input" id="password1" type="password" placeholder="New password" name="password1" pattern="${PASSWORD_VALIDATION}" required>
+        </div>
+        <div class="form-control">
+            <label class="form-label" for="password2"><b>Confirm New Password</b></label>
+            <input class="form-input" id="password2" type="password" placeholder="Enter new password again" name="password2" pattern="${PASSWORD_VALIDATION}" required>
+        </div>
+        <div class="form-control">
+            <button type="submit" class="form-submit-btn"><b>Reset Password</b></button>
+        </div>
+    </form>
+    <ul class="info-list">
+        <li>Must be at least 8 characters long</li>
+        <li>Must contain 1 uppercase letter</li>
+        <li>Must contain 1 lowercase letter</li>
+        <li>Must contain 1 digit</li>
+        <li>Must contain 1 special character</li>
+    </ul>
+     <div id="footer" />
 </div>
-</form>
 
 <script>
-function validatePassword() {
-    if(document.getElementById("password1").value == document.getElementById("password2").value) {
+ const validatePassword = () => {
+    const password1 = document.getElementById('password1').value;
+    const password2 = document.getElementById('password2').value;
+
+    if(password1 === password2) {
         return true;
     } else {
         alert("The 2 passwords did not match. The passwords must match to reset your new password.");
         return false;
     }
 }
+</script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
+
 </script>
 </body>
-</html>
+</html>

wwwassets/password_reset_error.html

@@ -1,121 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <title>Reset Password Error</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {font-family: Arial, Helvetica, sans-serif;}
-        form {border: 3px solid #f1f1f1;}
-
-        input[type=text], input[type=password] {
-            width: 100%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .container {
-            padding: 16px;
-        }
-
-        .info-card {
-            padding: 30px;
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            display: block;
-            width: 50%;
-            border: 1em;
-            background-color: white;
-            width: 40%;
-            height: auto;
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: auto;
-            margin-top: 50px;
-            position: relative;
-        }
-
-        .info-list {
-            width: 80%;
-            margin: auto;
-        }
-
-        .info-title {
-            padding-bottom: 20px;
-            width: 80%;
-            margin: auto;
-        }
-
-        .body {
-            background-color: #ebedef;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
+  <link rel="stylesheet" href="./common.css">
 </head>
-<body class="body">
+<body>
 
 <div class="logo-grid">
     <div></div>
-    <div><img src="/wwwassets/logo.png" alt="OpenWifi"></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
     <div></div>
 </div>
 
 <div class="info-card">
-    <h1 class="info-title">Reset Password Failed</h1>
-    <div>
-        <h3>ID</h3>
+    <h2 class="info-title">Reset Password Failed...</h2>
+    <div class="flex-box">
+        <h3>ID: </h3>
         <b>${UUID}</b>
     </div>
-    <div>
-        <h3>Error</h3>
+    <div class="flex-box">
+        <h3>Error: </h3>
         <b>${ERROR_TEXT}</b>
     </div>
+     <div id="footer" />
 </div>
 
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
+
+</script>
 </body>
 </html>

wwwassets/password_reset_success.html

@@ -1,85 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <title>Reset Password Success</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {font-family: Arial, Helvetica, sans-serif;}
-        form {border: 3px solid #f1f1f1;}
-
-        input[type=text], input[type=password] {
-            width: 100%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .container {
-            padding: 16px;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
+  <link rel="stylesheet" href="./common.css">
 </head>
-
 <body>
-    <div class="logo-grid">
-        <div></div>
-        <div><img src="/wwwassets/logo.png" alt="OpenWifi"></div>
-        <div></div>
-    </div>
 
-    <h1>Password was successfully reset</h1>
-    <div>
-        <h3>Thank you ${USERNAME} for resetting your password.</h3>
+<div class="logo-grid">
+    <div></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Password was successfully reset!</h2>
+    <div class="flex-box">
+        <h3>Thank you ${USERNAME} for resetting your password</h3>
     </div>
-    <div>
-        <a href="${ACTION_LINK}">Click here to access the system.</a>
+    <div class="flex-box">
+        <a href="${ACTION_LINK}">Click here to access the system</a>
     </div>
+     <div id="footer" />
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
+
+</script>
+
 </body>
-</html>
+</html>

wwwassets/signup_verification.html

@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {
-            font-family: Arial,
-            Helvetica, sans-serif;
-            background-color: #ebedef;
-        }
-
-        .body {
-            background-color: #ebedef;
-        }
-
-        input[type=text], input[type=password] {
-            width: 90%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 40%;
-            font-size: medium;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .grid-container  {
-            display: grid;
-            grid-template-columns: 15% 70% 15%;
-            grid-column-gap: 5px;
-            background-color: rgba(255, 255, 255, 0.8);
-            text-align: center;
-            padding: 30px;
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            display: block;
-            width: 50%;
-            border: 1em;
-            background-color: white;
-            width: 40%;
-            height: auto;
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: auto;
-            margin-top: 50px;
-            position: relative;
-        }
-
-        .passwordtext {
-            float: left;
-            margin-left: 5%;
-        }
-
-        .password-input {
-            margin-top: 0px;
-        }
-
-        .rulestext {
-            width: 95%;
-            margin: auto;
-            display: inline-block;
-            text-align: left;
-            text-justify: none;
-            margin: 5px 0 5px 0;
-            grid-column-start: 2;
-            grid-column-end: 2;
-        }
-
-        ul {
-            display: inline-block;
-            text-align: left;
-            font-size: small;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
-</head>
-
-<body>
-
-<div class="logo-grid">
-    <div></div>
-    <div><img src="/wwwassets/sub_logo.png" alt="OpenWifi"></div>
-    <div></div>
-</div>
-
-<form action="/api/v1/actionLink?action=signup_completion" method="post" onsubmit="return validatePassword()">
-    <input type="hidden" id="custId" name="id" value="${UUID}">
-    <div class="grid-container">
-        <h2>Signup Completion</h2>
-        <div class="passwordlabel">
-            <label class="passwordtext" for="password1" ><b>New Password</b></label>
-            <input className="password-input" id="password1" type="password" placeholder="Password" name="password1" pattern="${PASSWORD_VALIDATION}" required>
-        </div>
-        <div class="passwordlabel">
-            <label class="passwordtext" for="password2"><b>Retype Password</b></label>
-            <input className="password-input" id="password2" type="password" placeholder="Retype Password" name="password2" pattern="${PASSWORD_VALIDATION}" required>
-        </div>
-        <div class="passwordlabel">
-            <button type="submit">Complete Signup</button>
-        </div>
-
-        <div class="rulestext">
-            <ul>
-                <li>Must be at least 8 characters long</li>
-                <li>Must contain 1 uppercase letter</li>
-                <li>Must contain 1 lowercase letter</li>
-                <li>Must contain 1 digit</li>
-                <li>Must contain 1 special character</li>
-            </ul>
-        </div>
-    </div>
-</form>
-
-<script>
-    function validatePassword() {
-        if(document.getElementById("password1").value == document.getElementById("password2").value) {
-            return true;
-        } else {
-            alert("The 2 passwords did not match. The passwords must match to complete your signup.");
-            return false;
-        }
-    }
-</script>
-</body>
-</html>

wwwassets/signup_verification_error.html

@@ -1,122 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {font-family: Arial, Helvetica, sans-serif;}
-        form {border: 3px solid #f1f1f1;}
-
-        input[type=text], input[type=password] {
-            width: 100%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .container {
-            padding: 16px;
-        }
-
-        .info-card {
-            padding: 30px;
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            display: block;
-            width: 50%;
-            border: 1em;
-            background-color: white;
-            width: 40%;
-            height: auto;
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: auto;
-            margin-top: 50px;
-            position: relative;
-        }
-
-        .info-list {
-            width: 80%;
-            margin: auto;
-        }
-
-        .info-title {
-            padding-bottom: 20px;
-            width: 80%;
-            margin: auto;
-        }
-
-        .body {
-            background-color: #ebedef;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
-</head>
-<body class="body">
-
-<div class="logo-grid">
-    <div></div>
-    <div><img src="/wwwassets/sub_logo.png" alt="OpenWifi"></div>
-    <div></div>
-</div>
-
-
-<div class="info-card">
-    <h1 class="info-title">Signup completion failed</h1>
-    <div>
-        <h3>ID</h3>
-        <b>${UUID}</b>
-    </div>
-    <div>
-        <h3>Error</h3>
-        <b>${ERROR_TEXT}</b>
-    </div>
-</div>
-
-</body>
-</html>

wwwassets/signup_verification_success.html

@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {font-family: Arial, Helvetica, sans-serif;}
-        form {border: 3px solid #f1f1f1;}
-
-        input[type=text], input[type=password] {
-            width: 100%;
-            padding: 12px 20px;
-            margin: 8px 0;
-            display: inline-block;
-            border: 1px solid #ccc;
-            box-sizing: border-box;
-        }
-
-        button {
-            background-color: #04AA6D;
-            color: white;
-            padding: 14px 20px;
-            margin: 8px 0;
-            border: none;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        button:hover {
-            opacity: 0.8;
-        }
-
-        .logo-grid {
-            display: grid;
-            grid-template-columns: 20% 60% 20%;
-        }
-
-        .logo-grid > div > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        img.avatar {
-            width: 40%;
-            border-radius: 50%;
-        }
-
-        .container {
-            padding: 16px;
-        }
-
-        span.password1 {
-            float: right;
-            padding-top: 16px;
-        }
-
-        /* Change styles for span and cancel button on extra small screens */
-        @media screen and (max-width: 300px) {
-            span.password1 {
-                display: block;
-                float: none;
-            }
-            .cancelbtn {
-                width: 100%;
-            }
-        }
-    </style>
-</head>
-<body>
-<div class="logo-grid">
-    <div></div>
-    <div><img src="/wwwassets/sub_logo.png" alt="OpenWifi"></div>
-    <div></div>
-</div>
-
-<h1>Signup was successfully done</h1>
-<div>
-    <h3>Thank you ${USERNAME} for signing up for service.</h3>
-</div>
-<div>
-    You can access your account using the mobile app.
-</div>
-</body>
-</html>

wwwassets/sub_404_error.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Whoops!</title>
+  <link rel="stylesheet" href="./404_error.css">
+</head>
+<body>
+<div class="box">
+  <div class="box__ghost">
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    <div class="symbol"></div>
+    
+    <div class="box__ghost-container">
+      <div class="box__ghost-eyes">
+        <div class="box__eye-left"></div>
+        <div class="box__eye-right"></div>
+      </div>
+      <div class="box__ghost-bottom">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+    <div class="box__ghost-shadow"></div>
+  </div>
+  
+  <div class="box__description">
+    <div class="box__description-container">
+      <div class="box__description-title">Whoops!</div>
+      <div class="box__description-text">You know computers sometimes go crazy...</div>
+      <div class="box__description-text">So we'll just assume one of them got
+                fed up and refused to help you...</div>
+      <div class="box__description-text"> If you get this again, we need to know. We need to let that thing know who's the boss...</div>
+    <div><img src="sub_logo_dark.png" alt="Arilia" class="logo-img"></div>
+    </div>
+  </div>
+  
+</div>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script>var pageX = $(document).width();
+    var pageY = $(document).height();
+    var mouseY=0;
+    var mouseX=0;
+
+    $(document).mousemove(function( event ) {
+        mouseY = event.pageY;
+        yAxis = (pageY/2-mouseY)/pageY*300; 
+        mouseX = event.pageX / -pageX;
+        xAxis = -mouseX * 100 - 100;
+
+        $('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' }); 
+    });
+</script>
+
+</body>
+</html>

wwwassets/sub_access_policy.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Access Policy</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Site Access rules</h2>
+    <ul class="info-list">
+        <li>Must be a TIP Member.</li>
+    </ul>
+     <div id="footer" />
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+
+</body>
+</html>

wwwassets/sub_email_verification_error.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Email Verification Error</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Email Verification Failed...</h2>
+    <div class="flex-box">
+        <h3>ID: </h3>
+        <b>${UUID}</b>
+    </div>
+    <div class="flex-box">
+        <h3>Error: </h3>
+        <b>${ERROR_TEXT}</b>
+    </div>
+     <div id="footer" />
+</div>
+
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+</body>
+</html>

wwwassets/sub_email_verification_success.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Email Validated!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Email verification completed!</h2>
+    <div class="flex-box">
+        <h3>ID: </h3>
+        <b>${UUID}</b>
+    </div>
+    <div class="flex-box">
+        <h3>Thank you ${USERNAME} for completing email verification!</h3>
+    </div>
+     <div id="footer" />
+</div>
+
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+</body>
+</html>

wwwassets/sub_footer.html

@@ -0,0 +1,11 @@
+<hr class="rounded">
+<div class="footer">
+  <p>
+    For questions & support regarding this application, please contact us at
+    <a href="mailto:tip-keys@arilia.com" target="_blank">tip-keys@arilia.com</a>.
+    For question regarding the Telecom Infra Project, please contact us at
+    <a href="mailto:info@telecominfraproject.com">
+        info@telecominfraproject.com
+    </a>.
+  </p>
+</div>

wwwassets/sub_password_policy.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Password Policy</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Password Policy</h2>
+    <ul class="info-list">
+        <li>Must be at least 8 characters long</li>
+        <li>Must contain 1 uppercase letter</li>
+        <li>Must contain 1 lowercase letter</li>
+        <li>Must contain 1 digit</li>
+        <li>Must contain 1 special character</li>
+    </ul>
+     <div id="footer" />
+</div>
+
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+</body>
+</html>

wwwassets/sub_password_reset.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Reset Password</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Reset Password</h2>
+    <form action="/api/v1/actionLink?action=password_reset" method="post" onsubmit="return validatePassword()" class="form-container">
+        <div class="form-control">
+            <label class="form-label" for="password1" ><b>New Password</b></label>
+            <input class="form-input" id="password1" type="password" placeholder="New password" name="password1" pattern="${PASSWORD_VALIDATION}" required>
+        </div>
+        <div class="form-control">
+            <label class="form-label" for="password2"><b>Confirm New Password</b></label>
+            <input class="form-input" id="password2" type="password" placeholder="Enter new password again" name="password2" pattern="${PASSWORD_VALIDATION}" required>
+        </div>
+        <div class="form-control">
+            <button type="submit" class="form-submit-btn"><b>Reset Password</b></button>
+        </div>
+    </form>
+    <ul class="info-list">
+        <li>Must be at least 8 characters long</li>
+        <li>Must contain 1 uppercase letter</li>
+        <li>Must contain 1 lowercase letter</li>
+        <li>Must contain 1 digit</li>
+        <li>Must contain 1 special character</li>
+    </ul>
+     <div id="footer" />
+</div>
+
+<script>
+ const validatePassword = () => {
+    const password1 = document.getElementById('password1').value;
+    const password2 = document.getElementById('password2').value;
+
+    if(password1 === password2) {
+        return true;
+    } else {
+        alert("The 2 passwords did not match. The passwords must match to reset your new password.");
+        return false;
+    }
+}
+</script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+</body>
+</html>

wwwassets/sub_password_reset_error.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Reset Password Error</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Reset Password Failed...</h2>
+    <div class="flex-box">
+        <h3>ID: </h3>
+        <b>${UUID}</b>
+    </div>
+    <div class="flex-box">
+        <h3>Error: </h3>
+        <b>${ERROR_TEXT}</b>
+    </div>
+     <div id="footer" />
+</div>
+
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+</body>
+</html>

wwwassets/sub_password_reset_success.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Reset Password Success</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Password was successfully reset!</h2>
+    <div class="flex-box">
+        <h3>Thank you ${USERNAME} for resetting your password</h3>
+    </div>
+    <div class="flex-box">
+        <a href="${ACTION_LINK}">Click here to access the system</a>
+    </div>
+     <div id="footer" />
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+
+</body>
+</html>

wwwassets/sub_signup_verification.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Signup Completion</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="sub_logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Signup Completion</h2>
+    <form action="/api/v1/actionLink?action=signup_completion" method="post" onsubmit="return validatePassword()" class="form-container">
+        <div class="form-control">
+            <label class="form-label" for="password1" ><b>New Password</b></label>
+            <input class="form-input" id="password1" type="password" placeholder="New password" name="password1" pattern="${PASSWORD_VALIDATION}" required>
+        </div>
+        <div class="form-control">
+            <label class="form-label" for="password2"><b>Confirm New Password</b></label>
+            <input class="form-input" id="password2" type="password" placeholder="Enter new password again" name="password2" pattern="${PASSWORD_VALIDATION}" required>
+        </div>
+        <div class="form-control">
+            <button type="submit" class="form-submit-btn"><b>Complete Signup</b></button>
+        </div>
+    </form>
+    <ul class="info-list">
+        <li>Must be at least 8 characters long</li>
+        <li>Must contain 1 uppercase letter</li>
+        <li>Must contain 1 lowercase letter</li>
+        <li>Must contain 1 digit</li>
+        <li>Must contain 1 special character</li>
+    </ul>
+     <div id="footer" />
+</div>
+
+<script>
+ const validatePassword = () => {
+    const password1 = document.getElementById('password1').value;
+    const password2 = document.getElementById('password2').value;
+
+    if(password1 === password2) {
+        return true;
+    } else {
+        alert("The 2 passwords did not match. The passwords must match to complete your signup");
+        return false;
+    }
+}
+</script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./sub_footer.html"); 
+    });
+
+</script>
+</body>
+</html>

wwwassets/sub_signup_verification_error.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Signup Completion Error</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Signup Completion Failed...</h2>
+    <div class="flex-box">
+        <h3>ID: </h3>
+        <b>${UUID}</b>
+    </div>
+    <div class="flex-box">
+        <h3>Error: </h3>
+        <b>${ERROR_TEXT}</b>
+    </div>
+     <div id="footer" />
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
+
+</script>
+
+</body>
+</html>

wwwassets/sub_signup_verification_success.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Signup Completed!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./common.css">
+</head>
+<body>
+
+<div class="logo-grid">
+    <div></div>
+    <div><img src="logo.png" alt="Arilia" class="logo-img"></div>
+    <div></div>
+</div>
+
+<div class="info-card">
+    <h2 class="info-title">Signup process completed</h2>
+    <div class="flex-box">
+        <b>Thank you ${USERNAME} for signing up for service!</b>
+    </div>
+    <div class="flex-box">
+        <b>You can now access your account using the mobile app</b>
+    </div>
+     <div id="footer" />
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script>
+    $(function(){
+      $("#footer").load("./footer.html"); 
+    });
+
+</script>
+
+</body>
+</html>