WIP Add service page for Chat

app/controllers/services/chat_controller.rb

@@ -0,0 +1,14 @@
+class Services::ChatController < Services::BaseController
+  before_action :authenticate_user!
+  before_action :require_service_available
+
+  def show
+    @service_enabled = current_user.services_enabled.include?(:xmpp)
+  end
+
+  private
+
+    def require_service_available
+      http_status :not_found unless Setting.ejabberd_enabled?
+    end
+end

app/javascript/controllers/application.js

@@ -1,9 +1,10 @@
 import { Application } from "@hotwired/stimulus"
-import { Modal } from "tailwindcss-stimulus-components"
+import { Modal, Tabs } from "tailwindcss-stimulus-components"
 
 const application = Application.start()
 
 application.register('modal', Modal)
+application.register('tabs', Tabs)
 
 // Configure Stimulus development experience
 application.debug = false

app/views/dashboard/index.html.erb

@@ -10,7 +10,7 @@
       <div class="border border-gray-300 rounded-md hover:border-gray-400
                   bg-cover bg-[center_top_-50px] bg-no-repeat
                   bg-[url(/img/logos/icon_xmpp.svg)]">
-        <%= link_to "https://wiki.kosmos.org/Services:Chat",
+        <%= link_to services_chat_path,
               class: "block h-full px-6 py-6 rounded-md" do %>
           <h3 class="mb-3.5">Chat</h3>
           <p class="text-gray-600">

app/views/services/chat/show.html.erb

@@ -0,0 +1,98 @@
+<%= render HeaderComponent.new(title: "Chat") %>
+
+<%= render MainSimpleComponent.new do %>
+  <section>
+    <p class="mb-6">
+      Chat with anyone on the open Jabber network. Message people directly, or
+      join public channels or private rooms.
+    </p>
+  </section>
+  <section>
+    <h3>Your Chat Address</h3>
+    <p class="mb-6">
+      When you exchange contacts with people, give them your
+      address, or add them using their address:
+    </p>
+    <p data-controller="clipboard" class="flex gap-1 sm:w-2/5">
+      <input type="text" id="user_address" class="grow"
+             value=<%= current_user.address %> disabled="disabled"
+             data-clipboard-target="source" />
+      <button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
+              data-clipboard-target="trigger" data-action="clipboard#copy"
+              title="Copy to clipboard">
+        <span class="content-initial">
+          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
+        </span>
+        <span class="content-active hidden">
+          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
+        </span>
+      </button>
+    </p>
+  </section>
+  <section>
+    <h3>Chat Apps</h3>
+    <p>
+      Use your Kosmos account with many different apps, and on any devices
+      you wish! When opening an app for the first time, just enter your
+      user address and password to log in.
+    </p>
+  </section>
+  <section>
+    <h3>Recommended Apps</h3>
+    <div data-controller="tabs"
+         data-tabs-active-tab="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
+         data-tabs-inactive-tab="text-gray-500 hover:text-gray-700">
+      <ul class="list-reset flex border-gray-200 border-b">
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Web
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Android
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            iOS
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Linux
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Windows
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            macOS
+          </a>
+        </li>
+      </ul>
+
+      <div class="hidden" data-tabs-target="panel">
+        Web
+      </div>
+      <div class="hidden" data-tabs-target="panel">
+        Android
+      </div>
+      <div class="hidden" data-tabs-target="panel">
+        iOS
+      </div>
+      <div class="hidden" data-tabs-target="panel">
+        Linux
+      </div>
+      <div class="hidden" data-tabs-target="panel">
+        Windows
+      </div>
+      <div class="hidden" data-tabs-target="panel">
+        macOS
+      </div>
+    </div>
+  </section>
+<% end %>

config/routes.rb

@@ -21,6 +21,8 @@ Rails.application.routes.draw do
   namespace :services do
     get 'storage', to: 'remotestorage#dashboard'
 
+    resource :chat, only: [:show], controller: 'chat'
+
     resources :lightning, only: [:index] do
       collection do
         get 'transactions'