datt1994 / dpotpview

Customisable OTP view and Passcode view

DPOTPView

Customisable OTP view and Passcode view

Installation with CocoaPods

CocoaPods is a dependency manager for Objective-C & Swift. You can install it with the following command:

$ gem install cocoapods

Podfile

To integrate DPOTPView into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'

target 'TargetName' do
use_frameworks!
pod 'DPOTPView'
end

Then, run the following command:

$ pod install

Installation with Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate DPOTPView into your Xcode project using Carthage, specify it in your Cartfile:

github "Datt1994/DPOTPView"

Run carthage to build the framework and drag the framework (DPOTPView.framework) into your Xcode project.

Note: IBDesignables and IBInspectables will not work in interface builder.

Workaround: Create IBDesignable subclass of DPOTPView, Use this subclass as custom calss in interface builder.

@IBDesignable
class OTPView : DPOTPView {}    

Installation with Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler.

To add the library as package dependency to your Xcode project, select File > Swift Packages > Add Package Dependency and enter its repository URL https://github.com/Datt1994/DPOTPView.git

Add Manually

Download Project and copy-paste DPOTPView.swift file into your project

How to use

👆Add DPOTPView to UIView Custom Class.

👆Use this properties as per your requirments.

Code

Set up through code

let txtOTPView = DPOTPView(frame: CGRect(x: (self.view.frame.width - 250)/2, y: txtDPOTPView.frame.origin.y + 50, width: 250, height: 60))
txtOTPView.count = 5
txtOTPView.spacing = 10
txtOTPView.fontTextField = UIFont(name: "HelveticaNeue-Bold", size: CGFloat(25.0))!
txtOTPView.dismissOnLastEntry = true
txtOTPView.borderColorTextField = .black
txtOTPView.selectedBorderColorTextField = .blue
txtOTPView.borderWidthTextField = 2
txtOTPView.backGroundColorTextField = .lightGray
txtOTPView.cornerRadiusTextField = 8
txtOTPView.isCursorHidden = true
//txtOTPView.isSecureTextEntry = true
//txtOTPView.isBottomLineTextField = true
//txtOTPView.isCircleTextField = true
view.addSubview(txtOTPView)

Usage

txtDPOTPView.text = "1234" // set text
print(txtDPOTPView.text ?? "") // get text
txtDPOTPView.validate() // validate all text entry
_ = txtDPOTPView.becomeFirstResponder()

Delegate Methods

extension ViewController : DPOTPViewDelegate {
   func dpOTPViewAddText(_ text: String, at position: Int) {
        print("addText:- " + text + " at:- \(position)" )
    }
    
    func dpOTPViewRemoveText(_ text: String, at position: Int) {
        print("removeText:- " + text + " at:- \(position)" )
    }
    
    func dpOTPViewChangePositionAt(_ position: Int) {
        print("at:-\(position)")
    }
    func dpOTPViewBecomeFirstResponder() {
        
    }
    func dpOTPViewResignFirstResponder() {
        
    }
}

dpotpview's Issues

The verification code auto-fill does not seem to fit

Placeholder Text

I kindly request the addition of a feature to display placeholder text in all boxes of the DPOTPView, improving the user experience and providing clearer input expectations.

Add func when user end editing

can you add this in your library , thank you
public func textFieldDidEndEditing(_ textField: UITextField) {
<#code#>
}

How to clear all of them

Not able to access DPOTPView instance

Whenever I tried to add DPOTPView instance programatically or physically, Xcode gave me an error or undeclared entity

in Arabic not working

I have created an OTP view from this pod and the application supports multiple languages when this view is in Arabic. it's causing an error, if anyone knows how to manage in the Arabic language?

Change Border Color and text Color instantly

I want to change borderColor and textColor instantly as soon user enters wrong OTP and then reset the colors. I have used these its not working. It works when user removes the character

otpView.borderColorTextField = app.theme.red
otpView.textColorTextField = app.theme.red

Autofill Support

Is this library supporting auto fill?

Keyboard type "Alphabetic" makes typing very laggy

By default keyboard type is numeric. But i want it to be alphanumeric.
When i change keyboard type as
txtOTPView.keyboardType = .default
That makes the whole typing experience very laggy and slow and glictchy.
Keyboard takes time to shift focus from 1 field to another.
This is not happening in numpad key. NumPad keybaord is working fine and speedy.
1 thing more - default keyboard makes Keyboard to Caps On on every new entry. like keyboard shift focus from 1 field to another. It makes keyboard Caps On

InputAccessoryView Support

What i have tried

I wanted to set an UIToolbar into inputAccessoryView of the keyboard. Showing a few control button. Is there any such options ?

background Gradient color

How we can add a background Gradient colour to the label?

show pin is not working when button is tapped. i used a code isSecureEntry false but not working...also tried reloadView still not working

How to update count when allow 6 digit password

How to handle Copy Paste in textfield

user copy code from message app and try to paste in field is not worked

becomeFirstResponder() crashed

I create CustomeTableViewCell and after initing wrote below:
otpView.text = ""
_ = otpView.becomeFirstResponder()

When i run project:
open override func becomeFirstResponder() -> Bool {
if isCursorHidden {
for i in 0 ..< arrTextFields.count {
if arrTextFields[i].text?.count == 0 {
_ = arrTextFields[i].becomeFirstResponder()
break
} else if (arrTextFields.count - 1) == i {
_ = arrTextFields[i].becomeFirstResponder()
break
}
}
} else {
_ = arrTextFields[0].becomeFirstResponder()
}
dpOTPViewDelegate?.dpOTPViewBecomeFirstResponder()
return super.becomeFirstResponder()
}
this part of code inside DPOTPView
_ = arrTextFields[0].becomeFirstResponder() // Thread 1: Fatal error: Index out of range (crashed)

my code :

otpView = DPOTPView(frame: CGRect(x: 20, y: 15, width: windowWidth - 40, height: height - 10))
otpView.count = 6
otpView.spacing = 10
otpView.dpOTPViewDelegate = self
otpView.fontTextField = .appFont(20, .FONT_BOLD)
otpView.dismissOnLastEntry = false
otpView.cornerRadiusTextField = 10
otpView.textColorTextField = .colorTextBlack
otpView.borderWidthTextField = 1
otpView.borderColorTextField = .colorDivider
otpView.selectedBorderColorTextField = .colorDivider
otpView.selectedBorderWidthTextField = 1
otpView.backGroundColorTextField = .colorEditBackground
self.contentView.addSubview(otpView)

Background color filled / empty text

Can we have different text fields backgrounds for filled / empty

Preventing secure code or correction on keyboard

Hi,
The secure code entered on the previous screen continues to appear above the keyboard. How can we prevent this?
Thanks.