Packages

phoenix_kit

1.6.13
1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
221 Versions
34 Dependencies
Dependants
Files
Activity
phoenix_kit lib modules maintenance web settings.html.heex
Raw

lib/modules/maintenance/web/settings.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title="{@project_title} - Maintenance Mode Settings"

  current_path={@url_path}

  project_title={@project_title}

  current_locale={assigns[:current_locale] || "en"}

>

  <div class="container mx-auto px-4 py-6">

    <%!-- Header Section --%>

    <header class="w-full relative mb-6">

      <%!-- Back Button --%>

      <.link

        navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}

        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0"

      >

        <.icon name="hero-arrow-left" class="w-4 h-4" /> Back to Modules

      </.link>

      <%!-- Title Section --%>

      <div class="text-center">

        <h1 class="text-4xl font-bold text-base-content mb-3">Maintenance Mode Settings</h1>

        <p class="text-lg text-base-content/70">Customize the maintenance page message</p>

      </div>

    </header>

    <%!-- Maintenance Mode Toggle --%>

    <div class="card bg-base-100 shadow-xl mb-6">

      <div class="card-body">

        <div class="flex items-center justify-between">

          <div class="flex-1">

            <h2 class="card-title mb-2">

              <.icon name="hero-power" class="w-5 h-5" /> Maintenance Mode Status

            </h2>

            <p class="text-sm text-base-content/70">

              {if @enabled,

                do:

                  "Site is currently in maintenance mode - non-admin users see the maintenance page",

                else: "Site is operating normally - all users have access"}

            </p>

          </div>

          <div class="flex-shrink-0 ml-4">

            <input

              type="checkbox"

              class="toggle toggle-lg toggle-warning"

              checked={@enabled}

              phx-click="toggle_maintenance_mode"

            />

          </div>

        </div>

        <%= if @enabled do %>

          <div class="alert alert-warning mt-4">

            <.icon name="hero-exclamation-triangle" class="w-5 h-5" />

            <span>

              <strong>Active:</strong>

              Non-admin users are currently seeing the maintenance page below.

            </span>

          </div>

        <% end %>

      </div>

    </div>

    <div class="grid gap-6 lg:grid-cols-2">

      <%!-- Settings Form --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body">

          <h2 class="card-title mb-4">

            <.icon name="hero-cog-6-tooth" class="w-5 h-5" /> Configuration

          </h2>

          <form phx-submit="save" class="space-y-4">

            <%!-- Header Input --%>

            <div class="form-control">

              <label class="label">

                <span class="label-text font-semibold">Header Text</span>

              </label>

              <input

                type="text"

                name="header"

                value={@header}

                phx-change="update_header"

                phx-debounce="300"

                class="input input-bordered w-full"

                placeholder="Under Construction"

                required

              />

              <label class="label">

                <span class="label-text-alt">Main heading shown on maintenance page</span>

              </label>

            </div>

            <%!-- Subtext Input --%>

            <div class="form-control">

              <label class="label">

                <span class="label-text font-semibold">Message Text</span>

              </label>

              <textarea

                name="subtext"

                phx-change="update_subtext"

                phx-debounce="300"

                class="textarea textarea-bordered w-full h-32"

                placeholder="We'll be back soon..."

                required

              >{@subtext}</textarea>

              <label class="label">

                <span class="label-text-alt">Detailed message shown below the header</span>

              </label>

            </div>

            <%!-- Reminder Info --%>

            <div class="alert alert-info">

              <.icon name="hero-information-circle" class="w-5 h-5" />

              <div>

                <div class="text-sm">

                  Changes to header and message text take effect immediately.

                  Use the toggle above to activate or deactivate maintenance mode.

                </div>

              </div>

            </div>

            <%!-- Action Buttons --%>

            <div class="flex gap-2">

              <button

                type="submit"

                class={"btn btn-primary flex-1 #{if @saved, do: "btn-success"}"}

              >

                <.icon

                  name={if @saved, do: "hero-check", else: "hero-arrow-down-tray"}

                  class="w-5 h-5"

                />

                {if @saved, do: "Saved!", else: "Save Changes"}

              </button>

              <button

                type="button"

                phx-click="cancel"

                class="btn btn-outline"

                disabled={@saved}

              >

                <.icon name="hero-x-mark" class="w-5 h-5" /> Cancel

              </button>

            </div>

          </form>

        </div>

      </div>

      <%!-- Live Preview --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body">

          <h2 class="card-title mb-4">

            <.icon name="hero-eye" class="w-5 h-5" /> Live Preview

          </h2>

          <div class="bg-base-200 rounded-lg p-8 min-h-[400px] flex items-center justify-center">

            <div class="card bg-base-100 shadow-2xl border-2 border-dashed border-base-300 w-full">

              <div class="card-body text-center py-8">

                <%!-- Icon --%>

                <div class="text-6xl mb-4 opacity-70">

                  🚧

                </div>

                <%!-- Header --%>

                <h1 class="text-3xl font-bold text-base-content mb-3">

                  {@header}

                </h1>

                <%!-- Subtext --%>

                <p class="text-base text-base-content/70 mb-6">

                  {@subtext}

                </p>

              </div>

            </div>

          </div>

          <div class="alert alert-info mt-4">

            <.icon name="hero-information-circle" class="w-5 h-5" />

            <span class="text-sm">This is how non-admin users will see the maintenance page</span>

          </div>

        </div>

      </div>

    </div>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>