DEV Community

Cover image for Let's Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack [PART 2]
Anthony Gonzalez
Anthony Gonzalez

Posted on • Edited on • Originally published at elixirprogrammer.com

Let's Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack [PART 2]

#elixir #webdev #programming #tutorial

In part 1 we got everything set up and with our base layout ready to go let's start working on user settings. You can catch up with the Instagram Clone GitHub Repo.

User Settings

Let's start by creating our routes, open lib/instagram_clone_web/router.ex and let's add the followings 2 routes under :require_authenticated_user scope:

  scope "/", InstagramCloneWeb do
    pipe_through [:browser, :require_authenticated_user]

    get "/users/settings/confirm_email/:token", UserSettingsController, :confirm_email
    live "/accounts/edit", UserLive.Settings
    live "/accounts/password/change", UserLive.PassSettings
  end
Enter fullscreen mode Exit fullscreen mode

Then we need to create those liveview files, create a folder named user_live under lib/instagram_clone_web/live inside that folder add the following 4 files:

lib/instagram_clone_web/live/user_live/settings.ex
lib/instagram_clone_web/live/user_live/settings.html.leex
lib/instagram_clone_web/live/user_live/pass_settings.ex
lib/instagram_clone_web/live/user_live/pass_settings.html.leex

In our navigation header, we need to link to that new route, open lib/instagram_clone_web/live/header_nav_component.html.leex on line 60 add the following to the Settings live_patch to:

<%= live_patch to:  Routes.live_path(@socket, InstagramCloneWeb.UserLive.Settings)  do  %>
  <li  class="py-2 px-4 hover:bg-gray-50">Settings</li>
<%  end  %>
Enter fullscreen mode Exit fullscreen mode

Now when we visit that link we should have an error because the files are empty so open lib/instagram_clone_web/live/user_live/settings.ex and add the following:

defmodule  InstagramCloneWeb.UserLive.Settings  do

  use InstagramCloneWeb,  :live_view

  @impl true
  def  mount(_params, session, socket) do
    socket =  assign_defaults(session, socket)

    {:ok, socket}
  end

end
Enter fullscreen mode Exit fullscreen mode

Now we should have a blank page just with the top nav bar, so let's go to work.

We are going to need the Accounts and User contexts, we will alias them and assign the changeset, our file should look like the following:

defmodule  InstagramCloneWeb.UserLive.Settings  do

  use InstagramCloneWeb,  :live_view

  alias InstagramClone.Accounts
  alias InstagramClone.Accounts.User

  @impl true
  def  mount(_params, session, socket) do
    socket =  assign_defaults(session, socket)
    changeset = Accounts.change_user(socket.assigns.current_user)

    {:ok, 
      socket
      |>  assign(changeset: changeset)}
  end

end
Enter fullscreen mode Exit fullscreen mode

We need to add the change_user() function to our Accounts context, open lib/instagram_clone/accounts.ex and below change_user_registration() function add the following:

...

def  change_user(user, attrs \\  %{}) do
  User.registration_changeset(user, attrs,  register_user:  false)
end

...
Enter fullscreen mode Exit fullscreen mode

Open lib/instagram_clone_web/live/user_live/settings.html.leex and let's add our form to our template:

<section class="border-2 flex" x-data="{username: '<%= @current_user.username %>'}">

  <div class="w-full py-8">
    <!-- Profile Photo -->
    <div class="flex items-center">
      <div class="w-1/3">
        <%= img_tag @current_user.avatar_url, class: "ml-auto w-10 h-10 rounded-full object-cover object-center" %>
      </div>
      <div class="w-full pl-8">
        <h1 x-text="username" class="leading-none font-semibold text-lg truncate text-gray-500"></h1>
      </div>
    </div>
    <!-- END PROFILE PHOTO -->

    <%= f = form_for @changeset, "#",
      phx_change: "validate",
      phx_submit: "save",
      class: "space-y-8 md:space-y-10" %>

      <div class="flex items-center">
        <%= label f, :full_name, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :full_name, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :full_name, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :username, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :username, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", x_model: "username", autocomplete: "off" %>
          <%= error_tag f, :username, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :website, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :website, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :website, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :bio, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= textarea f, :bio, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", rows: 3, autocomplete: "off" %>
          <%= error_tag f, :bio, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :email, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= email_input f, :email, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 shadow-sm focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :email, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <label class="block w-1/3 font-semibold text-right"></label>
        <div class="w-full pl-8 pr-20">
          <%= submit "Submit", phx_disable_with: "Saving...", class: "w-16 py-1 px-1 border-none shadow rounded font-semibold text-sm text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 cursor-pointer" %>
        </div>
      </div>
    </form>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

We added the base layout of our form and the username heading is updated when you type in the username input with AlpineJs. Now we need to add the validate() and save() functions to our lib/instagram_clone_web/live/user_live/settings.ex liveview document, but let's first assign our :page_title to our mount function:

  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)
    changeset = Accounts.change_user(socket.assigns.current_user)

    {:ok,
      socket
      |> assign(changeset: changeset)
      |> assign(page_title: "Edit Profile")} #This was added
  end
Enter fullscreen mode Exit fullscreen mode

Then open lib/instagram_clone_web/templates/layout/root.html.leex and update the page title suffix:

<%= live_title_tag assigns[:page_title]  ||  "InstagramClone",  suffix:  " · InstagramClone"  %>
Enter fullscreen mode Exit fullscreen mode

Now let's add the functions to handle the form to our lib/instagram_clone_web/live/user_live/settings.ex:

  @impl true
  def handle_event("validate", %{"user" => user_params}, socket) do
    changeset =
      socket.assigns.current_user
      |> Accounts.change_user(user_params)
      |> Map.put(:action, :validate)

    {:noreply, socket |> assign(changeset: changeset)}
  end

  @impl true
  def handle_event("save", %{"user" => user_params}, socket) do
    case Accounts.update_user(socket.assigns.current_user, user_params) do
      {:ok, _user} ->
        {:noreply,
          socket
          |> put_flash(:info, "User updated successfully")
          |> push_redirect(to: Routes.live_path(socket, InstagramWeb.UserLive.Settings))}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, :changeset, changeset)}
    end
  end
Enter fullscreen mode Exit fullscreen mode

Now we need to add our update_user() function to our Accounts context:

...

  def update_user(user, attrs) do
    user
    |> User.registration_changeset(attrs, register_user: false)
    |> Repo.update()
  end

...
Enter fullscreen mode Exit fullscreen mode

Our unique constraint for username is not working because we didn't add a unique index to our migration so let's do that now. In our terminal let's generate a migration $ mix ecto.gen.migration add_users_unique_username_index, then open the migration that was generated priv/repo/migrations/20210414220125_add_users_unique_username_index.exs and add the following:

defmodule InstagramClone.Repo.Migrations.AddUsersUniqueUsernameIndex do
  use Ecto.Migration

  def change do
    create unique_index(:users, [:username])
  end
end
Enter fullscreen mode Exit fullscreen mode

Then get back to our terminal and run the migration $ mix ecto.migrate

Now let's update our registration changeset in lib/instagram_clone/accounts/user.ex with unsafe_validate_unique(:username, InstagramClone.Repo):

...

  def registration_changeset(user, attrs, opts \\ []) do
    user
    |> cast(attrs, [:email, :password, :username, :full_name, :avatar_url, :bio, :website])
    |> validate_required([:username, :full_name])
    |> validate_length(:username, min: 5, max: 30)
    |> validate_format(:username, ~r/^[a-zA-Z0-9_.-]*$/, message: "Please use letters and numbers without space(only characters allowed _ . -)")
    |> unique_constraint(:username)
    |> unsafe_validate_unique(:username, InstagramClone.Repo) # --> This was added
    |> validate_length(:full_name, min: 4, max: 30)
    |> validate_email()
    |> validate_password(opts)
 end

...
Enter fullscreen mode Exit fullscreen mode

Also while testing I realize that I made a mistake trying to delay the live validation with :timer.sleep(9000) in our lib/instagram_clone_web/live/page_live.ex so let's just remove that line from our validate() function because it creates conflicts with the form:

  @impl true
  def handle_event("validate", %{"user" => user_params}, socket) do
    changeset =
      %User{}
      |> User.registration_changeset(user_params)
      |> Map.put(:action, :validate)
    #:timer.sleep(9000) <-- REMOVE THIS LINE
    {:noreply, socket |> assign(changeset: changeset)}
  end
Enter fullscreen mode Exit fullscreen mode

 

Alt Text
 

With that done we should be able to edit the profile with no problem, so now let's work on the avatar file upload.

Avatar Uploads

Open lib/instagram_clone_web/live/user_live/settings.ex and let's allow uploads in our liveview, the new updated file should look like the following:

defmodule InstagramCloneWeb.UserLive.Settings do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Accounts
  alias InstagramClone.Accounts.User
  #Files extensions accepted to be uploaded
  @extension_whitelist ~w(.jpg .jpeg .png)

  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)
    changeset = Accounts.change_user(socket.assigns.current_user)

    {:ok,
      socket
      |> assign(changeset: changeset)
      |> assign(page_title: "Edit Profile")
      |> allow_upload(:avatar_url,
      accept: @extension_whitelist,
      max_file_size: 9_000_000,
      progress: &handle_progress/3,#Function that will handle automatic uploads
      auto_upload: true)}
  end

  @impl true
  def handle_event("validate", %{"user" => user_params}, socket) do
    changeset =
      socket.assigns.current_user
      |> Accounts.change_user(user_params)
      |> Map.put(:action, :validate)

    {:noreply, socket |> assign(changeset: changeset)}
  end
  # Updates the socket when the upload form changes, triguers handle_progress()
  def handle_event("upload_avatar", _params, socket) do
    {:noreply, socket}
  end

  @impl true
  def handle_event("save", %{"user" => user_params}, socket) do
    case Accounts.update_user(socket.assigns.current_user, user_params) do
      {:ok, _user} ->
        {:noreply,
          socket
          |> put_flash(:info, "User updated successfully")
          |> push_redirect(to: Routes.live_path(socket, InstagramCloneWeb.UserLive.Settings))}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, :changeset, changeset)}
    end
  end
  # This will handle the upload
  defp handle_progress(:avatar_url, entry, socket) do

  end
end
Enter fullscreen mode Exit fullscreen mode

Open lib/instagram_clone_web/live/user_live/settings.html.leex and let's add our upload form below our username heading, with the @uploads that is being assigned to our socket:

<section class="border-2 flex" x-data="{username: '<%= @current_user.username %>'}">

  <div class="w-full py-8">
    <%= for {_ref, err} <- @uploads.avatar_url.errors do %>
      <p class="text-red-500 w-full text-center">
        <%= Phoenix.Naming.humanize(err) %>
      </p>
    <% end %>
    <!-- Profile Photo -->
    <div class="flex items-center">
      <div class="w-1/3">
        <%= img_tag @current_user.avatar_url, class: "ml-auto w-10 h-10 rounded-full object-cover object-center" %>
      </div>
      <div class="w-full pl-8">
        <h1 x-text="username" class="leading-none font-semibold text-lg truncate text-gray-500"></h1>

        <!-- THIS WAS ADDED -->
        <div  class="relative">
          <%= form_for @changeset,  "#",
            phx_change:  "upload_avatar"  %>
            <%= live_file_input @uploads.avatar_url,  class:  "cursor-pointer relative block opacity-0 z-40 -left-24"  %>
            <div  class="text-center absolute top-0 left-0 m-auto">
              <span  class="font-semibold text-sm text-light-blue-500">
                Change Profile Photo
              </span>
            </div>
          </form>
        </div>
        <!-- THIS WAS ADDED END -->

      </div>
    </div>
    <!-- END PROFILE PHOTO -->

    <%= f = form_for @changeset, "#",
      phx_change: "validate",
      phx_submit: "save",
      class: "space-y-8 md:space-y-10" %>

      <div class="flex items-center">
        <%= label f, :full_name, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :full_name, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :full_name, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :username, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :username, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", x_model: "username", autocomplete: "off" %>
          <%= error_tag f, :username, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :website, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= text_input f, :website, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :website, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :bio, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= textarea f, :bio, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black", rows: 3, autocomplete: "off" %>
          <%= error_tag f, :bio, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :email, class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= email_input f, :email, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 shadow-sm focus:ring-transparent focus:border-black", autocomplete: "off" %>
          <%= error_tag f, :email, class:  "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <label class="block w-1/3 font-semibold text-right"></label>
        <div class="w-full pl-8 pr-20">
          <%= submit "Submit", phx_disable_with: "Saving...", class: "w-16 py-1 px-1 border-none shadow rounded font-semibold text-sm text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 cursor-pointer" %>
        </div>
      </div>
    </form>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

Now let's create a module that would help us handle avatar uploads. Under lib/instagram_clone_web/live add a folder named uploaders, and inside that folder add a file named avatar.ex . We're going to be resizing the avatars so let's add the Mogrify dependency to handle it, make sure to have ImageMagick installed, open mix.exs and add to our project dependencies {:mogrify, "~> 0.8.0"}, then in our terminal $ mix deps.get && mix deps.compile.

Now open lib/instagram_clone_web/live/uploaders/avatar.ex and add the following:

defmodule InstagramClone.Uploaders.Avatar do
  alias InstagramCloneWeb.Router.Helpers, as: Routes

  # We are going to upload locally so this would be the name of the folder
  @upload_directory_name "uploads"
  @upload_directory_path "priv/static/uploads"

  # Returns the extensions associated with a given MIME type.
  defp ext(entry) do
    [ext | _] = MIME.extensions(entry.client_type)
    ext
  end

  # Returns the url path
  def get_avatar_url(socket, entry) do
    Routes.static_path(socket, "/#{@upload_directory_name}/#{entry.uuid}.#{ext(entry)}")
  end

  def update(socket, old_url, entry) do
    # Creates the upload directry path if not exists 
    if !File.exists?(@upload_directory_path), do: File.mkdir!(@upload_directory_path)

    # Consumes an individual uploaded entry
    Phoenix.LiveView.consume_uploaded_entry(socket, entry, fn %{} = meta ->
      # Destination paths for avatar thumbs
      dest = Path.join(@upload_directory_path, "#{entry.uuid}.#{ext(entry)}")
      dest_thumb = Path.join(@upload_directory_path, "thumb_#{entry.uuid}.#{ext(entry)}")

      # meta.path is the temporary file path
      mogrify_thumbnail(meta.path, dest, 300)
      mogrify_thumbnail(meta.path, dest_thumb, 150)

      # Removes Old Urls Paths
      rm_file(old_url)
      old_url |> get_thumb() |> rm_file()
    end)

    :ok
  end

  def get_thumb(avatar_url) do
    file_name = String.replace_leading(avatar_url, "/uploads/", "")
    ["/#{@upload_directory_name}", "thumb_#{file_name}"] |> Path.join()
  end

  def rm_file(old_avatar_url) do
    url = String.replace_leading(old_avatar_url, "/uploads/", "")
    path = [@upload_directory_path, url] |> Path.join()

    if File.exists?(path),  do: File.rm!(path)
  end

  # Resize the file with a given path, destination, and size
  defp mogrify_thumbnail(src_path, dst_path, size) do
    try do
      Mogrify.open(src_path)
      |> Mogrify.resize_to_limit("#{size}x#{size}")
      |> Mogrify.save(path: dst_path)
    rescue
      File.Error -> {:error, :invalid_src_path}
      error -> {:error, error}
    else
      _image -> {:ok, dst_path}
    end
  end

end
Enter fullscreen mode Exit fullscreen mode

Open lib/instagram_clone_web/live/user_live/settings.ex alias your newly created Avatar module at the top of our file alias InstagramClone.Uploaders.Avatar and update our handle_progress() function with the following:

  defp handle_progress(:avatar_url, entry, socket) do
    # If file is already uploaded to tmp folder
    if entry.done? do
      avatar_url = Avatar.get_avatar_url(socket, entry)
      user_params = %{"avatar_url" => avatar_url}
      case Accounts.update_user(socket.assigns.current_user, user_params) do
        {:ok, _user} ->
          Avatar.update(socket, socket.assigns.current_user.avatar_url, entry)
          @doc """
            We have to update the current user and assign it back to the socket 
            to get the header nav thumbnail automatically updated
          """
          current_user = Accounts.get_user!(socket.assigns.current_user.id)
          {:noreply,
            socket
            |> put_flash(:info, "Avatar updated successfully")
            |> assign(current_user: current_user)}
        {:error, %Ecto.Changeset{} = changeset} ->
          {:noreply, assign(socket, :changeset, changeset)}
      end
    else
      {:noreply, socket}
    end
  end
Enter fullscreen mode Exit fullscreen mode

Lastly, we need to serve the files from our uploads directory that's going to be created, open lib/instagram_clone_web/endpoint.ex and update line 27 in our Static Plug:

only:  ~w(css fonts images js favicon.ico robots.txt uploads)
Enter fullscreen mode Exit fullscreen mode

Now everything should work just fine, but we are uploading a thumbnail so let's use it in our templates, open lib/instagram_clone_web/live/header_nav_component.html.leex and update line 43 to use our thumbnail URL instead:

<%= img_tag InstagramClone.Uploaders.Avatar.get_thumb(@current_user.avatar_url), class:  "w-full h-full object-cover object-center"  %>
Enter fullscreen mode Exit fullscreen mode

Also open lib/instagram_clone_web/live/user_live/settings.html.leex and update line 7 to use our thumbnail also instead:

<%= img_tag Avatar.get_thumb(@current_user.avatar_url),  class:  "ml-auto w-10 h-10 rounded-full object-cover object-center"  %>
Enter fullscreen mode Exit fullscreen mode

Password Change Settings

Now the only thing left is changing the password, we are going to need a side navbar for that, so let's create a component to handle it because it will get share with the password change LiveView. Under lib/instagram_clone_web/live/user_live add the following 2 files:

lib/instagram_clone_web/live/user_live/settings_sidebar_component.ex
lib/instagram_clone_web/live/user_live/settings_sidebar_component.html.leex

In lib/instagram_clone_web/live/user_live/settings_sidebar_component.ex add the following:

defmodule  InstagramCloneWeb.UserLive.SettingsSidebarComponent  do
  use InstagramCloneWeb,  :live_component
end
Enter fullscreen mode Exit fullscreen mode

To lib/instagram_clone_web/live/user_live/settings_sidebar_component.html.leex add the following:

<div class="w-1/4 border-r-2">
  <ul>
    <%= live_patch content_tag(:li, "Edit Profile", class: "p-4 #{selected_link?(@current_uri_path,  @settings_path)}"),  to:  @settings_path %>
    <%= live_patch content_tag(:li, "Change Password", class: "p-4 #{selected_link?(@current_uri_path,  @pass_settings_path)}"),  to:  @pass_settings_path %>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Create a file named render_helpers.ex under lib/instagram_clone_web/live. Open lib/instagram_clone_web/live/render_helpers.ex and the following::

defmodule  InstagramCloneWeb.RenderHelpers  do

  def  selected_link?(current_uri, menu_link) when current_uri == menu_link do
    "border-l-2 border-black -ml-0.5 text-gray-900 font-semibold"
  end



  def  selected_link?(_current_uri,  _menu_link) do
    "hover:border-l-2 -ml-0.5 hover:border-gray-300 hover:bg-gray-50"
  end

end
Enter fullscreen mode Exit fullscreen mode

Those functions will help us to get the right styles for our links in our side navbar. Now we need to make those functions available in our templates, open lib/instagram_clone_web.ex and update the view helpers function to the following:

  defp view_helpers do
    quote do
      # Use all HTML functionality (forms, tags, etc)
      use Phoenix.HTML

      # Import LiveView helpers (live_render, live_component, live_patch, etc)
      import Phoenix.LiveView.Helpers

      # Import basic rendering functionality (render, render_layout, etc)
      import Phoenix.View

      import InstagramCloneWeb.ErrorHelpers
      import InstagramCloneWeb.Gettext
      import InstagramCloneWeb.RenderHelpers # <-- THIS LINE WAS ADDED
      alias InstagramCloneWeb.Router.Helpers, as: Routes
    end
  end
Enter fullscreen mode Exit fullscreen mode

Let's assign our paths to the socket, open lib/instagram_clone_web/live/user_live/settings.ex and in our mount add the following:

  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)
    changeset = Accounts.change_user(socket.assigns.current_user)
    # THIS WAS ADDED
    settings_path = Routes.live_path(socket, __MODULE__)
    pass_settings_path = Routes.live_path(socket, InstagramCloneWeb.UserLive.PassSettings)


    {:ok,
      socket
      |> assign(changeset: changeset)
      |> assign(page_title: "Edit Profile")
      |> assign(settings_path: settings_path, pass_settings_path: pass_settings_path)# <-- THIS WAS ADDED
      |> allow_upload(:avatar_url,
      accept: @extension_whitelist,
      max_file_size: 9_000_000,
      progress: &handle_progress/3,
      auto_upload: true)}
  end
Enter fullscreen mode Exit fullscreen mode

Open lib/instagram_clone_web/live/user_live/settings.html.leex inside the section tag at the top just below the start of the tag, let's insert our component:

<%= live_component @socket, InstagramCloneWeb.UserLive.SettingsSidebarComponent,  
  settings_path:  @settings_path,  
  pass_settings_path:  @pass_settings_path,  
  current_uri_path:  @current_uri_path %>
Enter fullscreen mode Exit fullscreen mode

Open lib/instagram_clone_web/live/user_live/pass_settings.ex add the following:

defmodule InstagramCloneWeb.UserLive.PassSettings do
  use InstagramCloneWeb, :live_view

  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)
    settings_path = Routes.live_path(socket, InstagramCloneWeb.UserLive.Settings)
    pass_settings_path = Routes.live_path(socket, __MODULE__)

    {:ok,
      socket
      |> assign(settings_path: settings_path, pass_settings_path: pass_settings_path)}
  end
end
Enter fullscreen mode Exit fullscreen mode

Then open lib/instagram_clone_web/live/user_live/pass_settings.html.leex add the following:

<section class="border-2 flex">
  <%= live_component @socket, InstagramCloneWeb.UserLive.SettingsSidebarComponent,
    settings_path: @settings_path,
    pass_settings_path: @pass_settings_path,
    current_uri_path: @current_uri_path %>
</section>
Enter fullscreen mode Exit fullscreen mode

 

Alt Text

 

Let's add the form to lib/instagram_clone_web/live/user_live/pass_settings.html.leex :

<section class="border-2 flex">
  <%= live_component @socket, InstagramCloneWeb.UserLive.SettingsSidebarComponent,
    settings_path: @settings_path,
    pass_settings_path: @pass_settings_path,
    current_uri_path: @current_uri_path %>

  <div class="w-full py-5">
    <!-- Profile Photo -->
    <div class="flex items-center">
      <div class="w-1/3">
        <%= img_tag Avatar.get_thumb(@current_user.avatar_url), class: "ml-auto w-10 h-10 rounded-full object-cover object-center" %>
      </div>
      <div class="w-full pl-8">
        <h1 class="font-semibold text-xl truncate text-gray-600"><%= @current_user.username %></h1>
      </div>
    </div>
    <!-- End Profile Photo -->
    <%= f = form_for @changeset, "#",
      phx_submit: "save",
      class: "space-y-5 md:space-y-8"  %>

      <div class="md:flex items-center">
        <%= label f, :old_password, "Old Password", class: "w-1/3 text-right font-semibold", for: "current_password_for_password" %>
        <div class="w-full pl-8 pr-20">
          <%= password_input f, :current_password, required: true, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black" %>
          <%= error_tag f, :current_password, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :password, "New Password", class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= password_input f, :password, required: true, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black" %>
          <%= error_tag f, :password, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="md:flex items-center">
        <%= label f, :password_confirmation, "Confirm New Password", class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= password_input f, :password_confirmation, required: true, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black" %>
          <%= error_tag f, :password_confirmation, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <label class="w-1/3"></label>
        <div class="w-full pl-8 pr-20">
          <%= submit "Change Password", phx_disable_with: "Saving...", class: "py-1 px-2 border-none shadow rounded font-semibold text-sm text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 cursor-pointer" %>
        </div>
      </div>

      <div class="flex items-center">
        <label class="w-1/3"></label>
        <div class="w-full pl-8 pr-20 text-right">
          <%= link "Forgot Password?", to: Routes.user_reset_password_path(@socket, :new), class: "font-semibold text-xs hover:text-light-blue-600 text-light-blue-500 cursor-pointer hover:underline" %>
        </div>
      </div>
    </form>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

Finally update lib/instagram_clone_web/live/user_live/pass_settings.ex to the following:

defmodule InstagramCloneWeb.UserLive.PassSettings do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Accounts
  alias InstagramClone.Accounts.User
  alias InstagramClone.Uploaders.Avatar

  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)
    settings_path = Routes.live_path(socket, InstagramCloneWeb.UserLive.Settings)
    pass_settings_path = Routes.live_path(socket, __MODULE__)
    user = socket.assigns.current_user

    {:ok,
      socket
      |> assign(settings_path: settings_path, pass_settings_path: pass_settings_path)
      |> assign(:page_title, "Change Password")
      |> assign(changeset: Accounts.change_user_password(user))}
  end

  @impl true
  def handle_event("save", %{"user" => params}, socket) do
    %{"current_password" => password} = params
    case Accounts.update_user_password(socket.assigns.current_user, password, params) do
      {:ok, _user} ->
        {:noreply,
          socket
          |> put_flash(:info, "Password updated successfully.")
          |> push_redirect(to: socket.assigns.pass_settings_path)}

      {:error, changeset} ->
        {:noreply, assign(socket, :changeset, changeset)}
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

Go to lib/instagram_clone/accounts.ex on line 208, and update update_user_password() to the following:

def  update_user_password(user, password, attrs) do
  user
  |> User.password_changeset(attrs)
  |> User.validate_current_password(password)
  |> Repo.update()
end
Enter fullscreen mode Exit fullscreen mode

 

This is delightful, I'm really enjoying it. In the next part let's work on user's profiles. Let me know what you think in the comments down below, I really appreciate your time, thank you so much for reading.

 

CHECK OUT THE INSTAGRAM CLONE GITHUB REPO

 
 
 

Join The Elixir Army

Top comments (6)

Collapse
 
johankool profile image
Johan Kool •

Very nice tutorials! Learning a lot! Question, shouldn't defmodule InstagramClone.Uploaders.Avatar be defmodule InstagramCloneWeb.Uploaders.Avatar?

Collapse
 
elixirprogrammer profile image
Anthony Gonzalez •

Not really, you're free to do so, but that module is just a helper to handle uploads, you don't even need to use the module you can just use functions inside the LiveView.

Collapse
 
leonardb profile image
leonardb •

Coming into Elixir from a pure Erlang background and I'm really enjoying following this

Collapse
 
elixirprogrammer profile image
Anthony Gonzalez •

Glad you like it! Stay tuned for part 3, coming out soon!

Collapse
 
dado_borsa profile image
eBorsa •

Great job, man.
Anxiously waiting for part 3

Collapse
 
elixirprogrammer profile image
Anthony Gonzalez •

Thanks! Part 3 almost done, I'm stuck on a bug, but I might drop it tomorrow.

Read next

me_bhavesh profile image

How to Verify gtag.js Implementation in GA4

Bhavesh Patel -

cp_nandani profile image

Integrating Live Activity and Dynamic Island in iOS: A Complete Guide

Nandani Sharma -

ng_news profile image

Ng-News 24/46: Angular Camp, TypeScript 5.7 RC

ng-news -

jeet_dhandha profile image

Building and Comparing Table Data Made Easy with @libs-jd/table-data-kit

Jeet Dhandha -