mirror of https://github.com/oxen-io/session-ios
Implement display name screen redesign
Niels Andriesse
5 years ago
parent
0c6c07cbfd
commit
99ce25ff6b
@ -1,77 +0,0 @@
|
|||||||
|
|
||||||
final class DisplayNameVC : OnboardingBaseViewController {
|
|
||||||
|
|
||||||
private lazy var userNameTextField: UITextField = {
|
|
||||||
let result = UITextField()
|
|
||||||
result.textColor = Theme.primaryColor
|
|
||||||
result.font = .ows_dynamicTypeBodyClamped
|
|
||||||
result.textAlignment = .center
|
|
||||||
let placeholder = NSMutableAttributedString(string: NSLocalizedString("Display Name", comment: ""))
|
|
||||||
placeholder.addAttribute(.foregroundColor, value: Theme.placeholderColor, range: NSRange(location: 0, length: placeholder.length))
|
|
||||||
result.attributedPlaceholder = placeholder
|
|
||||||
result.tintColor = .lokiGreen()
|
|
||||||
result.accessibilityIdentifier = "onboarding.accountDetailsStep.userNameTextField"
|
|
||||||
result.keyboardAppearance = .dark
|
|
||||||
return result
|
|
||||||
}()
|
|
||||||
|
|
||||||
override func viewDidLoad() {
|
|
||||||
super.viewDidLoad()
|
|
||||||
view.backgroundColor = Theme.backgroundColor
|
|
||||||
view.layoutMargins = .zero
|
|
||||||
let titleLabel = self.createTitleLabel(text: NSLocalizedString("Create Your Loki Messenger Account", comment: ""))
|
|
||||||
titleLabel.accessibilityIdentifier = "onboarding.accountDetailsStep.titleLabel"
|
|
||||||
let topSpacer = UIView.vStretchingSpacer()
|
|
||||||
let displayNameLabel = createExplanationLabel(text: NSLocalizedString("Enter a name to be shown to your contacts", comment: ""))
|
|
||||||
displayNameLabel.accessibilityIdentifier = "onboarding.accountDetailsStep.displayNameLabel"
|
|
||||||
let bottomSpacer = UIView.vStretchingSpacer()
|
|
||||||
let nextButton = createButton(title: NSLocalizedString("Next", comment: ""), selector: #selector(handleNextButtonPressed))
|
|
||||||
nextButton.accessibilityIdentifier = "onboarding.accountDetailsStep.nextButton"
|
|
||||||
let stackView = UIStackView(arrangedSubviews: [
|
|
||||||
titleLabel,
|
|
||||||
topSpacer,
|
|
||||||
displayNameLabel,
|
|
||||||
UIView.spacer(withHeight: 8),
|
|
||||||
userNameTextField,
|
|
||||||
bottomSpacer,
|
|
||||||
nextButton
|
|
||||||
])
|
|
||||||
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)
|
|
||||||
topSpacer.autoMatch(.height, to: .height, of: bottomSpacer)
|
|
||||||
Analytics.shared.track("Display Name Screen Viewed")
|
|
||||||
}
|
|
||||||
|
|
||||||
override func viewDidAppear(_ animated: Bool) {
|
|
||||||
super.viewDidAppear(animated)
|
|
||||||
userNameTextField.becomeFirstResponder()
|
|
||||||
}
|
|
||||||
|
|
||||||
@objc private func handleNextButtonPressed() {
|
|
||||||
let displayName = userNameTextField.text!.ows_stripped()
|
|
||||||
guard !displayName.isEmpty else {
|
|
||||||
return OWSAlerts.showErrorAlert(message: NSLocalizedString("Please pick a display name", comment: ""))
|
|
||||||
}
|
|
||||||
guard displayName.allSatisfy({ "0"..."9" ~= $0 || "a"..."z" ~= $0 || "A"..."Z" ~= $0 || $0 == "_" || $0 == " " }) else {
|
|
||||||
return OWSAlerts.showErrorAlert(message: NSLocalizedString("Please pick a display name that consists of only a-z, A-Z, 0-9 and _ characters", comment: ""))
|
|
||||||
}
|
|
||||||
guard !OWSProfileManager.shared().isProfileNameTooLong(displayName) else {
|
|
||||||
return OWSAlerts.showErrorAlert(message: NSLocalizedString("Please pick a shorter display name", comment: ""))
|
|
||||||
}
|
|
||||||
TSAccountManager.sharedInstance().didRegister()
|
|
||||||
UserDefaults.standard.set(true, forKey: "didUpdateForMainnet")
|
|
||||||
onboardingController.verificationDidComplete(fromView: self)
|
|
||||||
let appDelegate = UIApplication.shared.delegate as! AppDelegate
|
|
||||||
appDelegate.setUpDefaultPublicChatsIfNeeded()
|
|
||||||
appDelegate.createRSSFeedsIfNeeded()
|
|
||||||
LokiPublicChatManager.shared.startPollersIfNeeded()
|
|
||||||
appDelegate.startRSSFeedPollersIfNeeded()
|
|
||||||
OWSProfileManager.shared().updateLocalProfileName(displayName, avatarImage: nil, success: { }, failure: { }) // Try to save the user name but ignore the result
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,163 @@
|
|||||||
|
|
||||||
|
final class DisplayNameVC : UIViewController {
|
||||||
|
private var spacer1HeightConstraint: NSLayoutConstraint!
|
||||||
|
private var spacer2HeightConstraint: NSLayoutConstraint!
|
||||||
|
private var registerButtonBottomOffsetConstraint: NSLayoutConstraint!
|
||||||
|
private var bottomConstraint: NSLayoutConstraint!
|
||||||
|
|
||||||
|
// MARK: Components
|
||||||
|
private lazy var displayNameTextField: TextField = {
|
||||||
|
let result = TextField(placeholder: NSLocalizedString("Enter a display name", comment: ""))
|
||||||
|
result.layer.borderColor = Colors.text.cgColor
|
||||||
|
return result
|
||||||
|
}()
|
||||||
|
|
||||||
|
// MARK: Settings
|
||||||
|
override var preferredStatusBarStyle: UIStatusBarStyle { return .lightContent }
|
||||||
|
|
||||||
|
// MARK: Lifecycle
|
||||||
|
override func viewDidLoad() {
|
||||||
|
// Set gradient background
|
||||||
|
view.backgroundColor = .clear
|
||||||
|
let gradient = Gradients.defaultLokiBackground
|
||||||
|
view.setGradient(gradient)
|
||||||
|
// Set up navigation bar
|
||||||
|
let navigationBar = navigationController!.navigationBar
|
||||||
|
navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
|
||||||
|
navigationBar.shadowImage = UIImage()
|
||||||
|
navigationBar.isTranslucent = false
|
||||||
|
navigationBar.barTintColor = Colors.navigationBarBackground
|
||||||
|
// Set up logo image view
|
||||||
|
let logoImageView = UIImageView()
|
||||||
|
logoImageView.image = #imageLiteral(resourceName: "Loki")
|
||||||
|
logoImageView.contentMode = .scaleAspectFit
|
||||||
|
logoImageView.set(.width, to: 32)
|
||||||
|
logoImageView.set(.height, to: 32)
|
||||||
|
navigationItem.titleView = logoImageView
|
||||||
|
// Set up title label
|
||||||
|
let titleLabel = UILabel()
|
||||||
|
titleLabel.textColor = Colors.text
|
||||||
|
titleLabel.font = .boldSystemFont(ofSize: Values.veryLargeFontSize)
|
||||||
|
titleLabel.text = NSLocalizedString("Pick your public display name", comment: "")
|
||||||
|
titleLabel.numberOfLines = 0
|
||||||
|
titleLabel.lineBreakMode = .byWordWrapping
|
||||||
|
// Set up explanation label
|
||||||
|
let explanationLabel = UILabel()
|
||||||
|
explanationLabel.textColor = Colors.text
|
||||||
|
explanationLabel.font = .systemFont(ofSize: Values.smallFontSize)
|
||||||
|
explanationLabel.text = "explanation explanation explanation explanation explanation explanation explanation explanation explanation explanation explanation explanation explanation explanation explanation explanation"
|
||||||
|
explanationLabel.numberOfLines = 0
|
||||||
|
explanationLabel.lineBreakMode = .byWordWrapping
|
||||||
|
// Set up spacers
|
||||||
|
let topSpacer = UIView.vStretchingSpacer()
|
||||||
|
let spacer1 = UIView()
|
||||||
|
spacer1HeightConstraint = spacer1.set(.height, to: Values.veryLargeSpacing)
|
||||||
|
let spacer2 = UIView()
|
||||||
|
spacer2HeightConstraint = spacer2.set(.height, to: Values.veryLargeSpacing)
|
||||||
|
let bottomSpacer = UIView.vStretchingSpacer()
|
||||||
|
let registerButtonBottomOffsetSpacer = UIView()
|
||||||
|
registerButtonBottomOffsetConstraint = registerButtonBottomOffsetSpacer.set(.height, to: Values.onboardingButtonBottomOffset)
|
||||||
|
// Set up register button
|
||||||
|
let registerButton = Button(style: .prominentFilled, size: .large)
|
||||||
|
registerButton.setTitle(NSLocalizedString("Continue", comment: ""), for: UIControl.State.normal)
|
||||||
|
registerButton.titleLabel!.font = .boldSystemFont(ofSize: Values.mediumFontSize)
|
||||||
|
registerButton.addTarget(self, action: #selector(register), for: UIControl.Event.touchUpInside)
|
||||||
|
// Set up register button container
|
||||||
|
let registerButtonContainer = UIView()
|
||||||
|
registerButtonContainer.addSubview(registerButton)
|
||||||
|
registerButton.pin(.leading, to: .leading, of: registerButtonContainer, withInset: Values.massiveSpacing)
|
||||||
|
registerButton.pin(.top, to: .top, of: registerButtonContainer)
|
||||||
|
registerButtonContainer.pin(.trailing, to: .trailing, of: registerButton, withInset: Values.massiveSpacing)
|
||||||
|
registerButtonContainer.pin(.bottom, to: .bottom, of: registerButton)
|
||||||
|
// Set up top stack view
|
||||||
|
let topStackView = UIStackView(arrangedSubviews: [ titleLabel, spacer1, explanationLabel, spacer2, displayNameTextField ])
|
||||||
|
topStackView.axis = .vertical
|
||||||
|
topStackView.alignment = .fill
|
||||||
|
// Set up top stack view container
|
||||||
|
let topStackViewContainer = UIView()
|
||||||
|
topStackViewContainer.addSubview(topStackView)
|
||||||
|
topStackView.pin(.leading, to: .leading, of: topStackViewContainer, withInset: Values.veryLargeSpacing)
|
||||||
|
topStackView.pin(.top, to: .top, of: topStackViewContainer)
|
||||||
|
topStackViewContainer.pin(.trailing, to: .trailing, of: topStackView, withInset: Values.veryLargeSpacing)
|
||||||
|
topStackViewContainer.pin(.bottom, to: .bottom, of: topStackView)
|
||||||
|
// Set up main stack view
|
||||||
|
let mainStackView = UIStackView(arrangedSubviews: [ topSpacer, topStackViewContainer, bottomSpacer, registerButtonContainer, registerButtonBottomOffsetSpacer ])
|
||||||
|
mainStackView.axis = .vertical
|
||||||
|
mainStackView.alignment = .fill
|
||||||
|
view.addSubview(mainStackView)
|
||||||
|
mainStackView.pin(.leading, to: .leading, of: view)
|
||||||
|
mainStackView.pin(.top, to: .top, of: view)
|
||||||
|
mainStackView.pin(.trailing, to: .trailing, of: view)
|
||||||
|
bottomConstraint = mainStackView.pin(.bottom, to: .bottom, of: view)
|
||||||
|
topSpacer.heightAnchor.constraint(equalTo: bottomSpacer.heightAnchor, multiplier: 1).isActive = true
|
||||||
|
// Dismiss keyboard on tap
|
||||||
|
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
|
||||||
|
view.addGestureRecognizer(tapGestureRecognizer)
|
||||||
|
// Listen to keyboard notifications
|
||||||
|
let notificationCenter = NotificationCenter.default
|
||||||
|
notificationCenter.addObserver(self, selector: #selector(handleKeyboardWillChangeFrameNotification(_:)), name: UIResponder.keyboardWillChangeFrameNotification, object: nil)
|
||||||
|
notificationCenter.addObserver(self, selector: #selector(handleKeyboardWillHideNotification(_:)), name: UIResponder.keyboardWillHideNotification, object: nil)
|
||||||
|
}
|
||||||
|
|
||||||
|
override func viewDidAppear(_ animated: Bool) {
|
||||||
|
super.viewDidAppear(animated)
|
||||||
|
displayNameTextField.becomeFirstResponder()
|
||||||
|
}
|
||||||
|
|
||||||
|
deinit {
|
||||||
|
NotificationCenter.default.removeObserver(self)
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: General
|
||||||
|
@objc private func dismissKeyboard() {
|
||||||
|
displayNameTextField.resignFirstResponder()
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: Updating
|
||||||
|
@objc private func handleKeyboardWillChangeFrameNotification(_ notification: Notification) {
|
||||||
|
guard let newHeight = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue.size.height else { return }
|
||||||
|
bottomConstraint.constant = -newHeight // Negative due to how the constraint is set up
|
||||||
|
registerButtonBottomOffsetConstraint.constant = Values.largeSpacing
|
||||||
|
spacer1HeightConstraint.constant = Values.mediumSpacing
|
||||||
|
spacer2HeightConstraint.constant = Values.mediumSpacing
|
||||||
|
UIView.animate(withDuration: 0.25) {
|
||||||
|
self.view.layoutIfNeeded()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@objc private func handleKeyboardWillHideNotification(_ notification: Notification) {
|
||||||
|
bottomConstraint.constant = 0
|
||||||
|
registerButtonBottomOffsetConstraint.constant = Values.onboardingButtonBottomOffset
|
||||||
|
spacer1HeightConstraint.constant = Values.veryLargeSpacing
|
||||||
|
spacer2HeightConstraint.constant = Values.veryLargeSpacing
|
||||||
|
UIView.animate(withDuration: 0.25) {
|
||||||
|
self.view.layoutIfNeeded()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: Interaction
|
||||||
|
@objc private func register() {
|
||||||
|
func showError(title: String, message: String = "") {
|
||||||
|
let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
|
||||||
|
alert.addAction(UIAlertAction(title: NSLocalizedString("OK", comment: ""), style: .default, handler: nil))
|
||||||
|
presentAlert(alert)
|
||||||
|
}
|
||||||
|
let displayName = displayNameTextField.text!.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
|
||||||
|
guard !displayName.isEmpty else {
|
||||||
|
return showError(title: NSLocalizedString("Please pick a display name", comment: ""))
|
||||||
|
}
|
||||||
|
let allowedCharacters = CharacterSet(charactersIn: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_ ")
|
||||||
|
let hasInvalidCharacters = !displayName.allSatisfy { $0.unicodeScalars.allSatisfy { allowedCharacters.contains($0) } }
|
||||||
|
guard !hasInvalidCharacters else {
|
||||||
|
return showError(title: NSLocalizedString("Please pick a display name that consists of only a-z, A-Z, 0-9 and _ characters", comment: ""))
|
||||||
|
}
|
||||||
|
guard !OWSProfileManager.shared().isProfileNameTooLong(displayName) else {
|
||||||
|
return showError(title: NSLocalizedString("Please pick a shorter display name", comment: ""))
|
||||||
|
}
|
||||||
|
TSAccountManager.sharedInstance().didRegister()
|
||||||
|
UserDefaults.standard.set(true, forKey: "didUpdateForMainnet")
|
||||||
|
OWSProfileManager.shared().updateLocalProfileName("User", avatarImage: nil, success: { }, failure: { }) // Try to save the user name but ignore the result
|
||||||
|
let homeVC = HomeVC()
|
||||||
|
navigationController!.setViewControllers([ homeVC ], animated: true)
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue