CODEWITHSUNDEEP
scalaplayframeworkplay-framework-2.7
SkyWalker
SkyWalker

Reputation: 14307

Scala Play: How to render Form mappings with Repeated and Nested values?

I'm working on a Scala Play 2.7.x (you may checkout the project here play-silhouette-seed googleauth branch) and I have a form defined as:

object TotpSetupForm {
  val form = Form(
    mapping(
      "sharedKey" -> nonEmptyText,
      "scratchCodes" -> seq(mapping(
        "hasher" -> nonEmptyText,
        "password" -> nonEmptyText,
        "salt" -> optional(nonEmptyText)
      )(PasswordInfo.apply)(PasswordInfo.unapply)),
      "scratchCodesPlain" -> optional(seq(nonEmptyText)),
      "verificationCode" -> nonEmptyText(minLength = 6, maxLength = 6)
    )(Data.apply)(Data.unapply)
  )

  case class Data(
    sharedKey: String,
    scratchCodes: Seq[PasswordInfo],
    scratchCodesPlain: Option[Seq[String]],
    verificationCode: String = "")
}

Where PasswordInfo comes from Play-Silhouette and looks like:

case class PasswordInfo(
  hasher: String,
  password: String,
  salt: Option[String] = None
) extends AuthInfo

In my controller I populate the form and pass it as parameter to my view template as follows. Note that I have debugged it and totpInfo.scratchCodes has 5 values and the form is correctly populated:

val formData = TotpSetupForm.form.fill(TotpSetupForm.Data(totpInfo.sharedKey, totpInfo.scratchCodes, totpInfo.scratchCodesPlain))
Ok(views.html.someView(formData, ...)

I render the view as follows, please note that I did read the Scala Forms Repeated Values documentation note :) 

@helper.form(action = controllers.routes.TotpController.submit()) {
    @helper.CSRF.formField
    @b3.text(totpForm("verificationCode"), '_hiddenLabel -> messages("verificationCode"), 'placeholder -> messages("verificationCode"), 'autocomplete -> "off", 'class -> "form-control input-lg")
    @b3.hidden(totpForm("sharedKey"))
    @helper.repeatWithIndex(totpForm("scratchCodes"), min = 1) { (scratchCodeField, index) =>
        @b3.hidden(scratchCodeField, '_label -> ("scratchCode #" + index))
    }
    <div class="form-group">
        <div>
            <button id="submit" type="submit" value="submit" class="btn btn-lg btn-primary btn-block">@messages("verify")</button>
        </div>
    </div>
}

even though the form's scratchCodes sequence is correctly populated, each of the sequence values render as empty:

<input type="hidden" name="scratchCodes[0]" value="" >
<input type="hidden" name="scratchCodes[1]" value="" >
<input type="hidden" name="scratchCodes[2]" value="" >
<input type="hidden" name="scratchCodes[3]" value="" >
<input type="hidden" name="scratchCodes[4]" value="" >

The number of fields in the sequence is correct though.

I have also tried using the @helper.repeat alternative and even using the @helper.input instead of @b3.hidden just to be sure and the result is always the same ... I get empty valued PasswordInfo tuples rendered.

How can I fix this?

Upvotes: 1

Views: 849

Answers (1)

SkyWalker
SkyWalker

Reputation: 14307

OK found the culprit: repeated + nested values require accessing each attribute separately like this:

@helper.repeat(totpForm("scratchCodes"), min = 1) { scratchCodeField =>
  @b3.hidden(scratchCodeField("hasher"))
  @b3.hidden(scratchCodeField("password"))
  @b3.hidden(scratchCodeField("salt"))
}

then works fine and the post request populates the sequence of PasswordInfo UDTs correctly.

Upvotes: 2

Related Questions