f0rest8

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',

f0rest8

defmodule YourAppWeb.PersonRegistrationLive.New do
  use Phoenix.LiveView

  alias YourAppWeb.Router.Helpers, as: Routes
  alias YourApp.Accounts
  alias YourApp.Accounts.Person

  def mount(_params, _session, socket) do
    changeset = Accounts.change_person_registration(%Person{})
    {:ok, assign(socket, changeset: changeset)}

f0rest8

defmodule YourAppWeb.PersonRegistrationLive.New do
  use Phoenix.LiveView

  alias YourAppWeb.Router.Helpers, as: Routes
  alias YourApp.Accounts
  alias YourApp.Accounts.Person

  def mount(_params, _session, socket) do
    changeset = Accounts.change_person_registration(%Person{})
    {:ok,

f0rest8

<%= f = form_for @changeset, "#", [phx_change: :validate, phx_submit: :save] %>
  
  <div class="<%= unless @current_step === 1, do: "hidden" %>">
    <!-- Step 1 form fields here -->
  </div>
  <div class="<%= unless @current_step === 2, do: "hidden" %>">
    <!-- Step 2 form fields here -->
  </div>
  <div class="<%= unless @current_step === 3, do: "hidden" %>">
    <!-- Step 3 form fields here -->

f0rest8

defmodule YourApp.Extensions.PhoneNumber do
  @moduledoc """
  Functions for implementing phone number validations and formatting
  using [ex_phone_number](https://hex.pm/packages/ex_phone_number).
  """

  @doc """
  Parses a given phone number string.

  ## Example

f0rest8

defmodule YourApp.Accounts.Person do
  ...
  alias YourApp.Encrypted # optional encryption
  alias YourApp.Extensions.PhoneNumber
  ...
  
  schema "people" do
    ...
    field :phone_number, Encrypted.Binary, redact: true
    ...

f0rest8

defmodule YourAppWeb.PersonRegistrationLive.New do
  ...

  def handle_event("next-step", _value, socket) do
    current_step = socket.assigns.current_step
    changeset = socket.assigns.changeset

    step_invalid =
      case current_step do
        1 -> Enum.any?(Keyword.keys(changeset.errors), fn k -> k in [:name] end)

f0rest8

<%= f = form_for @changeset, "#", [phx_change: :validate, phx_submit: :save] %>
  
  <div class="<%= unless @current_step === 1, do: "hidden" %>">
    <!-- Step 1 form fields here -->
  </div>
  <div class="<%= unless @current_step === 2, do: "hidden" %>">
    <!-- Step 2 form fields here -->
  </div>
  <div class="<%= unless @current_step === 3, do: "hidden" %>">
    <!-- Step 3 form fields here -->

f0rest8

...
import 'alpinejs' // Optional (we don't actually use alpine in this example)
...
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
...

let Hooks = {}

Hooks.PhoneNumber = {
  mounted() {

f0rest8

def render(assigns) do
  ~H"""
    <.form let={f} for={@changeset} url="#" phx_change="validate" phx_submit="save">

      <div class={unless @current_step === 1, do: "hidden"}>
        <!-- Step 1 form fields here -->
      </div>
      <div class={unless @current_step === 2, do: "hidden"}>
        <!-- Step 2 form fields here -->
      </div>