A passcode entry field for macOS similar to Apple's two-factor authentication field.

Overview

DSFPasscodeView

A passcode entry field for macOS similar to Apple's two-factor authentication field.



Swift Package Manager

About

The control is made up of multiple groups of passcode 'cells'. Each cell holds a single 'character', and you define groups of cells using a group separator. The pattern you define provides the layout -- containing # for a passcode cell and - for a group separator.

For example, to create a passcode of six characters split evenly into two groups of three cells, you set the passcode pattern to "###-###"

.---. .---. .---.   .---. .---. .---.
|   | |   | |   |   |   | |   | |   |
|   | |   | |   |   |   | |   | |   |
`---' `---' `---'   `---' `---' `---'

This control can be used in both autolayout and manual layout apps (internally the control does not use auto-layout)

Note this control uses @VIViewInvalidating providing automatic NSView invalidation when properties value change. (automatically added as a dependency)

Features

  • Configurable allowable character support
  • Character Viewer support (eg. hit Command-Ctrl-Space when a passcode cell is active)
  • Different fonts
  • Different spacing (intra-cell, edge insets, group and cell spacing)
  • Light and dark modes
  • High contrast support
  • Accessibility and VoiceOver support

Installation

Using Swift Package Manager, add https://github.com/dagronf/DSFPasscodeView to your project.

Settings

pattern (String)

The cell pattern to use when displaying the passcode. A # represents a cell and a - represents a group space.

The only valid characters are # (a cell) and - (group spacing). Attempting to set a pattern with any other character will result in a fatalError()

Examples :-

"###-###"
.---. .---. .---.   .---. .---. .---.
|   | |   | |   |   |   | |   | |   |
|   | |   | |   |   |   | |   | |   |
`---' `---' `---'   `---' `---' `---'

"####-##-###"
.---. .---. .---. .---.   .---. .---.   .---. .---. .---.
|   | |   | |   | |   |   |   | |   |   |   | |   | |   |
|   | |   | |   | |   |   |   | |   |   |   | |   | |   |
`---' `---' `---' `---'   `---' `---'   `---' `---' `---'

"##-##-#"
.---. .---.   .---. .---.   .---.
|   | |   |   |   | |   |   |   |
|   | |   |   |   | |   |   |   |
`---' `---'   `---' `---'   `---'

cellSpacing (CGFloat)

The spacing to use between adjacent cells

groupSpacing (CGFloat)

The spacing to use between cell groups

font (NSFont)

The font to use when displaying the character in a cell

padding (CGSize)

The padding to use between the character and the edge of its cell

edgeInsets (NSEdgeInsets)

The padding to use between the cells and the bounds of the control

isEnabled (Bool)

Enable or disable the control (observable)

Validations

There are two methods of validation

allowableCharacters (String)

This settings on the control allows you to specify a string containing the characters that are allowed within the control. By default, this is 0123456789.

characterValidatorBlock

For more complex validations, you can specify a callback block which can be used to validate each character

It takes a string element and returns either a value transformed string element (for example, uppercased), or nil if the presented character isn't valid for the control.

// A validator block which allows numbers and case-insensitive A-F characters
self.passcode.characterValidatorBlock = { element in
   let validChars = "0123456789ABCDEF"
   let s = element.uppercased()         // Always check against uppercase
   if validChars.contains(s) {          // If the validChars contains the uppercased char...
       return s.first                   //  ... return the uppercased version
   }
   return nil                           // Unsupported char, ignore by returning nil
}

Values

You can bind to these member variables to receive updates as the control content changes.

isValidPasscode (Bool)

Is the passcode entered a valid passcode (ie. all the values are specified)

isEmpty (Bool)

Are there no values specified yet

passcodeValue (String)

If the passcode is valid, the passcode value as a string, otherwise nil.

Delegate (DSFPasscodeViewHandling)

You can attach a delegate to receive messages back from the view if binding is not your thing.

func passcodeViewDidChange(
   _ view: DSFPasscodeView)

Called when the content of the passcode view changes.

func passcodeView(
   _ view: DSFPasscodeView,                        // The passcode view
   updatedPasscodeValue passcode: String)          // The valid passcode as a string of characters

Called ONLY when the passcode is valid and complete.

func passcodeView(
   _ view: DSFPasscodeView,                        // The passcode view 
   didTryInvalidCharacter invalidChar: String?,    // The invalid character, or nil for a special key
   atIndex index: Int)                             // The passcode cell index where the attempt failed

Called if the user presses an unsupported character or key in a passcode cell.

Known issues

  • Xcode has been broken for many years regarding support for @IBDesignable/@IBInspectable. Whilst this control provides support, Xcode's support for @IBDesignable for a control provided from a package is completely broken.

If you copy the DSFPasscodeView source files directly into your project the Designables work as expected (FB8358478).

License

MIT. Use it and abuse it for anything you want, just attribute my work. Let me know if you do use it somewhere, I'd love to hear about it!

MIT License

Copyright (c) 2021 Darren Ford

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
You might also like...
The minimalistic, secure and open-source two-factor authentication app.
The minimalistic, secure and open-source two-factor authentication app.

Einmal /ˈainmaːl/ German: once The minimalistic, secure and open-source two-factor authentication app. Features ♻️ Cross-platform — available on Andro

Two-Factor Authentication Client for iOS

Authenticator Two-Factor Authentication Client for iOS. Authenticator is a simple, free, and open source two-factor authentication app. It helps keep

An easy-to-use, open-source two-factor authentication app designed specifically for iOS.
An easy-to-use, open-source two-factor authentication app designed specifically for iOS.

Tofu An easy-to-use, open-source two-factor authentication app designed specifically for iOS. Tofu generates one-time passwords to help you protect yo

🐵Fooling around with Apples private framework AvatarKit
🐵Fooling around with Apples private framework AvatarKit

Fooling around with Apples private framework AvatarKit, the framework used in Messages.app for recording Animoji videos. If you are looking to create your own Animoji, take a look at SBSCustomAnimoji.

Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.
Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.

FloatLabelFields Overview Installation Via Interface Builder Via Code Credits Additional References Questions Overview FloatLabelFields is the Swift i

An iOS passcode lock with TouchID authentication written in Swift.
An iOS passcode lock with TouchID authentication written in Swift.

PasscodeLock A Swift implementation of passcode lock for iOS with TouchID authentication. Installation PasscodeLock requires Swift 2.0 and Xcode 7 Car

An iOS passcode lock with TouchID authentication written in Swift.
An iOS passcode lock with TouchID authentication written in Swift.

PasscodeLock A Swift implementation of passcode lock for iOS with TouchID authentication. Originally created by @yankodimitrov, hope you're doing well

Handles some of the base configuration to make creating a UIAlertController with text entry even easier. Plus validation!
Handles some of the base configuration to make creating a UIAlertController with text entry even easier. Plus validation!

🍅 FancyTextEntryController A simpler/easier API for adding text fields to UIAlertControllers. Not a custom view, just uses good ol' UIAlertController

An app that simplifies attendance entry, and uploads recorded attendance to a centralized Google Sheet.
An app that simplifies attendance entry, and uploads recorded attendance to a centralized Google Sheet.

NHSAttendance NHSAttendance is an app that simplifies attendance entry, and uploads recorded attendance to a centralized Google Sheet. This allows for

Google Places address entry for iOS (Swift)
Google Places address entry for iOS (Swift)

GooglePlacesAutocomplete A simple Google Places API autocompleting address entry view for iOS devices. There are already a couple of solutions out the

List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.
List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.

CAROUSEL List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center. We speci

A low-maintenance, simple framework for a snapshot testing, which takes into account a snapshot difference factor (must have if you're using CI).
A low-maintenance, simple framework for a snapshot testing, which takes into account a snapshot difference factor (must have if you're using CI).

CornSnapshotTesting A low-maintenance, simple framework for a snapshot testing, which takes into account a snapshot difference factor (must have if yo

iOS 14 checkra1n-jailbreak-targeted passcode interposition

lockdown I can't remember if this version (involving ksecured) is actually functioning, Started working on this right before I moved, haven't really w

A library for make a beautiful Passcode Lock View
A library for make a beautiful Passcode Lock View

SmileLock A library for make a beautiful Passcode Lock View, also support Touch ID. Requirements iOS 9.0+ Swift 4 (pod version 3.x), Swift 3 (pod vers

iOS 7 style Passcode Lock
iOS 7 style Passcode Lock

LTHPasscodeViewController Simple to use iOS 7 style Passcode - the one you get in Settings when changing your passcode. How to use Drag the contents o

A modal passcode input and validation view controller for iOS
A modal passcode input and validation view controller for iOS

TOPasscodeViewController A modal passcode input and validation view controller for iOS. TOPasscodeViewController is an open-source UIViewController su

An offline random passcode generator.

Passcode-Generator An offline random passcode generator. Usage Generates random passcode. Install Files and source code could be found in releases. Pr

A modal passcode input and validation view controller for iOS
A modal passcode input and validation view controller for iOS

TOPasscodeViewController A modal passcode input and validation view controller for iOS. TOPasscodeViewController is an open-source UIViewController su

Completed Project for Authentication in SwiftUI using Firebase Auth SDK & Sign in with Apple
Completed Project for Authentication in SwiftUI using Firebase Auth SDK & Sign in with Apple

Completed Project for Authentication in SwiftUI using Firebase Auth SDK & Sign in with Apple Follow the tutorial at alfianlosari.com Features Uses Fir

Owner
Darren Ford
Darren Ford
Handles some of the base configuration to make creating a UIAlertController with text entry even easier. Plus validation!

?? FancyTextEntryController A simpler/easier API for adding text fields to UIAlertControllers. Not a custom view, just uses good ol' UIAlertController

Christian Selig 22 Jul 18, 2022
AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

Abdelrhman Kamal 79 Jan 3, 2023
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.

SkyFloatingLabelTextField SkyFloatingLabelTextField is a beautiful, flexible and customizable implementation of the space saving "Float Label Pattern"

Skyscanner 4k Jan 1, 2023
A SwiftUI TextField with a prompt (or placeholder) that floats above the text field when active or not empty. Requires iOS 15.

FloatingPromptTextField A prompt is the label in a text field that informs the user about the kind of content the text field expects. In a default Tex

Emilio Peláez 43 Nov 3, 2022
Focus text field in SwiftUI dynamically and progress through form using iOS keyboard.

Focuser Focuser allows to focus SwiftUI text fields dynamically and implements ability move go through the form using Keyboard for iOS 13 and iOS 14.

Art Technologies 118 Dec 25, 2022
Autocomplete for a text field in SwiftUI using async/await

Autocomplete for a text field in SwiftUI using async/await

Dmytro Anokhin 13 Oct 21, 2022
Currency text field formatter available for UIKit and SwiftUI 💶✏️

CurrencyText provides lightweight libraries for formating text field text as currency, available for both UIKit and SwiftUI. Its main core, the Curren

Felipe Lefèvre Marino 183 Dec 15, 2022
Easy-to-use token field that is used in the Venmo app.

VENTokenField VENTokenField is the recipients token field that is used in the Venmo compose screen. Installation The easiest way to get started is to

Venmo 797 Dec 6, 2022
Floating-textfield-swiftui - Floating textfield swiftui: Floating field with multiple icons

floating_textfield-swiftui Hey, Guys welcome to this tutorial. In this complete

Patrick 0 Jan 2, 2022
FreeOTP is a two-factor authentication application for systems utilizing one-time password protocols

FreeOTP FreeOTP is a two-factor authentication application for systems utilizing one-time password protocols. Tokens can be added easily by scanning a

FreeOTP 551 Dec 28, 2022