Пользовательский OTP-представление SwiftUI, аутентификация Firebase OTP

В этой последней части мини-серии мы покажем, как создать многоразовый пакет swift, состоящий из представления OTP из части 2.

Сначала разберемся, давайте откроем XCode и создадим новый пакет. Откройте XCode и перейдите в «Файл» -> «Создать» -> «Пакет…».

Сохраните наш пакет в выбранной папке и создайте локальный репозиторий Git.

Теперь давайте добавим немного кода. Чтобы использовать этот пакет, нам нужно добавить некоторые параметры, которые позволят нам динамически использовать этот элемент управления как пакет.

Теперь давайте добавим несколько полей и конструктор.

//MARK: Fields
enum FocusField: Hashable {
    case field
}
@FocusState private var focusedField: FocusField?
@Binding var otpCode: String
var otpCodeLength: Int
var textColor: Color
var textSize: CGFloat

//MARK: Constructor
public init(otpCode: Binding<String>, otpCodeLength: Int, textColor: Color, textSize: CGFloat) {
    self._otpCode = otpCode
    self.otpCodeLength = otpCodeLength
    self.textColor = textColor
    self.textSize = textSize
}

Сначала давайте объясним наши переменные. Мы используем 4 параметра, один из которых Binding, поскольку нам нужно будет обновить свойство, в котором хранятся данные, и использовать его позже.

otpCode это наша Binding var, которая будет содержать код otp, который вводит пользователь. Мы используем его позже для аутентификации пользователя, поэтому он должен быть Binding.

otpCodeLength параметр, устанавливающий количество дефисов для исходящего кода otp.

цвет текста параметр, который задает цвет нашего текста и штрихов.

размер текста устанавливает размер текста.

Теперь давайте добавим тело нашего представления.

//MARK: Body
public var body: some View {
    HStack {
        ZStack(alignment: .center) {
            TextField("", text: $otpCode)
                .frame(width: 0, height: 0, alignment: .center)
                .font(Font.system(size: 0))
                .accentColor(.clear)
                .foregroundColor(.clear)
                .multilineTextAlignment(.center)
                .keyboardType(.numberPad)
                .onReceive(Just(otpCode)) { _ in limitText(otpCodeLength) }
                .focused($focusedField, equals: .field)
                .task {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5)
                    {
                        self.focusedField = .field
                    }
                }
                .padding()
            HStack {
                ForEach(0..<otpCodeLength) { index in
                    ZStack {
                        Text(self.getPin(at: index))
                            .font(Font.system(size: textSize))
                            .fontWeight(.semibold)
                            .foregroundColor(textColor)
                        Rectangle()
                            .frame(height: 2)
                            .foregroundColor(textColor)
                            .padding(.trailing, 5)
                            .padding(.leading, 5)
                            .opacity(self.otpCode.count <= index ? 1 : 0)
                    }
                }
            }
        }
    }
}

Как мы видим, мы использовали тот же код из части 02 нашего руководства, конечно, с определенными параметрами. Наконец, давайте добавим отсутствующие функции, которые ограничивают длину пользовательского ввода в зависимости от otpCodeLength и функцию, которая получает цифру кода otp по желаемому индексу.

//MARK: func
private func getPin(at index: Int) -> String {
    guard self.otpCode.count > index else {
        return ""
    }
    return self.otpCode[index]
}

private func limitText(_ upper: Int) {
    if otpCode.count > upper {
        otpCode = String(otpCode.prefix(upper))
    }
}

Теперь давайте создадим новый тег из нашего кода. В XCode откройте Source Control Navigator.

Затем зафиксируйте изменения нашего исходного кода. Затем коммит будет показан на правой панели. Теперь щелкните правой кнопкой мыши поздний коммит и щелкните тег. Введите желаемый номер версии и нажмите «Создать». Мы получим следующий результат.

Теперь перейдите в Source Control и выберите Push. Установите флажок «Включить теги» и нажмите «Отправить».

Теперь следующий шаг — добавить созданный пакет в наше приложение. Откройте приложение OtpView и в зависимости от пакета щелкните правой кнопкой мыши и выберите Добавить пакеты…

В поле поиска вставьте URL-адрес нашего репозитория Git.
Репозиторий GitHub

Вы можете выбрать либо ветку, либо точную версию, например 1.0.3, и нажать «Добавить пакет».

Теперь давайте обновим наш ActivateAccountView.swift. Сначала импортируйте наш новый пакет, затем измените представление codeDigits следующим образом.

import OtpView_SwiftUI

var codeDigits: some View {
      VStack {
          //...
          
          //Old code
          //OTPTextFieldView(phoneViewModel: phoneViewModel)
          //     .padding(.leading, 55)
          //     .padding(.trailing, 55)
        
          //Our package module
          OtpView_SwiftUI(otpCode: $otpCode, otpCodeLength: 6, textColor: Color.black, textSize: 15.0)
          //...
      }
      .padding(.top, 35)
  }

Вот и все, надеюсь, вам понравился этот урок, и следите за новостями.

Как всегда, код доступен в репозитории GitHub:

CustomOtpView

И индивидуальный пакет также.

Пакет GitHub