Redirect .io to .app domain

app/components/application/redirect-warning.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import { get, set } from '@ember/object';
+
+export default Component.extend({
+  isShown: true || window.explainRedirect,
+
+  actions: {
+    dismiss() {
+      set(this, 'isShown', false);
+    }
+  }
+});

app/initializers/redirect-io.js

@@ -0,0 +1,44 @@
+const existingSession = window.localStorage['ember_simple_auth:session'];
+
+// Carefully parse the session
+const isLoggedIn = (() => {
+  if (!existingSession) return false;
+
+  try {
+    return JSON.parse(existingSession)['authenticated']['access_token'];
+  } catch (e) {
+    return false;
+  }
+})();
+
+export function initialize() {
+  if (window.location.origin.endsWith('.io')) {
+    // Redirect to the new domain
+    const url = new URL(window.location);
+    url.host = url.host.replace('kitsu.io', 'kitsu.app');
+
+    url.hash = `kitsu-io-session=${btoa(existingSession)}`;
+
+    window.location.replace(url.toString());
+  } else if (window.location.hash.match(/#kitsu-io-session=.*/)) {
+    if (!isLoggedIn) {
+      try {
+        // Import the session from the hash
+        const importedSession = JSON.parse(atob(/#kitsu-io-session=(.*)/.exec(window.location.hash)[1]));
+
+        window.localStorage['ember_simple_auth:session'] = JSON.stringify(importedSession);
+      } catch (e) {
+        console.error('Failed to import session');
+      }
+    }
+    window.explainRedirect = true;
+    const url = new URL(window.location);
+    url.hash = '';
+    history.replaceState(null, '', url.toString());
+  }
+}
+
+export default {
+  name: 'redirectFromKitsuIO',
+  initialize
+};

app/styles/layout/_navbar.scss

@@ -535,3 +535,32 @@
     fill: RGBA(237, 240, 241, 1);
   }
 }
+
+#explain-redirect {
+  top: 40px;
+  position: absolute;
+  z-index: 10000000;
+  left: 0;
+  right: 0;
+  padding-block: 10px;
+  background-color: #503D4F;
+  color: white;
+  text-align: center;
+
+  .inner {
+    width: 100%;
+  }
+
+  .dismiss {
+    float: right;
+    color: white;
+    margin-right: 20px;
+  }
+
+  h5 {
+    display: inline;
+    margin-block: 0;
+    margin-inline-end: 10px;
+    padding: 0;
+  }
+}

app/templates/application.hbs

@@ -3,6 +3,8 @@
 {{! header }}
 {{application/site-header}}
 
+{{application/redirect-warning}}
+
 {{! session error message }}
 {{application/session-error}}
 

app/templates/components/application/redirect-warning.hbs

@@ -0,0 +1,15 @@
+{{#if isShown}}
+  <aside id="explain-redirect">
+    <div class="container">
+      <div class="row">
+        <div class="inner">
+          <h5>We've Moved!</h5>
+          Don't be alarmed by the URL, we've moved from Kitsu.io to Kitsu.app
+          <span class="dismiss" {{action "dismiss"}}>
+            {{svg-jar "close"}}
+          </span>
+        </div>
+      </div>
+    </div>
+  </aside>
+{{/if}}