Use APP_URL env var in assets URI

Cachet may be installed at the root of its vhost or in a subdirectory,
for example in "/" or under "/status".

The URI we found pointing to some assets were usually not prefixed with
the APP_URL value, so if Cachet was installed under "/status" the asset
URI pointed to the server root like "/my-asset.js".
It is a problem because that means the behaviour is broken in this case.
The problem was present from the setup, it was not possible to fill the
setup since the path to the scripts and CSS weres wrong.

The content of the APP_URL environment variable is now read and used
in the assets URI.

See: cachethq#3618

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "dist/css/all.css": "dist/css/all-2812406e36.css",
-  "dist/js/all.js": "dist/js/all-b2c62d4294.js"
+  "dist/css/all.css": "dist/css/all-cc6b8cd345.css",
+  "dist/js/all.js": "dist/js/all-b943fce764.js"
 }

resources/assets/js/app.js

@@ -288,7 +288,8 @@ $(function() {
 
         // Only validate going forward. If current group is invalid, do not go further
         if (next > current) {
-            var url = '/setup/step' + current;
+            var currentUrl = window.location.href.replace(/step\d/, '');
+            var url = currentUrl + '/step' + current;
             $.post(url, $form.serializeObject())
                 .done(function(response) {
                     goToStep(current, next);

resources/views/layout/master.blade.php

@@ -7,8 +7,8 @@
     <meta name="env" content="{{ app('env') }}">
     <meta name="token" content="{{ csrf_token() }}">
 
-    <link rel="alternate" type="application/atom+xml" href="/atom" title="{{ $site_title }} - Atom Feed">
-    <link rel="alternate" type="application/rss+xml" href="/rss" title="{{ $site_title }} - RSS Feed">
+    <link rel="alternate" type="application/atom+xml" href="{{ config('app.url') }}/atom" title="{{ $site_title }} - Atom Feed">
+    <link rel="alternate" type="application/rss+xml" href="{{ config('app.url') }}/rss" title="{{ $site_title }} - RSS Feed">
 
     <!-- Mobile friendliness -->
     <meta name="HandheldFriendly" content="True">
@@ -19,35 +19,35 @@
 
     <meta property="og:type" content="website">
     <meta property="og:title" content="{{ $site_title }}">
-    <meta property="og:image" content="/img/ogimage.png">
+    <meta property="og:image" content="{{ config('app.url') }}/img/ogimage.png">
     <meta property="og:description" content="{{ trans('cachet.description', ['app' => $app_name]) }}">
 
     <!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
     <meta http-equiv="cleartype" content="on">
 
     <meta name="msapplication-TileColor" content="{{ $theme_greens }}" />
-    <meta name="msapplication-TileImage" content="/img/favicon.png" />
+    <meta name="msapplication-TileImage" content="{{ config('app.url') }}/img/favicon.png" />
 
     @if (isset($favicon))
-    <link rel="icon" type="image/png" href="/img/{{ $favicon }}.ico">
-    <link rel="shortcut icon" href="/img/{{ $favicon }}.png" type="image/x-icon">
+    <link rel="icon" type="image/png" href="{{ config('app.url') }}/img/{{ $favicon }}.ico">
+    <link rel="shortcut icon" href="{{ config('app.url') }}/img/{{ $favicon }}.png" type="image/x-icon">
     @else
-    <link rel="icon" type="image/png" href="/img/favicon.ico">
-    <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+    <link rel="icon" type="image/png" href="{{ config('app.url') }}/img/favicon.ico">
+    <link rel="shortcut icon" href="{{ config('app.url') }}/img/favicon.png" type="image/x-icon">
     @endif
 
-    <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="57x57" href="/img/apple-touch-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/img/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/img/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" href="{{ config('app.url') }}/img/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="{{ config('app.url') }}/img/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ config('app.url') }}/img/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ config('app.url') }}/img/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ config('app.url') }}/img/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ config('app.url') }}/img/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ config('app.url') }}/img/apple-touch-icon-152x152.png">
 
     <title>{{ $site_title }}</title>
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset={{ $font_subset }}" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="{{ elixir('dist/css/all.css') }}">
+    <link rel="stylesheet" href="{{ config('app.url') }}{{ elixir('dist/css/all.css') }}">
 
     @include('partials.stylesheet')
 
@@ -63,7 +63,7 @@
         var Global = {};
         Global.locale = '{{ $app_locale }}';
     </script>
-    <script src="{{ elixir('dist/js/all.js') }}"></script>
+    <script src="{{ config('app.url') }}{{ elixir('dist/js/all.js') }}"></script>
 </head>
 <body class="status-page @yield('bodyClass')">
     @yield('outer-content')

resources/views/partials/head.blade.php

@@ -7,21 +7,21 @@
     <meta name="env" content="{{ app('env') }}">
     <meta name="token" content="{{ csrf_token() }}">
 
-    <link rel="icon" type="image/png" href="/img/favicon.ico">
-    <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+    <link rel="icon" type="image/png" href="{{ config('app.url') }}/img/favicon.ico">
+    <link rel="shortcut icon" href="{{ config('app.url') }}/img/favicon.png" type="image/x-icon">
 
-    <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="57x57" href="/img/apple-touch-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/img/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/img/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" href="{{ config('app.url') }}/img/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="{{ config('app.url') }}/img/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ config('app.url') }}/img/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ config('app.url') }}/img/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ config('app.url') }}/img/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ config('app.url') }}/img/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ config('app.url') }}/img/apple-touch-icon-152x152.png">
 
     <title>{{ $page_title or $site_title }}</title>
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset={{ $font_subset }}" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="{{ elixir('dist/css/all.css') }}">
+    <link rel="stylesheet" href="{{ config('app.url') }}{{ elixir('dist/css/all.css') }}">
     @yield('css')
 
     @include('partials.crowdin')
@@ -30,5 +30,5 @@
         var Global = {};
         Global.locale = '{{ $app_locale }}';
     </script>
-    <script src="{{ elixir('dist/js/all.js') }}"></script>
+    <script src="{{ config('app.url') }}{{ elixir('dist/js/all.js') }}"></script>
 </head>

resources/views/setup.blade.php

@@ -5,7 +5,7 @@
 @section('content')
 <div class="setup-page">
     <div class="text-center">
-        <img class="logo" height="50" src="/img/cachet-logo.svg" alt="Cachet">
+        <img class="logo" height="50" src="{{ config('app.url') }}/img/cachet-logo.svg" alt="Cachet">
         <h4>{{ trans('setup.title') }}</h4>
         <br>
     </div>