mirror of https://github.com/oxen-io/session-ios
Merge branch 'charlesmchen/onboardingVerification'
Matthew Chen
6 years ago
commit
260d3253ff
@ -0,0 +1,474 @@
|
||||
//
|
||||
// Copyright (c) 2019 Open Whisper Systems. All rights reserved.
|
||||
//
|
||||
|
||||
import UIKit
|
||||
import PromiseKit
|
||||
|
||||
private protocol OnboardingCodeViewTextFieldDelegate {
|
||||
func textFieldDidDeletePrevious()
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
// Editing a code should feel seamless, as even though
|
||||
// the UITextField only lets you edit a single digit at
|
||||
// a time. For deletes to work properly, we need to
|
||||
// detect delete events that would affect the _previous_
|
||||
// digit.
|
||||
private class OnboardingCodeViewTextField: UITextField {
|
||||
|
||||
fileprivate var codeDelegate: OnboardingCodeViewTextFieldDelegate?
|
||||
|
||||
override func deleteBackward() {
|
||||
var isDeletePrevious = false
|
||||
if let selectedTextRange = selectedTextRange {
|
||||
let cursorPosition = offset(from: beginningOfDocument, to: selectedTextRange.start)
|
||||
if cursorPosition == 0 {
|
||||
isDeletePrevious = true
|
||||
}
|
||||
}
|
||||
|
||||
super.deleteBackward()
|
||||
|
||||
if isDeletePrevious {
|
||||
codeDelegate?.textFieldDidDeletePrevious()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
protocol OnboardingCodeViewDelegate {
|
||||
func codeViewDidChange()
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
// The OnboardingCodeView is a special "verification code"
|
||||
// editor that should feel like editing a single piece
|
||||
// of text (ala UITextField) even though the individual
|
||||
// digits of the code are visually separated.
|
||||
//
|
||||
// We use a separate UILabel for each digit, and move
|
||||
// around a single UITextfield to let the user edit the
|
||||
// last/next digit.
|
||||
private class OnboardingCodeView: UIView {
|
||||
|
||||
var delegate: OnboardingCodeViewDelegate?
|
||||
|
||||
public init() {
|
||||
super.init(frame: .zero)
|
||||
|
||||
createSubviews()
|
||||
|
||||
updateViewState()
|
||||
}
|
||||
|
||||
required init?(coder aDecoder: NSCoder) {
|
||||
fatalError("init(coder:) has not been implemented")
|
||||
}
|
||||
|
||||
private let digitCount = 6
|
||||
private var digitLabels = [UILabel]()
|
||||
|
||||
// We use a single text field to edit the "current" digit.
|
||||
// The "current" digit is usually the "last"
|
||||
fileprivate let textfield = OnboardingCodeViewTextField()
|
||||
private var currentDigitIndex = 0
|
||||
private var textfieldConstraints = [NSLayoutConstraint]()
|
||||
|
||||
// The current complete text - the "model" for this view.
|
||||
private var digitText = ""
|
||||
|
||||
var isComplete: Bool {
|
||||
return digitText.count == digitCount
|
||||
}
|
||||
var verificationCode: String {
|
||||
return digitText
|
||||
}
|
||||
|
||||
private func createSubviews() {
|
||||
textfield.textAlignment = .left
|
||||
textfield.delegate = self
|
||||
textfield.keyboardType = .numberPad
|
||||
textfield.textColor = Theme.primaryColor
|
||||
textfield.font = UIFont.ows_dynamicTypeLargeTitle1Clamped
|
||||
textfield.codeDelegate = self
|
||||
|
||||
var digitViews = [UIView]()
|
||||
(0..<digitCount).forEach { (_) in
|
||||
let (digitView, digitLabel) = makeCellView(text: "", hasStroke: true)
|
||||
|
||||
digitLabels.append(digitLabel)
|
||||
digitViews.append(digitView)
|
||||
}
|
||||
|
||||
let (hyphenView, _) = makeCellView(text: "-", hasStroke: false)
|
||||
|
||||
digitViews.insert(hyphenView, at: 3)
|
||||
|
||||
let stackView = UIStackView(arrangedSubviews: digitViews)
|
||||
stackView.axis = .horizontal
|
||||
stackView.alignment = .center
|
||||
stackView.spacing = 8
|
||||
addSubview(stackView)
|
||||
stackView.autoPinHeightToSuperview()
|
||||
stackView.autoHCenterInSuperview()
|
||||
|
||||
self.addSubview(textfield)
|
||||
}
|
||||
|
||||
private func makeCellView(text: String, hasStroke: Bool) -> (UIView, UILabel) {
|
||||
let digitView = UIView()
|
||||
|
||||
let digitLabel = UILabel()
|
||||
digitLabel.text = text
|
||||
digitLabel.font = UIFont.ows_dynamicTypeLargeTitle1Clamped
|
||||
digitLabel.textColor = Theme.primaryColor
|
||||
digitLabel.textAlignment = .center
|
||||
digitView.addSubview(digitLabel)
|
||||
digitLabel.autoCenterInSuperview()
|
||||
|
||||
if hasStroke {
|
||||
let strokeView = UIView.container()
|
||||
strokeView.backgroundColor = Theme.primaryColor
|
||||
digitView.addSubview(strokeView)
|
||||
strokeView.autoPinWidthToSuperview()
|
||||
strokeView.autoPinEdge(toSuperviewEdge: .bottom)
|
||||
strokeView.autoSetDimension(.height, toSize: 1)
|
||||
}
|
||||
|
||||
let vMargin: CGFloat = 4
|
||||
let cellHeight: CGFloat = digitLabel.font.lineHeight + vMargin * 2
|
||||
let cellWidth: CGFloat = cellHeight * 2 / 3
|
||||
digitView.autoSetDimensions(to: CGSize(width: cellWidth, height: cellHeight))
|
||||
|
||||
return (digitView, digitLabel)
|
||||
}
|
||||
|
||||
private func digit(at index: Int) -> String {
|
||||
guard index < digitText.count else {
|
||||
return ""
|
||||
}
|
||||
return digitText.substring(from: index).substring(to: 1)
|
||||
}
|
||||
|
||||
// Ensure that all labels are displaying the correct
|
||||
// digit (if any) and that the UITextField has replaced
|
||||
// the "current" digit.
|
||||
private func updateViewState() {
|
||||
currentDigitIndex = min(digitCount - 1,
|
||||
digitText.count)
|
||||
|
||||
(0..<digitCount).forEach { (index) in
|
||||
let digitLabel = digitLabels[index]
|
||||
digitLabel.text = digit(at: index)
|
||||
digitLabel.isHidden = index == currentDigitIndex
|
||||
}
|
||||
|
||||
NSLayoutConstraint.deactivate(textfieldConstraints)
|
||||
textfieldConstraints.removeAll()
|
||||
|
||||
let digitLabelToReplace = digitLabels[currentDigitIndex]
|
||||
textfield.text = digit(at: currentDigitIndex)
|
||||
textfieldConstraints.append(textfield.autoAlignAxis(.horizontal, toSameAxisOf: digitLabelToReplace))
|
||||
textfieldConstraints.append(textfield.autoAlignAxis(.vertical, toSameAxisOf: digitLabelToReplace))
|
||||
|
||||
// Move cursor to end of text.
|
||||
let newPosition = textfield.endOfDocument
|
||||
textfield.selectedTextRange = textfield.textRange(from: newPosition, to: newPosition)
|
||||
}
|
||||
|
||||
public override func becomeFirstResponder() -> Bool {
|
||||
return textfield.becomeFirstResponder()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
extension OnboardingCodeView: UITextFieldDelegate {
|
||||
public func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString newString: String) -> Bool {
|
||||
var oldText = ""
|
||||
if let textFieldText = textField.text {
|
||||
oldText = textFieldText
|
||||
}
|
||||
let left = oldText.substring(to: range.location)
|
||||
let right = oldText.substring(from: range.location + range.length)
|
||||
let unfiltered = left + newString + right
|
||||
let characterSet = CharacterSet(charactersIn: "0123456789")
|
||||
let filtered = unfiltered.components(separatedBy: characterSet.inverted).joined()
|
||||
let filteredAndTrimmed = filtered.substring(to: 1)
|
||||
textField.text = filteredAndTrimmed
|
||||
|
||||
digitText = digitText.substring(to: currentDigitIndex) + filteredAndTrimmed
|
||||
|
||||
updateViewState()
|
||||
|
||||
self.delegate?.codeViewDidChange()
|
||||
|
||||
// Inform our caller that we took care of performing the change.
|
||||
return false
|
||||
}
|
||||
|
||||
public func textFieldShouldReturn(_ textField: UITextField) -> Bool {
|
||||
self.delegate?.codeViewDidChange()
|
||||
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
extension OnboardingCodeView: OnboardingCodeViewTextFieldDelegate {
|
||||
public func textFieldDidDeletePrevious() {
|
||||
guard digitText.count > 0 else {
|
||||
return
|
||||
}
|
||||
digitText = digitText.substring(to: currentDigitIndex - 1)
|
||||
|
||||
updateViewState()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
@objc
|
||||
public class OnboardingVerificationViewController: OnboardingBaseViewController {
|
||||
|
||||
private enum CodeState {
|
||||
case sent
|
||||
case readyForResend
|
||||
case resent
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
private var codeState = CodeState.sent
|
||||
|
||||
private var titleLabel: UILabel?
|
||||
private let phoneNumberTextField = UITextField()
|
||||
private let onboardingCodeView = OnboardingCodeView()
|
||||
private var codeStateLink: OWSFlatButton?
|
||||
|
||||
override public func loadView() {
|
||||
super.loadView()
|
||||
|
||||
view.backgroundColor = Theme.backgroundColor
|
||||
view.layoutMargins = .zero
|
||||
|
||||
let titleLabel = self.titleLabel(text: "")
|
||||
self.titleLabel = titleLabel
|
||||
|
||||
let backLink = self.linkButton(title: NSLocalizedString("ONBOARDING_VERIFICATION_BACK_LINK",
|
||||
comment: "Label for the link that lets users change their phone number."),
|
||||
selector: #selector(backLinkTapped))
|
||||
|
||||
onboardingCodeView.delegate = self
|
||||
|
||||
let codeStateLink = self.linkButton(title: "",
|
||||
selector: #selector(resendCodeLinkTapped))
|
||||
codeStateLink.enableMultilineLabel()
|
||||
self.codeStateLink = codeStateLink
|
||||
|
||||
let topSpacer = UIView.vStretchingSpacer()
|
||||
let bottomSpacer = UIView.vStretchingSpacer()
|
||||
|
||||
let stackView = UIStackView(arrangedSubviews: [
|
||||
titleLabel,
|
||||
UIView.spacer(withHeight: 12),
|
||||
backLink,
|
||||
topSpacer,
|
||||
onboardingCodeView,
|
||||
bottomSpacer,
|
||||
codeStateLink
|
||||
])
|
||||
stackView.axis = .vertical
|
||||
stackView.alignment = .fill
|
||||
stackView.layoutMargins = UIEdgeInsets(top: 32, left: 32, bottom: 32, right: 32)
|
||||
stackView.isLayoutMarginsRelativeArrangement = true
|
||||
view.addSubview(stackView)
|
||||
stackView.autoPinWidthToSuperview()
|
||||
stackView.autoPin(toTopLayoutGuideOf: self, withInset: 0)
|
||||
autoPinView(toBottomOfViewControllerOrKeyboard: stackView, avoidNotch: true)
|
||||
|
||||
// Ensure whitespace is balanced, so inputs are vertically centered.
|
||||
topSpacer.autoMatch(.height, to: .height, of: bottomSpacer)
|
||||
|
||||
startCodeCountdown()
|
||||
|
||||
updateCodeState()
|
||||
}
|
||||
|
||||
// MARK: - Code State
|
||||
|
||||
private let countdownDuration: TimeInterval = 60
|
||||
private var codeCountdownTimer: Timer?
|
||||
private var codeCountdownStart: NSDate?
|
||||
|
||||
deinit {
|
||||
codeCountdownTimer?.invalidate()
|
||||
}
|
||||
|
||||
private func startCodeCountdown() {
|
||||
codeCountdownStart = NSDate()
|
||||
codeCountdownTimer = Timer.weakScheduledTimer(withTimeInterval: 0.25, target: self, selector: #selector(codeCountdownTimerFired), userInfo: nil, repeats: true)
|
||||
}
|
||||
|
||||
@objc
|
||||
public func codeCountdownTimerFired() {
|
||||
guard let codeCountdownStart = codeCountdownStart else {
|
||||
owsFailDebug("Missing codeCountdownStart.")
|
||||
return
|
||||
}
|
||||
guard let codeCountdownTimer = codeCountdownTimer else {
|
||||
owsFailDebug("Missing codeCountdownTimer.")
|
||||
return
|
||||
}
|
||||
|
||||
let countdownInterval = abs(codeCountdownStart.timeIntervalSinceNow)
|
||||
|
||||
guard countdownInterval < countdownDuration else {
|
||||
// Countdown complete.
|
||||
codeCountdownTimer.invalidate()
|
||||
self.codeCountdownTimer = nil
|
||||
|
||||
if codeState != .sent {
|
||||
owsFailDebug("Unexpected codeState: \(codeState)")
|
||||
}
|
||||
codeState = .readyForResend
|
||||
updateCodeState()
|
||||
return
|
||||
}
|
||||
|
||||
// Update the "code state" UI to reflect the countdown.
|
||||
updateCodeState()
|
||||
}
|
||||
|
||||
private func updateCodeState() {
|
||||
AssertIsOnMainThread()
|
||||
|
||||
guard let codeCountdownStart = codeCountdownStart else {
|
||||
owsFailDebug("Missing codeCountdownStart.")
|
||||
return
|
||||
}
|
||||
guard let titleLabel = titleLabel else {
|
||||
owsFailDebug("Missing titleLabel.")
|
||||
return
|
||||
}
|
||||
guard let codeStateLink = codeStateLink else {
|
||||
owsFailDebug("Missing codeStateLink.")
|
||||
return
|
||||
}
|
||||
|
||||
var e164PhoneNumber = ""
|
||||
if let phoneNumber = onboardingController.phoneNumber {
|
||||
e164PhoneNumber = phoneNumber.e164
|
||||
}
|
||||
let formattedPhoneNumber = PhoneNumber.bestEffortLocalizedPhoneNumber(withE164: e164PhoneNumber)
|
||||
|
||||
// Update titleLabel
|
||||
switch codeState {
|
||||
case .sent, .readyForResend:
|
||||
titleLabel.text = String(format: NSLocalizedString("ONBOARDING_VERIFICATION_TITLE_DEFAULT_FORMAT",
|
||||
comment: "Format for the title of the 'onboarding verification' view. Embeds {{the user's phone number}}."),
|
||||
formattedPhoneNumber)
|
||||
case .resent:
|
||||
titleLabel.text = String(format: NSLocalizedString("ONBOARDING_VERIFICATION_TITLE_RESENT_FORMAT",
|
||||
comment: "Format for the title of the 'onboarding verification' view after the verification code has been resent. Embeds {{the user's phone number}}."),
|
||||
formattedPhoneNumber)
|
||||
}
|
||||
|
||||
// Update codeStateLink
|
||||
switch codeState {
|
||||
case .sent:
|
||||
let countdownInterval = abs(codeCountdownStart.timeIntervalSinceNow)
|
||||
let countdownRemaining = max(0, countdownDuration - countdownInterval)
|
||||
let formattedCountdown = OWSFormat.formatDurationSeconds(Int(round(countdownRemaining)))
|
||||
let text = String(format: NSLocalizedString("ONBOARDING_VERIFICATION_CODE_COUNTDOWN_FORMAT",
|
||||
comment: "Format for the label of the 'sent code' label of the 'onboarding verification' view. Embeds {{the time until the code can be resent}}."),
|
||||
formattedCountdown)
|
||||
codeStateLink.setTitle(title: text, font: .ows_dynamicTypeBodyClamped, titleColor: Theme.secondaryColor)
|
||||
case .readyForResend:
|
||||
codeStateLink.setTitle(title: NSLocalizedString("ONBOARDING_VERIFICATION_ORIGINAL_CODE_MISSING_LINK",
|
||||
comment: "Label for link that can be used when the original code did not arrive."),
|
||||
font: .ows_dynamicTypeBodyClamped,
|
||||
titleColor: .ows_materialBlue)
|
||||
case .resent:
|
||||
codeStateLink.setTitle(title: NSLocalizedString("ONBOARDING_VERIFICATION_RESENT_CODE_MISSING_LINK",
|
||||
comment: "Label for link that can be used when the resent code did not arrive."),
|
||||
font: .ows_dynamicTypeBodyClamped,
|
||||
titleColor: .ows_materialBlue)
|
||||
}
|
||||
}
|
||||
|
||||
public override func viewDidAppear(_ animated: Bool) {
|
||||
super.viewDidAppear(animated)
|
||||
|
||||
_ = onboardingCodeView.becomeFirstResponder()
|
||||
}
|
||||
|
||||
// MARK: - Events
|
||||
|
||||
@objc func backLinkTapped() {
|
||||
Logger.info("")
|
||||
|
||||
self.navigationController?.popViewController(animated: true)
|
||||
}
|
||||
|
||||
@objc func resendCodeLinkTapped() {
|
||||
Logger.info("")
|
||||
|
||||
switch codeState {
|
||||
case .sent:
|
||||
// Ignore taps until the countdown expires.
|
||||
break
|
||||
case .readyForResend, .resent:
|
||||
showResendActionSheet()
|
||||
}
|
||||
}
|
||||
|
||||
private func showResendActionSheet() {
|
||||
Logger.info("")
|
||||
|
||||
let actionSheet = UIAlertController(title: NSLocalizedString("ONBOARDING_VERIFICATION_RESEND_CODE_ALERT_TITLE",
|
||||
comment: "Title for the 'resend code' alert in the 'onboarding verification' view."),
|
||||
message: NSLocalizedString("ONBOARDING_VERIFICATION_RESEND_CODE_ALERT_MESSAGE",
|
||||
comment: "Message for the 'resend code' alert in the 'onboarding verification' view."),
|
||||
preferredStyle: .actionSheet)
|
||||
|
||||
actionSheet.addAction(UIAlertAction(title: NSLocalizedString("ONBOARDING_VERIFICATION_RESEND_CODE_BY_SMS_BUTTON",
|
||||
comment: "Label for the 'resend code by SMS' button in the 'onboarding verification' view."),
|
||||
style: .default) { _ in
|
||||
self.onboardingController.tryToRegister(fromViewController: self, smsVerification: true)
|
||||
})
|
||||
actionSheet.addAction(UIAlertAction(title: NSLocalizedString("ONBOARDING_VERIFICATION_RESEND_CODE_BY_VOICE_BUTTON",
|
||||
comment: "Label for the 'resend code by voice' button in the 'onboarding verification' view."),
|
||||
style: .default) { _ in
|
||||
self.onboardingController.tryToRegister(fromViewController: self, smsVerification: false)
|
||||
})
|
||||
actionSheet.addAction(OWSAlerts.cancelAction)
|
||||
|
||||
self.present(actionSheet, animated: true)
|
||||
}
|
||||
|
||||
private func tryToVerify() {
|
||||
Logger.info("")
|
||||
|
||||
guard onboardingCodeView.isComplete else {
|
||||
return
|
||||
}
|
||||
onboardingController.tryToVerify(fromViewController: self, verificationCode: onboardingCodeView.verificationCode, pin: nil)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: -
|
||||
|
||||
extension OnboardingVerificationViewController: OnboardingCodeViewDelegate {
|
||||
public func codeViewDidChange() {
|
||||
AssertIsOnMainThread()
|
||||
|
||||
tryToVerify()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue