Set paths to be relative so demos work in sub directories

iProov · Nov 8, 2018 · 40544ce · 40544ce
1 parent 82bfc15
commit 40544ce
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 27 deletions.
diff --git a/examples.html b/examples.html
@@ -9,7 +9,7 @@
     <link rel="shortcut icon" type="image/ico" href="https://www.iproov.com/favicon.ico"/>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css">
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="./style.css">
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
@@ -19,18 +19,18 @@
 <body class="text-left">
     <header>
         <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
-            <a class="navbar-brand" href="/">iProov HTML5 Demo</a>
+            <a class="navbar-brand" href="./">iProov HTML5 Demo</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarCollapse">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
-                        <a class="nav-link" href="/">Demo</a>
+                        <a class="nav-link" href="./">Demo</a>
                     </li>
                     <li class="nav-item active">
                         <a class="nav-link"
-                           href="examples.html">Examples <span class="sr-only">(current)</span></a>
+                           href="./examples.html">Examples <span class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link"
@@ -43,7 +43,7 @@
 
     <div class="alert fade fixed-top" role="alert"></div>
 
-    <form class="form-examples col-sm-11 col-md-10 col-lg-8 col-xl-6" action="/php/" method="post">
+    <form class="form-examples col-sm-11 col-md-10 col-lg-8 col-xl-6" action="./php/" method="post">
         <img class="mb-4 logo" src="https://www.iproov.com/images/iproov_logo.svg" alt="iProov" width="150">
         <h1 class="h3 mb-3 font-weight-normal">Configure the example</h1>
         <fieldset class="form-group">

diff --git a/examples/html.html b/examples/html.html
@@ -9,14 +9,14 @@
     <link rel="shortcut icon" type="image/ico" href="https://www.iproov.com/favicon.ico"/>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css">
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="../style.css">
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 
     <script src="https://secure.iproov.me/html5/v1/client"></script>
 
-    <script src="/examples.js"></script>
+    <script src="../examples.js"></script>
     <script>
         window.addEventListener('WebComponentsReady', function(event) {
             var component = document.querySelector('iproov-me');
@@ -36,18 +36,18 @@
 <body class="text-center">
     <header>
         <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
-            <a class="navbar-brand" href="/">iProov HTML5 Demo</a>
+            <a class="navbar-brand" href="../">iProov HTML5 Demo</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarCollapse">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
-                        <a class="nav-link" href="/">Demo</a>
+                        <a class="nav-link" href="../">Demo</a>
                     </li>
                     <li class="nav-item active">
                         <a class="nav-link"
-                           href="/examples.html">Examples <span class="sr-only">(current)</span></a>
+                           href="../examples.html">Examples <span class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link"

diff --git a/examples/javascript.html b/examples/javascript.html
@@ -9,13 +9,13 @@
     <link rel="shortcut icon" type="image/ico" href="https://www.iproov.com/favicon.ico"/>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css">
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="../style.css">
 
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 
     <script src="https://secure.iproov.me/html5/v1/client"></script>
 
-    <script src="/examples.js"></script>
+    <script src="../examples.js"></script>
     <script>
         window.addEventListener('WebComponentsReady', function(event) {
             var component = new IProovMe({
@@ -30,18 +30,18 @@
 <body class="text-center">
     <header>
         <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
-            <a class="navbar-brand" href="/">iProov HTML5 Demo</a>
+            <a class="navbar-brand" href="../">iProov HTML5 Demo</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarCollapse">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
-                        <a class="nav-link" href="/">Demo</a>
+                        <a class="nav-link" href="../">Demo</a>
                     </li>
                     <li class="nav-item active">
                         <a class="nav-link"
-                           href="/examples.html">Examples <span class="sr-only">(current)</span></a>
+                           href="../examples.html">Examples <span class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link"

diff --git a/examples/jquery.html b/examples/jquery.html
@@ -9,14 +9,14 @@
     <link rel="shortcut icon" type="image/ico" href="https://www.iproov.com/favicon.ico"/>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css">
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="../style.css">
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 
     <script src="https://secure.iproov.me/html5/v1/client"></script>
 
-    <script src="/examples.js"></script>
+    <script src="../examples.js"></script>
     <script>
         window.addEventListener('WebComponentsReady', function(event) {
             var component = $('<iproov-me token="***YOUR_TOKEN_HERE***" type="***YOUR_TYPE_HERE***"></iproov-me>');
@@ -28,18 +28,18 @@
 <body class="text-center">
     <header>
         <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
-            <a class="navbar-brand" href="/">iProov HTML5 Demo</a>
+            <a class="navbar-brand" href="../">iProov HTML5 Demo</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarCollapse">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
-                        <a class="nav-link" href="/">Demo</a>
+                        <a class="nav-link" href="../">Demo</a>
                     </li>
                     <li class="nav-item active">
                         <a class="nav-link"
-                           href="/examples.html">Examples <span class="sr-only">(current)</span></a>
+                           href="../examples.html">Examples <span class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link"

diff --git a/index.html b/index.html
@@ -16,23 +16,23 @@
 
     <script src="https://secure.iproov.me/html5/v1/client"></script>
 
-    <script src="/script.js"></script>
+    <script src="./script.js"></script>
 </head>
 <body class="text-center">
     <header>
         <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
-            <a class="navbar-brand" href="/">iProov HTML5 Demo</a>
+            <a class="navbar-brand" href="./">iProov HTML5 Demo</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarCollapse">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item active">
-                        <a class="nav-link" href="/">Demo <span class="sr-only">(current)</span></a>
+                        <a class="nav-link" href="./">Demo <span class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link"
-                           href="examples.html">Examples</a>
+                           href="./examples.html">Examples</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link"
@@ -45,7 +45,7 @@
 
     <div class="alert fade fixed-top" role="alert"></div>
 
-    <form class="form-signin" action="/php/" method="post">
+    <form class="form-signin" action="./php/" method="post">
         <img class="mb-4 logo" src="https://www.iproov.com/images/iproov_logo.svg" alt="iProov" width="150">
         <div class="start">
             <h1 class="h3 mb-3 font-weight-normal">Please register or login</h1>

diff --git a/php/README.md b/php/README.md
@@ -11,7 +11,7 @@ php -v
 
 ## Run the demo
 
-Set the `$api_key` and `$secret` variables in [ajax.php](./ajax.php) with the ones provided to you (get new keys from the [iProov Portal](https://www.iproov.net)).
+Set the `$api_key` and `$secret` variables in [index.php](./index.php) with the ones provided to you (get new keys from the [iProov Portal](https://www.iproov.net)).
 
 From the command line, change directory into the root of this project (containing [index.html](../index.html)) and run the following command:
 

diff --git a/script.js b/script.js
@@ -81,7 +81,7 @@ function iProovValidate(event) {
 
     $.ajax({
         type: 'POST',
-        url: '/php/',
+        url: './php/',
         data: postData,
         dataType: 'json',
         success: function(data) {