update

lib/zoeyscomputer_web/components/core_components.ex

@@ -50,7 +50,11 @@ defmodule ZoeyscomputerWeb.CoreComponents do
       data-cancel={JS.exec(@on_cancel, "phx-remove")}
       class="relative z-50 hidden"
     >
-      <div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
+      <div
+        id={"#{@id}-bg"}
+        class="bg-ctp-base/90 fixed inset-0 transition-opacity"
+        aria-hidden="true"
+      />
       <div
         class="fixed inset-0 overflow-y-auto"
         aria-labelledby={"#{@id}-title"}
@@ -429,10 +433,10 @@ defmodule ZoeyscomputerWeb.CoreComponents do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
-        <h1 class="text-lg font-semibold leading-8">
+        <h1 class="text-lg font-semibold text-ctp-text leading-8">
           <%= render_slot(@inner_block) %>
         </h1>
-        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-ctp-overlay2">
+        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-ctp-subtext0">
           <%= render_slot(@subtitle) %>
         </p>
       </div>
@@ -441,6 +445,26 @@ defmodule ZoeyscomputerWeb.CoreComponents do
     """
   end
 
+  attr :id, :string, required: true
+  attr :content, :string, required: true
+
+  @doc """
+  Copy to clipboard button.
+  """
+  def copy_button(assigns) do
+    ~H"""
+    <button
+      id={@id}
+      content={@content}
+      phx-click={JS.dispatch("phx:copy", to: "##{@content}")}
+      type="button"
+      class="rounded-md inline-flex items-center bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+    >
+      Copy
+    </button>
+    """
+  end
+
   @doc ~S"""
   Renders a table with generic styling.
 

lib/zoeyscomputer_web/controllers/changeset_json.ex

@@ -0,0 +1,25 @@
+defmodule ZoeyscomputerWeb.ChangesetJSON do
+  @doc """
+  Renders changeset errors.
+  """
+  def error(%{changeset: changeset}) do
+    # When encoded, the changeset returns its errors
+    # as a JSON object. So we just pass it forward.
+    %{errors: Ecto.Changeset.traverse_errors(changeset, &translate_error/1)}
+  end
+
+  defp translate_error({msg, opts}) do
+    # You can make use of gettext to translate error messages by
+    # uncommenting and adjusting the following code:
+
+    # if count = opts[:count] do
+    #   Gettext.dngettext(ZoeyscomputerWeb.Gettext, "errors", msg, msg, count, opts)
+    # else
+    #   Gettext.dgettext(ZoeyscomputerWeb.Gettext, "errors", msg, opts)
+    # end
+
+    Enum.reduce(opts, msg, fn {key, value}, acc ->
+      String.replace(acc, "%{#{key}}", fn _ -> to_string(value) end)
+    end)
+  end
+end

lib/zoeyscomputer_web/controllers/fallback_controller.ex

@@ -0,0 +1,24 @@
+defmodule ZoeyscomputerWeb.FallbackController do
+  @moduledoc """
+  Translates controller action results into valid `Plug.Conn` responses.
+
+  See `Phoenix.Controller.action_fallback/1` for more details.
+  """
+  use ZoeyscomputerWeb, :controller
+
+  # This clause handles errors returned by Ecto's insert/update/delete.
+  def call(conn, {:error, %Ecto.Changeset{} = changeset}) do
+    conn
+    |> put_status(:unprocessable_entity)
+    |> put_view(json: ZoeyscomputerWeb.ChangesetJSON)
+    |> render(:error, changeset: changeset)
+  end
+
+  # This clause is an example of how to handle resources that cannot be found.
+  def call(conn, {:error, :not_found}) do
+    conn
+    |> put_status(:not_found)
+    |> put_view(html: ZoeyscomputerWeb.ErrorHTML, json: ZoeyscomputerWeb.ErrorJSON)
+    |> render(:"404")
+  end
+end

lib/zoeyscomputer_web/controllers/image_controller.ex

@@ -0,0 +1,103 @@
+defmodule ZoeyscomputerWeb.ImageController do
+  use ZoeyscomputerWeb, :controller
+
+  alias Zoeyscomputer.Images
+  alias Zoeyscomputer.Images.Image
+
+  action_fallback ZoeyscomputerWeb.FallbackController
+
+  def index(conn, _params) do
+    images = Images.list_images()
+    render(conn, :index, images: images)
+  end
+
+  def create(conn, %{"file" => upload}) do
+    user = conn.assigns.current_user
+
+    case handle_upload(upload) do
+      {:ok, s3_key} ->
+        # Fixed: create_image takes one argument (the params map)
+        case Images.create_image(%{file: s3_key, user_id: user.id}) do
+          {:ok, image} ->
+            conn
+            |> put_status(:created)
+            |> put_resp_header("location", ~p"/api/images/#{image}")
+            |> json(%{
+              message: "File uploaded successfully",
+              url: get_public_url(s3_key),
+              image: image
+            })
+
+          {:error, changeset} ->
+            conn
+            |> put_status(:unprocessable_entity)
+            |> json(%{
+              error: "Database save failed",
+              details: changeset_error_to_string(changeset)
+            })
+        end
+
+      {:error, reason} ->
+        conn
+        |> put_status(:unprocessable_entity)
+        |> json(%{
+          error: "Upload failed",
+          reason: inspect(reason)
+        })
+    end
+  end
+
+  defp changeset_error_to_string(changeset) do
+    Ecto.Changeset.traverse_errors(changeset, fn {msg, opts} ->
+      Enum.reduce(opts, msg, fn {key, value}, acc ->
+        String.replace(acc, "%{#{key}}", to_string(value))
+      end)
+    end)
+  end
+
+  defp handle_upload(upload) do
+    extension = Path.extname(upload.filename)
+    id = Nanoid.generate(7)
+    key = "uploads/#{id}#{extension}"
+    bucket = "imgs"
+
+    {:ok, file_binary} = File.read(upload.path)
+
+    case ExAws.S3.put_object(bucket, key, file_binary)
+         |> ExAws.request() do
+      {:ok, _response} -> {:ok, id}
+      {:error, reason} -> {:error, reason}
+    end
+  end
+
+  defp get_public_url(key) do
+    "https://zoeys.computer/images/#{key}"
+  end
+
+  def show(conn, %{"id" => id}) do
+    image = Images.get_image!(id)
+    render(conn, :show, image: image)
+  end
+
+  def update(conn, %{"id" => id, "image" => image_params}) do
+    image = Images.get_image!(id)
+
+    with {:ok, %Image{} = image} <- Images.update_image(image, image_params) do
+      render(conn, :show, image: image)
+    end
+  end
+
+  def delete(conn, %{"id" => id}) do
+    image = Images.get_image!(id)
+
+    case ExAws.S3.delete_object("imgs", image.file)
+         |> ExAws.request() do
+      {:ok, _response} -> {:ok, image.file}
+      {:error, reason} -> {:error, reason}
+    end
+
+    with {:ok, %Image{}} <- Images.delete_image(image) do
+      send_resp(conn, :no_content, "")
+    end
+  end
+end

lib/zoeyscomputer_web/controllers/image_json.ex

@@ -0,0 +1,24 @@
+defmodule ZoeyscomputerWeb.ImageJSON do
+  alias Zoeyscomputer.Images.Image
+
+  @doc """
+  Renders a list of images.
+  """
+  def index(%{images: images}) do
+    %{data: for(image <- images, do: data(image))}
+  end
+
+  @doc """
+  Renders a single image.
+  """
+  def show(%{image: image}) do
+    %{data: data(image)}
+  end
+
+  defp data(%Image{} = image) do
+    %{
+      id: image.id,
+      file: image.file
+    }
+  end
+end

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>

lib/zoeyscomputer_web/plugs/api_authentication.ex

@@ -0,0 +1,39 @@
+defmodule ZoeyscomputerWeb.Plugs.ApiAuthentication do
+  alias Zoeyscomputer.ApiKeys
+  import Plug.Conn
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    case get_auth_token(conn) do
+      nil ->
+        handle_unauthorized(conn)
+
+      token ->
+        case ApiKeys.authenticate_api_key(token) do
+          nil ->
+            handle_unauthorized(conn)
+
+          user ->
+            conn
+            |> assign(:current_user, user)
+            |> assign(:authenticated_with_api_key, true)
+        end
+    end
+  end
+
+  defp get_auth_token(conn) do
+    case get_req_header(conn, "authorization") do
+      ["Bearer " <> token] -> token
+      _ -> nil
+    end
+  end
+
+  defp handle_unauthorized(conn) do
+    conn
+    |> put_status(:unauthorized)
+    |> Phoenix.Controller.put_view(ZoeyscomputerWeb.ErrorJSON)
+    |> Phoenix.Controller.render(:"401")
+    |> halt()
+  end
+end

lib/zoeyscomputer_web/router.ex

@@ -13,22 +13,22 @@ defmodule ZoeyscomputerWeb.Router do
     plug :fetch_current_user
   end
 
+  pipeline :api_authentication do
+    plug ZoeyscomputerWeb.Plugs.ApiAuthentication
+  end
+
   pipeline :api do
     plug :accepts, ["json"]
   end
 
-  # scope "/", ZoeyscomputerWeb do
-  #   pipe_through :browser
-  #
-  #   live_session :current_user,
-  #     on_mount: [{ZoeyscomputerWeb.UserAuth, :mount_current_user}] do
-  #     live "/", HomeLive, :index
-  #   end
-  # end
-
   # Other scopes may use custom stacks.
   scope "/api", ZoeyscomputerWeb do
     pipe_through :api
+
+    resources "/images", ImageController, except: [:create, :edit]
+
+    pipe_through [:api_authentication]
+    post "/images/create", ImageController, :create
   end
 
   # Enable LiveDashboard and Swoosh mailbox preview in development
@@ -76,6 +76,18 @@ defmodule ZoeyscomputerWeb.Router do
       live "/users/settings/confirm_email/:token", UserSettingsLive, :confirm_email
       live "/links", LinkLive.Index
       live "/links/new", LinkLive.New
+
+      live "/images/new", ImageLive.Index, :new
+      live "/images/:id/edit", ImageLive.Index, :edit
+
+      live "/images/:id/show/edit", ImageLive.Show, :edit
+
+      live "/api-keys", ApiKeyLive.Index, :index
+      live "/api-keys/new", ApiKeyLive.Index, :new
+      live "/api-keys/:id/edit", ApiKeyLive.Index, :edit
+
+      live "/api-keys/:id", ApiKeyLive.Show, :show
+      live "/api-keys/:id/show/edit", ApiKeyLive.Show, :edit
     end
   end
 
@@ -89,6 +101,9 @@ defmodule ZoeyscomputerWeb.Router do
       live "/users/confirm/:token", UserConfirmationLive, :edit
       live "/users/confirm", UserConfirmationInstructionsLive, :new
       live "/", HomeLive, :index
+
+      live "/images", ImageLive.Index, :index
+      live "/images/:id", ImageLive.Show, :show
     end
   end
 end