SecureField for passwords in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a secure password input field using SwiftUI.

iOS Swift

SecureField("Enter password", text: $[1])

Drag options to blanks, or click blank then click option'

Aemail

Busername

Ctext

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that does not hold the password text.

Forgetting to use the $ sign for binding.

The SecureField requires a binding to a String variable that stores the password. Here, password is the correct variable name.

2fill in blank

medium

Complete the code to declare a state variable for the password in SwiftUI.

iOS Swift

@State private var [1] = ""

Drag options to blanks, or click blank then click option'

Ausername

Bpassword

Cemail

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name unrelated to password.

Not declaring the variable as @State.

The password input needs a @State variable to store its value. Naming it password is clear and standard.

3fill in blank

hard

Fix the error in the SecureField declaration by completing the code.

iOS Swift

SecureField("Password", text: [1])

Drag options to blanks, or click blank then click option'

A$password

Bpassword

C&password

D*password

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign causes a type mismatch error.

Using incorrect symbols like & or *.

In SwiftUI, to bind a variable to a control, you must use the $ prefix. So $password is correct.

4fill in blank

hard

Fill both blanks to create a SwiftUI view with a SecureField and a Text label showing password length.

iOS Swift

struct ContentView: View {
  @State private var [1] = ""
  var body: some View {
    VStack {
      SecureField("Password", text: $[2])
      Text("Length: \([1].count)")
    }
  }
}

Drag options to blanks, or click blank then click option'

Apassword

Busername

Cemail

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in the two blanks.

Forgetting the $ sign in the SecureField binding.

Both blanks refer to the same password variable. The SecureField binds to $password, and the Text shows the count of characters in password.

5fill in blank

hard

Fill all three blanks to create a SwiftUI view with a SecureField, a Text label showing password length, and a Button to clear the password.

iOS Swift

struct ContentView: View {
  @State private var [1] = ""
  var body: some View {
    VStack {
      SecureField("Password", text: $[2])
      Text("Length: \([2].count)")
      Button("Clear") {
        [3] = ""
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

Apassword

Busername

Cemail

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in the blanks.

Forgetting to use $ in the SecureField binding.

All blanks use the same variable password. The SecureField binds to $password, the Text shows password.count, and the Button clears password.

Practice

1. What is the main purpose of using SecureField in a SwiftUI app?

easy

A. To display a multiline text input

B. To hide the text input, typically for passwords

C. To create a button that submits a form

D. To show a label with static text

Solution

1. Step 1: Understand SecureField's role

   SecureField is designed to hide user input, making it ideal for passwords.

2. Step 2: Compare with other UI elements

   Unlike TextField, SecureField masks the input characters for privacy.

3. Final Answer:

   To hide the text input, typically for passwords -> Option B

4. Quick Check:

   SecureField hides input = B [OK]

Hint: SecureField always hides input text for privacy [OK]

Common Mistakes:

• Confusing SecureField with TextField
• Thinking SecureField shows visible text
• Using SecureField for buttons or labels

2. Which of the following is the correct syntax to create a SecureField bound to a @State variable named password with placeholder "Enter password"?

easy

A. SecureField("Enter password", text: $password)

B. SecureField(text: $password, placeholder: "Enter password")

C. SecureField("Enter password", binding: password)

D. SecureField(text: password, placeholder: "Enter password")

Solution

1. Step 1: Recall SecureField initializer

   The correct initializer is SecureField(_ titleKey: String, text: Binding<String>).

2. Step 2: Match syntax with variable

   Binding uses $password to connect the state variable.

3. Final Answer:

   SecureField("Enter password", text: $password) -> Option A

4. Quick Check:

   SecureField("text", text: $variable) = D [OK]

Hint: Use $ before state variable for binding in SecureField [OK]

Common Mistakes:

• Swapping parameter order
• Missing $ for binding
• Using wrong parameter names

3. What will be displayed on screen when this SwiftUI code runs?

struct ContentView: View {
  @State private var password = ""
  var body: some View {
    SecureField("Password", text: $password)
      .padding()
      .border(Color.gray)
  }
}

medium

A. A text input box showing typed characters as dots or bullets

B. A plain text label showing the word "Password"

C. A button labeled "Password"

D. An empty screen with no visible UI

Solution

1. Step 1: Identify UI element

   The code uses SecureField with placeholder "Password" and binds to a state variable.

2. Step 2: Understand SecureField behavior

   It shows a text input box that masks typed characters as dots or bullets.

3. Final Answer:

   A text input box showing typed characters as dots or bullets -> Option A

4. Quick Check:

   SecureField input masked = A [OK]

Hint: SecureField input is always masked visually [OK]

Common Mistakes:

• Thinking placeholder text is always visible
• Confusing SecureField with Text label
• Expecting a button instead of input

4. Identify the error in this SwiftUI code snippet:

@State private var password = ""
var body: some View {
  SecureField("Enter password", text: password)
}

medium

A. Password variable should be a constant

B. SecureField cannot be used inside body

C. Placeholder text must be empty string

D. Missing $ before password in binding

Solution

1. Step 1: Check binding syntax

   The text parameter requires a binding, which needs $password, not just password.

2. Step 2: Understand @State usage

   @State variables are accessed with $ to create bindings for UI elements.

3. Final Answer:

   Missing $ before password in binding -> Option D

4. Quick Check:

   Binding needs $ prefix = C [OK]

Hint: Always use $ before @State variable for binding in SecureField [OK]

Common Mistakes:

• Omitting $ causing compile error
• Thinking SecureField can't be in body
• Misunderstanding placeholder requirements

5. You want to create a password input field that shows a hint "At least 8 characters" below the SecureField. Which SwiftUI code snippet correctly achieves this?

hard

A. SecureField("Password", text: $password).hint("At least 8 characters")

B. SecureField("Password", text: $password).placeholder("At least 8 characters")

C. VStack {
SecureField("Password", text: $password)
Text("At least 8 characters").font(.footnote).foregroundColor(.gray)
}

D. Text("At least 8 characters")
SecureField("Password", text: $password)

Solution

1. Step 1: Understand layout for hint text

   Use a VStack to stack SecureField and hint Text vertically.

2. Step 2: Style hint text appropriately

   Apply smaller font and gray color to hint text for subtlety.

3. Step 3: Check other options

   Options B and C use non-existent modifiers; D places Text above SecureField, not below.

4. Final Answer:

   VStack { SecureField("Password", text: $password) Text("At least 8 characters").font(.footnote).foregroundColor(.gray) } -> Option C

5. Quick Check:

   Use VStack for hint below SecureField = A [OK]

Hint: Stack SecureField and hint Text in VStack for vertical layout [OK]

Common Mistakes:

• Using invalid modifiers like .placeholder or .hint
• Placing hint text above SecureField
• Not styling hint text for clarity