Secure Text

Element type: Dictionary

Lets you ask to the user to enter some text in a secure field.

info

The SecureText component use the same keys as the Text input component except for the InputType and Validation.

Keys

Name	Type	Possible values	Required
Type	String	Input	Required
InputType	String	SecureText	Required
Variable	String	-	Required
Label	String	-
LabelFontConfiguration	Dictionary (Font)	-
Distribution	String	Fit, Center
PercentWidth	Number	0...1
Placeholder	String
Validation	Dictionary
Margins	Dictionary (Margins)	-
Border	Dictionary (Border)	-
Condition PRO	Dictionary (Condition)	-

Detail

Type Required

Type: String
Explanation: The type of the component has to be Input.

InputType Required

Type: String
Explanation: The type of the component has to be SecureText.

Variable Required

Type: String
Explanation: The variable used within the application and as the key used in the input file Octory will create to let you retrieve the user inputs.

Label

Type: String
Explanation: The label lets you give some insight to the end user about the value they need to enter. Its text will generally be placed on the left side of the input field.

info

If you do not specify a label, the input field will be centered. To keep the alignment with other input components which have a label, give the Label a whitespace for value.

LabelFontConfiguration

Type: Dictionary (Font)
Explanation: Let you specify the font configuration to use. Default is "DefaultPrimary" if specified in the Font styles in the configuration file, or system font otherwise.

Distribution

Type: String
Possible values: Fit, Center
Default: Center
Explanation: Specify how the label and the input field are stacked.

• Fit gives them as much space as they need, but the input component will not be aligned with the other ones.
• Center align the label and the input field in the horizontal middle of its container. This allow several input components to be aligned, although it may crop the text label.

PercentWidth

Type: Number
Possible values: 0...1
Explanation: This value allows you to give more width to an input component, by specifying the percentage width it should take in its container. Default is most often 0.4.

Placeholder

Type: Number
Explanation: Text which appears in the text field to show to the end user what kind of value is needed.

Validation

Type: Dictionary
Explanation: Allows you to validate the value entered by the user in the SecureText input component.

Input SecureText Validation

Name	Type	Required
IsConfirmEnabled	Boolean
ConfirmPlaceholder	String
WarningText	String
FontConfiguration	Dictionary (Font)
Regex	String	Required

IsConfirmEnabled

Type: Boolean
Explanation: Lets you activate a confirmation field to appear under and be required to continue.

ConfirmPlaceholder

Type: String
Explanation: The placeholder of the confirmation field if it's activated.

WarningText

Type: String
Explanation: The text to display to the user when the input is empty or its value is incorrect. Default is "Incorrect or empty value".

FontConfiguration

Type: Dictionary (Font)
Explanation: The font configuration to use for the warning text.

Regex Required

Type: String
Explanation: The pattern regular expression to use to validate the user input.

Margins

Type: Dictionary (Margins)
Explanation: Add padding to the component's sides.

Border

Type: Dictionary (Border)
Explanation: Add a top or bottom border to a component.

Condition PRO

Type: Dictionary (Condition)
Explanation: Allows to hide or show the component using a boolean expression.

Example

SecureText input component to ask the user to enter a password with a confirmation field and a validation to only accept a password with least 8 characters, one capital letter, one lowercase letter and one number or special character.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Input</string>
							<key>InputType</key>
							<string>SecureText</string>
							<key>Label</key>
							<string>Password must have at least 8 characters, one capital letter, one lowercase letter and one number or special character</string>
							<key>Variable</key>
							<string>PasswordTag</string>
							<key>Placeholder</key>
							<string>Your password</string>
							<key>Validation</key>
							<dict>
								<key>IsConfirmEnabled</key>
								<string>1</string>
								<key>ConfirmPlaceholder</key>
								<string>Confirm your password</string>
								<key>Regex</key>
								<string>(?-i)(?=^.{8,}$)((?!.*\s)(?=.*[A-Z])(?=.*[a-z]))((?=(.*\d){1,})|(?=(.*\W){1,}))^.*$</string>
								<key>WarningText</key>
								<string>Wrong password format or confirm field is different</string>
							</dict>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>