creating email box with animations for drag gesture , implemting pass…

…word box sames as email
NawafSwe · Dec 8, 2020 · bb7326a · bb7326a
1 parent e27235b
commit bb7326a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/Billing-Tracker/Screens/AccountView/AccountView.swift b/Billing-Tracker/Screens/AccountView/AccountView.swift
@@ -11,14 +11,13 @@ struct AccountView: View {
     //view model will load all user data from user services
     @ObservedObject var viewModel  : AccountViewModel
     @Environment (\.presentationMode) var presentationMode
-    @State var showEmailBox = true
     @State var viewState: CGSize = .zero
     var body: some View {
         ZStack {
             NavigationView {
                 Form{
                     Section(header:Text("Account information")){
-                        Button(action:{self.showEmailBox.toggle()}){
+                        Button(action:{ self.viewModel.showEmailBox.toggle() }){
                             HStack {
                                 Text("Email :")
                                 Text("\(viewModel.email)")
@@ -45,20 +44,30 @@ struct AccountView: View {
                                     })
                 .navigationTitle("Profile")
             }
-            .blur(radius: showEmailBox ? 3 : 0)
+            .blur(radius: viewModel.showEmailBox ? 3 : 0)
 
-            if showEmailBox{
+            if viewModel.showEmailBox{
                 EmailBoxView(viewModel: viewModel)
+                    .transition(.move(edge: .bottom))
+                    .animation(.easeIn(duration: 0.3))
                     .overlay(Text("\(viewState.height)"),alignment: .top)
                     .gesture(
                         DragGesture().onChanged({value in
-
+                            //saving the value of the drag
+                            self.viewState = value.translation
+                            if self.viewState.height > 150{
+                                self.viewModel.showEmailBox = false
+                                self.viewState.height = .zero
+                            }
                         })
 
                         .onEnded({value in
-
+                            self.viewState = .zero
                         })
                     )
+                    .offset(y: self.viewState.height > 0 ? self.viewState.height : 0)
+                    // prevent animation from propagation
+                    .animation(nil)
 
 
             }

diff --git a/Billing-Tracker/Screens/AccountView/AccountViewModel.swift b/Billing-Tracker/Screens/AccountView/AccountViewModel.swift
@@ -23,6 +23,7 @@ final class AccountViewModel : ObservableObject{
     @Published var verifyReEnteredPassword = ""
     @Published var newEmail = ""
     @Published var password = ""
+    @Published var showEmailBox = false
     init(email:String, preferredProviderName:String , preferredProviderImage:String, age:String,
          gender:String, displayName:String
     ){
@@ -54,13 +55,13 @@ final class AccountViewModel : ObservableObject{
 
             let credential = EmailAuthProvider.credential(withEmail: email, password: "somePass")
             currentUser.reauthenticate(with: credential){
-                 user , error in
+                user , error in
                 if let error = error{
                     print(error.localizedDescription)
                 }
 
-                   
-               }
+
+            }
 
             if currentUser.email != self.email{
                 currentUser.updateEmail(to: self.email) { error in

diff --git a/Billing-Tracker/Views/BoxFormView/EmailBoxView.swift b/Billing-Tracker/Views/BoxFormView/EmailBoxView.swift
@@ -42,7 +42,7 @@ struct EmailBoxView: View {
                 Button(action:{}){
                     StandardButton(title: "Update")}.padding() , alignment: .topTrailing
             )
-            .overlay(Button(action:{}){
+            .overlay(Button(action:{self.viewModel.showEmailBox.toggle() }){
                 DismissButtonView()
             }.padding() , alignment: .topLeading
             )