Flutter: Blog App Forgot Password page creation and Rest API Connection || Material UI ||#43

hello everyone welcome on davis tech channel in this video we will gonna talk about the forward password page govindserma uh viewer of this channel has asked me to create a new video on the forward password page of the blog app so in this video i am going to create a new page called forward password page you can see that in a sign-in page we have an option for the forward password so in this video we will gonna create a page for the pog of password and we will gonna connect the forward password page to the corresponding dpi endpoint if i will go on a back-end code in a back-end code you will find that in one of the video of the back-end code i created the rest api endpoint for the power of password if you're not able to find that video i will give the video link of of this rest api creation for the forgot password in the description please have a look on it if you forgot some of the point so in this video first i will gonna create a new page the page will be forward password page and we will want to connect that forward password page to the corresponding register endpoint let me create a new page the file name will be forgot password dot dot file and i'm creating this thing inside the pages folder only then instead of writing the whole code i mean the whole code what i will do that i will just copy the all the code of the sign-in page and i will going to modify it because you know already all the thing that how to create a text form field and how to do the validation all the things you know so i'm just going to copy the all the code and i'm going to paste it inside here and let's make the necessary changes what are the changes we will do that first we have to change the class name the class name will be forward password let me find all the places where i use the sign in page and let me just change the page to for code password page okay also we have to change the state name also so if you don't know the shortcut key the shortcut key of the vs code is ctrl d okay to find all the similar kind of variable i will going to change it let me just put the state and let me just change the only this sign in instead of signing i'm going to usd forgot password all are good and uh before i will go on a forward password page what i will gonna do that in a sign-in page i will call this forward password page so let me go on a forward password button so where we will have that button just let me go there it will be after the sign in page let me just find the here we have the new user and here we have the forward password basically it is right now a text what i am going to do that i will going to wrap this text with a new widget and where is to have it with widget and the widget will be equal because we wanted to make this clickable and inside the inkwell we have the property called ontap we will going to use the own tab and ontap will take and method and uh what i'm going to do that i will use the navigator to navigate from the sign in page to the forward password page navigator dot push and the context will be the same and in that out we have to provide the material page route i'm going to point material page route i'm just wrapping this video as soon as possible because here i have to use the context and now i will call the forward password page forward password page and let me just provide this thing and last semicolon okay now all are good i will hit the save and what reload will happen and if i will click on a forward password then we will land on to the forward password page right now it's same as the sign in page because i just copied the whole code of this landing page now let me go on a forward password page and change this test box instead of these sign in with email the name will be forgot password okay i will hit the save and let me go on a rest api endpoint what are the parameters we need the first parameter we need is username which we are passing on a url itself with help of the username we will gonna find the data on the database then we will gonna need the password and password we are passing inside the body parameter okay we need only two thing first one is username second one is password username will be append on a url and password we will send using the body parameter so that's it so username will be there no problem password will be there no problem this suffix icon will be there no problem and instead of default password what i'm going to do i will just delete the forward password and new user tab from here so we are in a forward password place and i'm just going to delete the whole total role this row which contain the two thing the forward password one and the new user one and i'm just going to delete and uh i will just hit the save to see the hot reload okay now to think is deleted and uh instead of the sign-in uh i will just use the update password text that will be much better up date password so if you forgot that how i created this sign up page and sign in page so i will provide a video link again on the description please have a look on it because i am not writing the whole code again all the things the validation part the text from field creation part is already completed that's why i thought that you can create a forward password page by your own but uh go into cinema ask me to create a new video that's why i'm creating this video again for the forward password page so okay the update password is there but it's not looking great i will just use the 14 phone size or the 15 okay that will be great all the things are there right now the username tab is there password tab is there the validation of the username and password is already completed now only thing we have to change is the logic part after the clicking the update password so let me go on update password on type method and inside the ontap method you can find that all the things are there so what i will do i will just gonna delete all the thing we don't need all the things here i'm just going to delete it so here we have to write the logic so if i will go on above of the whole class then you will find that we have the network handler we had a user controller and password controller the corresponding controller assigned to the corresponding text form field that so the username of this page we will got on a username controller and password we will get on a password controller and we will have to use the network handler to connect this page to the corresponding rest api endpoint so let me go inside the on tab and word response let me write the logic we will have to use the network handler and inside the network handler i have to use the average first we have the post method yes we have the post method here we have to provide the url and what will be the url the url will be slash user slash update or else i can go here slash update and we have to provide the username also let me provide the username also and how we will gonna provide the username i will use the string interpolation and we have the controller username controller this one let me use the username controller to get the username dot txt what it takes inside the body we have to provide the password let me create a map string string name of the variable will be data and here we will on our provide the password the exact name will be needed the exact name is the password only okay equal to password controller dot txt i have to wrap it with the inverted comma i will hit the save and i will have to provide the this data one over here and this semicolon will hit the zero everything is fine just one thing i have to do that if the password is successfully updated which means the response is status code is either d 200 or the this dot status code is 201 which means the password is successfully updated then we have to navigate to the welcome screen again because we changed the our password and after the changing a password user have to login again so basically we will have to navigate to the welcome screen and we will want to use the push and remove until because after the navigation to the welcome screen if someone click on a back button then it will not again come on a forward password page i am going to use the material page route builder we have to provide the context and uh welcome screen welcome okay all the things are good i just have to test it and some of the thing like validation part all other thing i mean the circular progress bar that are the thing you have to manage by yourself i'm not writing the all the code because all the code already written on a sign-in page take a reference of the sign-in page and do the experiment on a forward password page because it's kind of learning and now we have to test it but there is an error that i am using here a post method and if i will go on a back end code then here you can see that i am using the patch method so we have to fix it before the testing the code for that what i will do that i am going to change the sum of the code on a network handler in the network handler here we have the post method and i will just gonna copy the post method all other thing will be the same because patch method is similar kind of thing of the post method i'm going to change the mirror name to patch to to post to patch sorry and all of the thing will be same i just have to change this post to http dot patch and the rest of the thing will be the same we are using the patch method and i have to just go on a forward password instead of the post i have to write the patch so let me use the patch now we need two i just found one bug while seeing this patch meter that we are using the middleware.check token we don't have to use this middleware dot check token right now because we didn't log in yet to the blog app and uh the middleware.check token is useful after the logging because after the login only we are getting the token so i just removed it and all the thing will be good then it will work fine so let me just work on a dev which is the main username for the testing the blog app and the password will be five four three two one i'm updating the password to five four three two one because first i have we are using the password one two three four five and i'm going to click on update password we came on a welcome page which means the password is updated let me check it i will go on a sign-in page and in a sign-in page i will going to log with the device tag 06 again the password will be 54321 i'm going to click on a sign in okay we successfully sign in with the blog app so the purpose of this video is completed we created a forward password page in a forward password page we are able to update the password so thank you all happy coding and one more last video on a blog app because i am ending this series and i am working on a new series which will be a social media app or anything you can suggest me on a comment section that what kind of video i will make or what kind of new project i will start which will involve the node.js and flutter or django flash any kind of stack so please let me know in the comment section and help me to grow this channel because now we are going to be a 1k family so keep helping me and thank you

Channel: Dev Stack

Views: 8,247

Keywords: NodeJS, ExpressJs, MongoDB, Flutter, Dart, javascript, mongoose, blogapp, app, server, rest-server, rest-api, express, node, SignUp, Signup-screen, form-validation, Flutter blog app, blog app, flutter tutorial, build app from scratch, Postman, Postman-Documentation, Documentation, Image-Upload, Multer, Working with Image, Nodejs-Image, Rest-API for Image

Id: E06MkQU-cns

Length: 16min 16sec (976 seconds)

Published: Thu Dec 10 2020