feat: profile page (#528)

Author: AfonsoMartins26

lib/atomic/accounts.ex

@@ -491,10 +491,11 @@ defmodule Atomic.Accounts do
       {:error, %Ecto.Changeset{}}
 
   """
-  def update_user(%User{} = user, attrs \\ %{}) do
+  def update_user(%User{} = user, attrs \\ %{}, after_save \\ &{:ok, &1}) do
     user
     |> User.changeset(attrs)
     |> Repo.update()
+    |> after_save(after_save)
   end
 
   @doc """

lib/atomic/accounts/user.ex

@@ -12,6 +12,7 @@ defmodule Atomic.Accounts.User do
   alias Atomic.Accounts.Course
   alias Atomic.Activities.Enrollment
   alias Atomic.Organizations.{Collaborator, Membership, Organization}
+  alias Atomic.Socials
 
   @required_fields ~w(email password)a
   @optional_fields ~w(name slug role confirmed_at phone_number course_id current_organization_id)a
@@ -32,13 +33,16 @@ defmodule Atomic.Accounts.User do
     field :confirmed_at, :naive_datetime
     field :phone_number, :string
     field :profile_picture, Uploaders.ProfilePicture.Type
+    field :banner, Uploaders.Banner.Type
 
     belongs_to :course, Course
     belongs_to :current_organization, Organization
 
     has_many :enrollments, Enrollment
     has_many :collaborators, Collaborator
 
+    embeds_one :socials, Socials, on_replace: :update
+
     many_to_many :organizations, Organization, join_through: Membership
 
     timestamps()
@@ -70,8 +74,7 @@ defmodule Atomic.Accounts.User do
 
   def picture_changeset(user, attrs) do
     user
-    |> cast(attrs, @required_fields ++ @optional_fields)
-    |> cast_attachments(attrs, [:profile_picture])
+    |> cast_attachments(attrs, [:profile_picture, :banner])
   end
 
   @doc """
@@ -83,6 +86,7 @@ defmodule Atomic.Accounts.User do
     |> validate_email()
     |> validate_slug()
     |> validate_phone_number()
+    |> cast_embed(:socials, with: &Socials.changeset/2)
   end
 
   defp validate_email(changeset) do

lib/atomic/uploaders/banner.ex

@@ -1,15 +1,14 @@
 defmodule Atomic.Uploaders.Banner do
   @moduledoc """
-  Uploader for department banners.
+  Uploader for user banners.
   """
-  use Atomic.Uploader, extensions: ~w(.jpg .jpeg .png)
-
-  alias Atomic.Organizations.Department
+  use Atomic.Uploader, extensions: ~w(.jpg .jpeg .png .gif)
+  alias Atomic.Accounts.User
 
   @versions [:original]
 
-  def storage_dir(_version, {_file, %Department{} = department}) do
-    "uploads/atomic/departments/#{department.id}/banner"
+  def storage_dir(_version, {_file, %User{} = user}) do
+    "uploads/atomic/users/#{user.id}/banner"
   end
 
   def filename(version, _) do

lib/atomic_web/components/image_uploader.ex

@@ -3,83 +3,109 @@ defmodule AtomicWeb.Components.ImageUploader do
   An image uploader component that allows you to upload an image.
   """
 
-  use AtomicWeb, :live_component
+  use AtomicWeb, :component
+
+  attr :id, :string, default: "image-uploader"
+  attr :upload, :any
+  attr :class, :string, default: ""
+  attr :image_class, :string, default: ""
+  attr :image, :string, default: nil
+  attr :icon, :string, default: "hero-photo"
+  attr :preview_disabled, :boolean, default: false
+  attr :rounded, :boolean, default: false
+  attr :editable, :boolean, default: true
+  attr :memory_unit, :string, default: "MB"
+
+  slot :placeholder, required: false, doc: "Slot for the placeholder content."
+
+  def image_uploader(assigns) do
+    assigns = update(assigns, %{})
 
-  def render(assigns) do
     ~H"""
     <div id={@id}>
-      <div class="shrink-0 1.5xl:shrink-0">
+      <%= if @editable do %>
         <.live_file_input upload={@upload} class="hidden" />
-        <div class={
-            "#{if length(@upload.entries) != 0 do
-              "hidden"
-            end} #{@class} border-2 border-gray-300 border-dashed rounded-md"
-          } phx-drop-target={@upload.ref}>
-          <div class="flex h-full items-center justify-center px-6">
-            <div class="flex flex-col items-center justify-center space-y-1">
-              <.icon name={@icon} class="size-8 text-zinc-400" />
-              <div class="flex flex-col items-center text-sm text-zinc-600">
-                <label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-orange-500 hover:text-red-800">
-                  <a onclick={"document.getElementById('#{@upload.ref}').click()"}>Upload a file</a>
-                </label>
-                <p class="pl-1">or drag and drop</p>
-              </div>
-              <p class="text-xs text-gray-500">
-                {extensions_to_string(@upload.accept)} up to {assigns.size_file} {@type}
-              </p>
-            </div>
-          </div>
-        </div>
-        <section>
+      <% end %>
+      <section
+        phx-drop-target={@upload.ref}
+        class={[
+          "hover:cursor-pointer",
+          @rounded && "rounded-full overflow-hidden",
+          not @rounded && "rounded-xl",
+          @class
+        ]}
+        onclick={"document.getElementById('#{@upload.ref}').click()"}
+      >
+        <%= if @upload.entries == [] do %>
+          <article class="h-full">
+            <figure class="flex h-full items-center justify-center">
+              <%= if @image do %>
+                <img class={[@rounded && "p-0", not @rounded, @image_class]} src={@image} />
+              <% else %>
+                <%= if @placeholder do %>
+                  <div class="flex flex-col items-center gap-2">
+                    {render_slot(@placeholder)}
+                    <p class="text-xs text-gray-500">
+                      {extensions_to_string(@upload.accept)}<br /> up to {@size_file} {@memory_unit}
+                    </p>
+                  </div>
+                <% else %>
+                  <div class="flex select-none flex-col items-center gap-2">
+                    <.icon name={@icon} class="h-12 w-12" />
+                    <p class="px-4 text-center">{gettext("Upload a file or drag and drop.")}</p>
+                  </div>
+                <% end %>
+              <% end %>
+            </figure>
+          </article>
+        <% end %>
+        <%= if !@preview_disabled do %>
           <%= for entry <- @upload.entries do %>
-            <%= for err <- upload_errors(@upload, entry) do %>
-              <div class="alert alert-danger relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700" role="alert">
-                <span class="block sm:inline">{Phoenix.Naming.humanize(err)}</span>
-                <span class="absolute top-0 right-0 bottom-0 px-4 py-3">
-                  <title>Close</title>
-                </span>
-              </div>
-            <% end %>
-            <article class="upload-entry">
-              <figure class="w-[100px]">
-                <.live_img_preview entry={entry} id={"preview-#{entry.ref}"} class="rounded-lg shadow-lg" />
-                <div class="flex">
-                  <figcaption>
-                    <%= if String.length(entry.client_name) < 30 do %>
-                      {entry.client_name}
-                    <% else %>
-                      {String.slice(entry.client_name, 0..30) <> "... "}
-                    <% end %>
-                  </figcaption>
-                  <button type="button" phx-click="cancel-image" phx-target={@target} phx-value-ref={entry.ref} aria-label="cancel" class="pl-4">
-                    <.icon name="hero-x-mark-solid" class="size-5 text-zinc-400" />
-                  </button>
-                </div>
+            <article class="h-full">
+              <figure class="flex h-full items-center justify-center">
+                <%= if entry.ref do %>
+                  <.live_img_preview id={"preview-#{entry.ref}"} class={[@rounded && "p-0", not @rounded && "p-4", @image_class]} entry={entry} />
+                <% else %>
+                  <div class="flex select-none flex-col items-center gap-2">
+                    <.icon name="hero-document" class="h-12 w-12" />
+                    <p class="px-4 text-center">{entry.client_name}</p>
+                  </div>
+                <% end %>
               </figure>
+              <%= for err <- upload_errors(@upload, entry) do %>
+                <p class="alert alert-danger">{Phoenix.Naming.humanize(err)}</p>
+              <% end %>
             </article>
           <% end %>
-        </section>
-      </div>
+        <% end %>
+        <%= for err <- upload_errors(@upload) do %>
+          <p class="alert alert-danger">{Phoenix.Naming.humanize(err)}</p>
+        <% end %>
+      </section>
     </div>
     """
   end
 
-  def update(assigns, socket) do
-    max_size = assigns.upload.max_file_size
-    type = assigns[:type]
+  def update(assigns, _socket) do
+    max_size =
+      if Map.has_key?(assigns, :upload) do
+        assigns.upload.max_file_size
+      else
+        0
+      end
+
+    memory_unit = assigns[:memory_unit]
 
-    size_file = convert_size(max_size, type)
+    size_file = convert_size(max_size, memory_unit)
 
-    {:ok,
-     socket
-     |> assign(assigns)
-     |> assign(:size_file, size_file)}
+    assigns
+    |> Map.put(:size_file, size_file)
   end
 
-  defp convert_size(size_in_bytes, type) do
+  defp convert_size(size_in_bytes, memory_unit) do
     size_in_bytes_float = size_in_bytes * 1.0
 
-    case type do
+    case memory_unit do
       "kB" -> Float.round(size_in_bytes_float / 1_000, 2)
       "MB" -> Float.round(size_in_bytes_float / 1_000_000, 2)
       "GB" -> Float.round(size_in_bytes_float / 1_000_000_000, 2)

lib/atomic_web/components/socials.ex

@@ -10,7 +10,7 @@ defmodule AtomicWeb.Components.Socials do
 
     ~H"""
     <div class="grid grid-cols-2 gap-2 md:flex md:flex-row">
-      <%= for {social, icon, url_base, social_value} <- @socials_with_values do %>
+      <%= for {social, icon, url_base, social_value} <- assigns.socials_with_values do %>
         <%= if social_value do %>
           <div class="flex flex-row items-center gap-x-2">
             <img src={"/images/" <> icon} class="h-5 w-5" alt={Atom.to_string(social)} />
@@ -25,9 +25,11 @@ defmodule AtomicWeb.Components.Socials do
   end
 
   defp get_social_values(entity) do
+    socials = Map.get(entity, :socials, %{})
+
     get_socials()
     |> Enum.map(fn {social, icon, url_base} ->
-      social_value = Map.get(entity, social)
+      social_value = Map.get(socials, social)
       {social, icon, url_base, social_value}
     end)
   end

lib/atomic_web/live/organization_live/show.html.heex

@@ -53,7 +53,7 @@
                             phx-click="unfollow"
                             @click.away="open = false"
                             @click="open = false"
-                            class="absolute left-0 z-10 mt-2 -mr-1 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-0 sm:left-auto"
+                            class="absolute left-0 z-10 mt-2 -mr-1 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-auto"
                             tabindex="-1"
                             role="listbox"
                             aria-labelledby="listbox-label"

lib/atomic_web/live/profile_live/edit.ex

@@ -14,7 +14,7 @@ defmodule AtomicWeb.ProfileLive.Edit do
   def handle_params(%{"slug" => user_slug}, _, socket) do
     user = Accounts.get_user_by_slug(user_slug)
 
-    if socket.assigns.current_user.slug == user_slug do
+    if socket.assigns.current_user && socket.assigns.current_user.slug == user_slug do
       {:noreply,
        socket
        |> assign(:page_title, user.name)

lib/atomic_web/live/profile_live/form_component.ex

@@ -1,8 +1,9 @@
 defmodule AtomicWeb.ProfileLive.FormComponent do
   use AtomicWeb, :live_component
 
-  alias Atomic.Accounts
-  alias AtomicWeb.Components.ImageUploader
+  alias Atomic.{Accounts, Organizations}
+
+  import AtomicWeb.Components.{Button, Avatar, Gradient, Forms, ImageUploader}
 
   @extensions_whitelist ~w(.jpg .jpeg .gif .png)
 
@@ -15,7 +16,7 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
        max_entries: 1,
        max_file_size: 10_000_000
      )
-     |> allow_upload(:image_2,
+     |> allow_upload(:banner,
        accept: @extensions_whitelist,
        max_entries: 1,
        max_file_size: 100_000_000
@@ -25,10 +26,12 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
   @impl true
   def update(%{user: user} = assigns, socket) do
     changeset = Accounts.change_user(user)
+    organizations = Organizations.list_user_organizations(user.id)
 
     {:ok,
      socket
      |> assign(assigns)
+     |> assign(:organizations, organizations)
      |> assign(:changeset, changeset)}
   end
 
@@ -45,7 +48,7 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
   end
 
   def handle_event("cancel-image", %{"ref" => ref}, socket) do
-    uploads = [:profile_picture, :image_2]
+    uploads = [:profile_picture, :banner]
 
     socket =
       Enum.reduce(uploads, socket, fn key, acc ->
@@ -94,38 +97,30 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
   end
 
   defp consume_image_data(socket, user) do
-    consume_uploaded_entries(socket, :profile_picture, fn %{path: path}, entry ->
-      handle_image_upload(user, path, entry, :profile_picture)
-    end)
-
-    consume_uploaded_entries(socket, :image_2, fn %{path: path}, entry ->
-      handle_image_upload(user, path, entry, :image_2)
-    end)
-
-    {:ok, user}
+    results =
+      [:profile_picture, :banner]
+      |> Enum.map(&consume_image_entry(socket, user, &1))
+      |> List.flatten()
+
+    if Enum.any?(results, fn result -> match?({:error, _}, result) end) do
+      {:error, results}
+    else
+      {:ok, user}
+    end
   end
 
-  defp handle_image_upload(user, path, entry, field) do
-    Accounts.update_user_picture(user, %{
-      "#{field}" => %Plug.Upload{
-        content_type: entry.client_type,
-        filename: entry.client_name,
-        path: path
-      }
-    })
-    |> case do
-      {:ok, user} ->
-        {:ok, user}
-
-      {:error, changeset} ->
-        if changeset.errors[field] do
-          {:postpone, "File size exceeds maximum allowed size"}
-        else
-          {:error, changeset}
-        end
-
-      {:errors, _changeset} ->
-        {:error, "An error occurred while updating the user."}
-    end
+  defp consume_image_entry(socket, user, field) do
+    consume_uploaded_entries(socket, field, fn %{path: path}, entry ->
+      case Accounts.update_user_picture(user, %{
+             "#{field}" => %Plug.Upload{
+               content_type: entry.client_type,
+               filename: entry.client_name,
+               path: path
+             }
+           }) do
+        {:ok, updated_user} -> {:ok, updated_user}
+        {:error, _changeset} -> {:error, field}
+      end
+    end)
   end
 end