Add password input (#357)

* Add password input

* Save empty string for password in .livemd file

* Update lib/livebook_web/live/session_live/cell_component.ex

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

lib/livebook/live_markdown/export.ex

@@ -49,12 +49,14 @@ defmodule Livebook.LiveMarkdown.Export do
   end
 
   defp render_cell(%Cell.Input{} = cell) do
+    value = if cell.type == :password, do: "", else: cell.value
+
     json =
       Jason.encode!(%{
         livebook_object: :cell_input,
         type: cell.type,
         name: cell.name,
-        value: cell.value
+        value: value
       })
 
     "<!-- livebook:#{json} -->"

lib/livebook/notebook/cell/input.ex

@@ -19,7 +19,7 @@ defmodule Livebook.Notebook.Cell.Input do
           value: String.t()
         }
 
-  @type type :: :text | :url | :number
+  @type type :: :text | :url | :number | :password
 
   @doc """
   Returns an empty cell.
@@ -46,6 +46,8 @@ defmodule Livebook.Notebook.Cell.Input do
 
   defp validate_value(_value, :text), do: :ok
 
+  defp validate_value(_value, :password), do: :ok
+
   defp validate_value(value, :url) do
     if Utils.valid_url?(value) do
       :ok

lib/livebook_web/live/session_live/cell_component.ex

@@ -191,7 +191,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
           <div class="input-label">
             <%= @cell_view.name %>
           </div>
-          <input type="text"
+          <input type="<%= if(@cell_view.input_type == :password, do: "password", else: "text") %>"
             data-element="input"
             class="input <%= if(@cell_view.error, do: "input--error") %>"
             name="value"

lib/livebook_web/live/session_live/input_cell_settings_component.ex

@@ -29,7 +29,7 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do
           <input type="text" class="input" name="name" value="<%= @name %>" spellcheck="false" autocomplete="off" autofocus />
         </div>
         <div class="mt-4 flex space-x-8 items-center">
-          <%= render_radios("type", [text: "Text", url: "URL", number: "Number"], @type) %>
+          <%= render_radios("type", [text: "Text", url: "URL", number: "Number", password: "Password"], @type) %>
         </div>
         <div class="mt-8 flex justify-end space-x-2">
           <%= live_patch "Cancel", to: @return_to, class: "button button-outlined-gray" %>

test/livebook/live_markdown/export_test.exs

@@ -382,4 +382,39 @@ defmodule Livebook.LiveMarkdown.ExportTest do
 
     assert expected_document == document
   end
+
+  test "save password as empty string" do
+    notebook = %{
+      Notebook.new()
+      | name: "My Notebook",
+        metadata: %{},
+        sections: [
+          %{
+            Notebook.Section.new()
+            | name: "Section 1",
+              metadata: %{},
+              cells: [
+                %{
+                  Notebook.Cell.new(:input)
+                  | type: :password,
+                    name: "pass",
+                    value: "0123456789"
+                }
+              ]
+          }
+        ]
+    }
+
+    expected_document = """
+    # My Notebook
+
+    ## Section 1
+
+    <!-- livebook:{"livebook_object":"cell_input","name":"pass","type":"password","value":""} -->
+    """
+
+    document = Export.notebook_to_markdown(notebook)
+
+    assert expected_document == document
+  end
 end