update

lib/zoeyscomputer_web/live/api_key_live/form_component.ex

@@ -0,0 +1,70 @@
+defmodule ZoeyscomputerWeb.ApiKeyLive.FormComponent do
+  use ZoeyscomputerWeb, :live_component
+
+  alias Zoeyscomputer.ApiKeys
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.header>
+        <%= @title %>
+        <:subtitle>Create an API key to access the API</:subtitle>
+      </.header>
+
+      <.simple_form
+        for={@form}
+        id="api-key-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save"
+      >
+        <.input field={@form[:name]} type="text" label="Name" />
+        <:actions>
+          <.button phx-disable-with="Saving...">Save Api key</.button>
+        </:actions>
+      </.simple_form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(%{api_key: api_key} = assigns, socket) do
+    changeset = ApiKeys.change_api_key(api_key)
+
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_form(changeset)}
+  end
+
+  @impl true
+  def handle_event("validate", %{"api_key" => api_key_params}, socket) do
+    changeset =
+      socket.assigns.api_key
+      |> ApiKeys.change_api_key(api_key_params)
+      |> Map.put(:action, :validate)
+
+    {:noreply, assign_form(socket, changeset)}
+  end
+
+  def handle_event("save", %{"api_key" => api_key_params}, socket) do
+    case ApiKeys.create_api_key(socket.assigns.current_user, api_key_params) do
+      {:ok, api_key} ->
+        notify_parent({:saved, api_key})
+
+        {:noreply,
+         socket
+         |> put_flash(:info, "API key created successfully")}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign_form(socket, changeset)}
+    end
+  end
+
+  defp assign_form(socket, %Ecto.Changeset{} = changeset) do
+    assign(socket, :form, to_form(changeset))
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+end

lib/zoeyscomputer_web/live/api_key_live/index.ex

@@ -0,0 +1,54 @@
+defmodule ZoeyscomputerWeb.ApiKeyLive.Index do
+  use ZoeyscomputerWeb, :live_view
+
+  alias Zoeyscomputer.ApiKeys
+  alias Zoeyscomputer.ApiKeys.ApiKey
+
+  @impl true
+  def mount(_params, _session, socket) do
+    if connected?(socket) && socket.assigns.current_user do
+      {:ok, stream(socket, :api_keys, ApiKeys.list_api_keys())}
+    else
+      {:ok, stream(socket, :api_keys, [])}
+    end
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :edit, %{"id" => id}) do
+    socket
+    |> assign(:page_title, "Edit Api key")
+    |> assign(:api_key, ApiKeys.get_api_key!(id))
+  end
+
+  defp apply_action(socket, :new, _params) do
+    socket
+    |> assign(:page_title, "New API Key")
+    |> assign(:api_key, %ApiKey{})
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:page_title, "API Keys")
+    |> assign(:api_key, nil)
+  end
+
+  @impl true
+  def handle_info({ZoeyscomputerWeb.ApiKeyLive.FormComponent, {:saved, api_key}}, socket) do
+    {:noreply,
+     socket
+     |> stream_insert(:api_keys, api_key)
+     |> push_patch(to: ~p"/api-keys")}
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    api_key = ApiKeys.get_api_key!(id)
+    {:ok, _} = ApiKeys.delete_api_key(api_key)
+
+    {:noreply, stream_delete(socket, :api_keys, api_key)}
+  end
+end

lib/zoeyscomputer_web/live/api_key_live/index.html.heex

@@ -0,0 +1,49 @@
+<.header>
+  API Keys
+  <:actions>
+    <.link patch={~p"/api-keys/new"}>
+      <.button>New API Key</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<.table
+  id="api_keys"
+  rows={@streams.api_keys}
+  row_click={fn {_id, api_key} -> JS.navigate(~p"/api-keys/#{api_key}") end}
+>
+  <:col :let={{_id, api_key}} label="Name"><%= api_key.name %></:col>
+  <:col :let={{_id, api_key}} label="Created">
+    <%= Calendar.strftime(api_key.inserted_at, "%Y-%m-%d %H:%M:%S") %>
+  </:col>
+  <:action :let={{_id, api_key}}>
+    <div class="sr-only">
+      <.link navigate={~p"/api-keys/#{api_key}"}>Show</.link>
+    </div>
+  </:action>
+  <:action :let={{id, api_key}}>
+    <.link
+      phx-click={JS.push("delete", value: %{id: api_key.id}) |> hide("##{id}")}
+      data-confirm="Are you sure?"
+    >
+      Delete
+    </.link>
+  </:action>
+</.table>
+
+<.modal
+  :if={@live_action in [:new, :edit]}
+  id="api-key-modal"
+  show
+  on_cancel={JS.patch(~p"/api-keys")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ApiKeyLive.FormComponent}
+    current_user={@current_user}
+    id={@api_key.id || :new}
+    title={@page_title}
+    action={@live_action}
+    api_key={@api_key}
+    patch={~p"/api-keys"}
+  />
+</.modal>

lib/zoeyscomputer_web/live/api_key_live/show.ex

@@ -0,0 +1,40 @@
+defmodule ZoeyscomputerWeb.ApiKeyLive.Show do
+  use ZoeyscomputerWeb, :live_view
+
+  alias Zoeyscomputer.ApiKeys
+
+  @impl true
+  def mount(_params, _session, socket) do
+    if connected?(socket) do
+      IO.puts("LiveView Connected")
+    end
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_params(%{"id" => id}, _, socket) do
+    api_key = ApiKeys.get_api_key!(id)
+
+    # Ensure users can only view their own API keys
+    if api_key.user_id == socket.assigns.current_user.id do
+      {:noreply,
+       socket
+       |> assign(:page_title, "API Key Details")
+       |> assign(:api_key, api_key)}
+    else
+      {:noreply,
+       socket
+       |> put_flash(:error, "Not authorized")
+       |> push_navigate(to: ~p"/api-keys")}
+    end
+  end
+
+  @impl true
+  def handle_event("copy_token", _, socket) do
+    IO.puts("Copy token event received")
+    token = socket.assigns.api_key.token
+    IO.puts("Token to copy: #{token}")
+    {:noreply, push_event(socket, "copy", %{text: token})}
+  end
+end

lib/zoeyscomputer_web/live/api_key_live/show.html.heex

@@ -0,0 +1,47 @@
+<.header>
+  API Key Details
+  <:actions>
+    <.link patch={~p"/api-keys"}>
+      <.button>Back to API keys</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<.list>
+  <:item title="Name"><%= @api_key.name %></:item>
+  <:item title="Token">
+    <div class="flex items-center gap-2">
+      <code class="bg-ctp-crust border border-ctp-mauve p-2 rounded" id="api-token">
+        <%= @api_key.token %>
+      </code>
+      <button
+        type="button"
+        class="text-sm text-ctp-mauve hover:text-ctp-pink"
+        phx-click={JS.dispatch("phx:copy", to: "#{@api_key.token}")}
+      >
+        Copy
+      </button>
+    </div>
+  </:item>
+  <:item title="Created">
+    <%= Calendar.strftime(@api_key.inserted_at, "%Y-%m-%d %H:%M:%S") %>
+  </:item>
+</.list>
+
+<.back navigate={~p"/api-keys"}>Back to api_keys</.back>
+
+<.modal
+  :if={@live_action == :edit}
+  id="api_key-modal"
+  show
+  on_cancel={JS.patch(~p"/api-keys/#{@api_key}")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ApiKeyLive.FormComponent}
+    id={@api_key.id}
+    title={@page_title}
+    action={@live_action}
+    api_key={@api_key}
+    patch={~p"/api-keys/#{@api_key}"}
+  />
+</.modal>

lib/zoeyscomputer_web/live/image_live/form_component.ex

@@ -0,0 +1,82 @@
+defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
+  use ZoeyscomputerWeb, :live_component
+
+  alias Zoeyscomputer.Images
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.header>
+        <%= @title %>
+        <:subtitle>Use this form to manage image records in your database.</:subtitle>
+      </.header>
+
+      <.simple_form
+        for={@form}
+        id="image-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save"
+      >
+        <.input field={@form[:file]} type="text" label="File" />
+        <:actions>
+          <.button phx-disable-with="Saving...">Save Image</.button>
+        </:actions>
+      </.simple_form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(%{image: image} = assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_new(:form, fn ->
+       to_form(Images.change_image(image))
+     end)}
+  end
+
+  @impl true
+  def handle_event("validate", %{"image" => image_params}, socket) do
+    changeset = Images.change_image(socket.assigns.image, image_params)
+    {:noreply, assign(socket, form: to_form(changeset, action: :validate))}
+  end
+
+  def handle_event("save", %{"image" => image_params}, socket) do
+    save_image(socket, socket.assigns.action, image_params)
+  end
+
+  defp save_image(socket, :edit, image_params) do
+    case Images.update_image(socket.assigns.image, image_params) do
+      {:ok, image} ->
+        notify_parent({:saved, image})
+
+        {:noreply,
+         socket
+         |> put_flash(:info, "Image updated successfully")
+         |> push_patch(to: socket.assigns.patch)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, form: to_form(changeset))}
+    end
+  end
+
+  defp save_image(socket, :new, image_params) do
+    case Images.create_image(image_params) do
+      {:ok, image} ->
+        notify_parent({:saved, image})
+
+        {:noreply,
+         socket
+         |> put_flash(:info, "Image created successfully")
+         |> push_patch(to: socket.assigns.patch)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, form: to_form(changeset))}
+    end
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+end

lib/zoeyscomputer_web/live/image_live/index.ex

@@ -0,0 +1,48 @@
+defmodule ZoeyscomputerWeb.ImageLive.Index do
+  use ZoeyscomputerWeb, :live_view
+
+  alias Zoeyscomputer.Images
+  alias Zoeyscomputer.Images.Image
+
+  @impl true
+  def mount(_params, _session, socket) do
+    current_user = socket.assigns.current_user
+    {:ok, stream(socket, :images, Images.list_images_by_user(current_user))}
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :edit, %{"id" => id}) do
+    socket
+    |> assign(:page_title, "Edit Image")
+    |> assign(:image, Images.get_image!(id))
+  end
+
+  defp apply_action(socket, :new, _params) do
+    socket
+    |> assign(:page_title, "New Image")
+    |> assign(:image, %Image{})
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:page_title, "Listing Images")
+    |> assign(:image, nil)
+  end
+
+  @impl true
+  def handle_info({ZoeyscomputerWeb.ImageLive.FormComponent, {:saved, image}}, socket) do
+    {:noreply, stream_insert(socket, :images, image)}
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    image = Images.get_image!(id)
+    {:ok, _} = Images.delete_image(image)
+
+    {:noreply, stream_delete(socket, :images, image)}
+  end
+end

lib/zoeyscomputer_web/live/image_live/index.html.heex

@@ -0,0 +1,56 @@
+<.header>
+  Listing Images
+  <:actions>
+    <.link patch={~p"/images/new"}>
+      <.button>New Image</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<%!-- <.table --%>
+<%!--   id="images" --%>
+<%!--   rows={@streams.images} --%>
+<%!--   row_click={fn {_id, image} -> JS.navigate(~p"/images/#{image.file}") end} --%>
+<%!-- > --%>
+<%!--   <:col :let={{_id, image}} label="File"><%= image.file %></:col> --%>
+<%!--   <:action :let={{_id, image}}> --%>
+<%!--     <div class="sr-only"> --%>
+<%!--       <.link navigate={~p"/images/#{image.file}"}>Show</.link> --%>
+<%!--     </div> --%>
+<%!--     <.link patch={~p"/images/#{image}/edit"}>Edit</.link> --%>
+<%!--   </:action> --%>
+<%!--   <:action :let={{id, image}}> --%>
+<%!--     <.link --%>
+<%!--       phx-click={JS.push("delete", value: %{id: image.id}) |> hide("##{id}")} --%>
+<%!--       data-confirm="Are you sure?" --%>
+<%!--     > --%>
+<%!--       Delete --%>
+<%!--     </.link> --%>
+<%!--   </:action> --%>
+<%!-- </.table> --%>
+
+<div class="grid grid-cols-3 gap-4">
+  <img
+    :for={{dom_id, image} <- @streams.images}
+    src={"https://s3.zoeys.computer/imgs/uploads/#{image.file}.png"}
+    phx-click={JS.navigate(~p"/images/#{image.file}")}
+    class="cursor-pointer hover:shadow-lg transition duration-300 hover:scale-105 rounded-lg ease-out border-2 border-ctp-base hover:border-ctp-mauve"
+    id={dom_id}
+  />
+</div>
+
+<.modal
+  :if={@live_action in [:new, :edit]}
+  id="image-modal"
+  show
+  on_cancel={JS.patch(~p"/images")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ImageLive.FormComponent}
+    id={@image.id || :new}
+    title={@page_title}
+    action={@live_action}
+    image={@image}
+    patch={~p"/images"}
+  />
+</.modal>

lib/zoeyscomputer_web/live/image_live/show.ex

@@ -0,0 +1,21 @@
+defmodule ZoeyscomputerWeb.ImageLive.Show do
+  use ZoeyscomputerWeb, :live_view
+
+  alias Zoeyscomputer.Images
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_params(%{"id" => id}, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:page_title, page_title(socket.assigns.live_action))
+     |> assign(:image, Images.get_image_by!(id))}
+  end
+
+  defp page_title(:show), do: "Show Image"
+  defp page_title(:edit), do: "Edit Image"
+end

lib/zoeyscomputer_web/live/image_live/show.html.heex

@@ -0,0 +1,30 @@
+<.header>
+  uploaded by <%= @image.user.email %>
+  <:actions>
+    <%= if(@image.user.email == @current_user.email) do %>
+      <.link patch={~p"/images/#{@image.file}/show/edit"} phx-click={JS.push_focus()}>
+        <.button>Edit image</.button>
+      </.link>
+    <% end %>
+  </:actions>
+</.header>
+
+<img src={"https://s3.zoeys.computer/imgs/uploads/#{@image.file}.png"} />
+
+<.back navigate={~p"/images"}>Back to images</.back>
+
+<.modal
+  :if={@live_action == :edit}
+  id="image-modal"
+  show
+  on_cancel={JS.patch(~p"/images/#{@image.file}")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ImageLive.FormComponent}
+    id={@image.id}
+    title={@page_title}
+    action={@live_action}
+    image={@image}
+    patch={~p"/images/#{@image.file}"}
+  />
+</.modal>