basic ui for both phone auth screens

2021-12-17 17:18:10 -08:00
parent 73e3f9c08e
commit f4eef85175
4 changed files with 150 additions and 5 deletions
@@ -7,6 +7,9 @@

 import SwiftUI
 import NavigationStack
+import Combine
+// TODO: maybe this is useless and just do my own toasts and alerts
+import PopupView

 // user can type in a phone number and then receive a text
 struct PhoneVerificationView: View {
@@ -14,6 +17,11 @@ struct PhoneVerificationView: View {
    @State var ccode = "+1"
    @EnvironmentObject private var navigationStack: NavigationStack
    
+    // Alert settings
+    @State var showToast = false
+    @State var toastText = "🇺🇸 Only U.S. supported, more countries coming soon!"
+    
+    // TODO: format the input so that it shows the parentheses and stuff (949)923-0445
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.clear
@@ -26,15 +34,27 @@ struct PhoneVerificationView: View {
                            .background(.ultraThinMaterial)
                            .clipShape(Circle())
                            .shadow(color: Color.black.opacity(0.3), radius: 20, x: 0, y: 20)
+                            .font(.subheadline)
+                            .onTapGesture {
+                                // tell people that we only support the United States
+                                self.showToast.toggle()
+                            }
                        
-                        TextField("enter phone number", text: $phoneNumber)
+                        TextField("(949) 292 - 2192", text: $phoneNumber)
                            .padding()
                            .background(.ultraThinMaterial)
                            .clipShape(Capsule())
                            .keyboardType(.decimalPad)
-                            .frame(maxWidth: .infinity)
                            .shadow(color: Color.black.opacity(0.3), radius: 20, x: 0, y: 20)
-                            .font(.caption)
+                            .font(.subheadline)
+                            .onReceive(Just(self.phoneNumber)) {newValue in
+                                let filtered = newValue.filter {
+                                    "0123456789".contains($0)
+                                }
+                                if filtered != newValue {
+                                    self.phoneNumber = filtered
+                                }
+                            }
                        
                        Spacer()
                    }
@@ -72,6 +92,17 @@ struct PhoneVerificationView: View {
                    .padding()
            }
        }
+        .popup(isPresented: self.$showToast, type: .toast, position: .bottom, autohideIn: 2) {
+            VStack {
+                Text(self.toastText)
+                    .padding()
+                    .background(.ultraThinMaterial)
+                    .cornerRadius(30)
+                    .font(.caption)
+                    .foregroundColor(Color.red)
+            }
+            .padding()
+        }
    }
 }

@@ -83,13 +114,71 @@ struct PhoneVerificationView_Previews: PreviewProvider {

 // another view for user to type in the sms code
 struct PhoneVerificationCodeView: View {
+    @EnvironmentObject private var navigationStack: NavigationStack
+    
+    @State var verificationCode = ""
+    
    var body: some View {
-        Text("Verification View")
+        ZStack(alignment: .topLeading) {
+            Color.clear
+            
+            OnboardingTemplateView(hdrText: "Let's get you verified", imgName: "undraw_my_password_d-6-kg", bottomActArea: AnyView(
+                VStack {
+                    TextField("Code", text: self.$verificationCode)
+                        .padding()
+                        .background(.ultraThinMaterial)
+                        .clipShape(Capsule())
+                        .keyboardType(.decimalPad)
+                        .shadow(color: Color.black.opacity(0.3), radius: 20, x: 0, y: 20)
+                        .font(.subheadline)
+                        .multilineTextAlignment(.center)
+                        .padding(.vertical)
+//                        .onReceive(Just(self.$verificationCode)) {newValue in
+//                            let filtered = newValue.filter {
+//                                "0123456789".contains($0)
+//                            }
+//                            if filtered != newValue {
+//                                self.$verificationCode = filtered
+//                            }
+//                        }
+                    
+                    Button {
+                        print("Verify")
+                        
+                        // do auth stuff
+                        // then async send to next page
+                        self.navigationStack.push(PhoneVerificationCodeView()) // verify code page
+                        
+                    } label: {
+                        Text("Send Verification")
+                            .bold()
+                            .foregroundColor(NirvanaColor.white)
+                            .frame(maxWidth: .infinity)
+                            .padding(.vertical, 20)
+                            .background(NirvanaColor.teal)
+                            .clipShape(Capsule())
+                            .shadow(radius:10)
+                    }
+                }
+            ))
+            
+            //back button to home
+            Button {
+                print("going back to last page")
+                
+                self.navigationStack.pop() // goes back to welcome screen
+            } label: {
+                Label("Back", systemImage: "chevron.left")
+                    .labelStyle(.iconOnly)
+                    .foregroundColor(NirvanaColor.teal)
+                    .padding()
+            }
+        }
    }
 }

 struct PhoneVerificationCodeView_Previews: PreviewProvider {
    static var previews: some View {
-        PhoneVerificationCodeView()
+        PhoneVerificationCodeView().environmentObject(AuthSessionStore())
    }
 }
@@ -0,0 +1,26 @@
+//
+//  PhoneVerificationViewModel.swift
+//  nirvana-ios
+//
+//  Created by Arjun Patel on 12/17/21.
+//
+
+import Foundation
+
+final class PhoneVerificationViewModel : ObservableObject  {
+    
+}
+
+extension String {
+    func applyPatternOnNumbers(pattern: String, replacementCharacter: Character) -> String {
+        var pureNumber = self.replacingOccurrences( of: "[^0-9]", with: "", options: .regularExpression)
+        for index in 0 ..< pattern.count {
+            guard index < pureNumber.count else { return pureNumber }
+            let stringIndex = String.Index(utf16Offset: index, in: pattern)
+            let patternCharacter = pattern[stringIndex]
+            guard patternCharacter != replacementCharacter else { continue }
+            pureNumber.insert(patternCharacter, at: stringIndex)
+        }
+        return pureNumber
+    }
+}