Glassmorphism Login Form using ReactJS and Ant Design Components | Login Form Field Validations

#reactjs #glassmorphism #loginform
In this video tutorial I have explained how to create Glassmorphism login form using react JS and ant design components with login form field validations
This video focuses on
- How to create Glassmorphism effect in login form popup using react JS and ant design components
- How to add login form field validations using antd From rules
- How to add backdrop-filter to create glassmorphism effect in a popup over a background image in react app
- How to add full screen background image in react app
- How to create login form popup using ant design form component with glassmorphism effect
- How to add ant design icons in react glassmorphism login form
- How to use ant design Divider component in reactjs
- How to mock login feature and show success message on login button press using antd message
- How to make antd icons clickable
- How to create password field inside ant design form item using Input.Password component
- How to create simple react login popup using ant design UI
- How to create responsive login form in react js using ant design ui
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For details on how to use Ant Design Form component, please go through following video.
Antd Form: • Ant Design Form compon...
Antd Form Validation: • How to Create and Vali...
For details on how to use other components used in this video, please go through following videos
Antd Icons: • How to use Ant Design ...
Antd Divider: • How to use Ant Design ...
Antd Typography: • Ant Design Typography ...
Antd Button: • How to use Ant Design ...
Antd Input: • How to use Ant Design ...
For more details on ant-design, please visit its documentation at ant.design/components/form
Happy Coding!

[@deadmaxmax8632]

Great job Nicely explained 💯💯💯

[@CodeWithAamir]

Glad you liked it 🙂
Thank you @Deadmax Max

[@testingaccount5867]

I like it Aamir. keep them coming.

[@CodeWithAamir]

Thank you @Testing Account

[@regoresconde3302]

Hey Aamir, great vid! I was wondering if there's any way to align the input boxes in a form group in antd?

[@CodeWithAamir]

Hi @Regor,
Yes you can achieve this in multiple ways, one is using the labelCol and labelAlign props so something like below will work
So in this case every label will take the same space and rest of the space will be occupied by the input controls and they will automatically be aligned.
The other way is by doing style customizations, or overriding the antd styles I have explained in other videos like ruclips.net/video/gpG967lkiJc/видео.html.
I hope you got the idea, please let me know if you need any more help on that.
Thanks

[@abhishekpatelrollno-2nd861]

Thank you 🙏

[@CodeWithAamir]

Most welcome 😊

[@laxmipriyapradhan1704]

Nice thanks for the video... Can please do one more add on video where if user hover on the login button without entering anything or giving wrong credentials then button will randomly move not allow to click on the mouse ....and if user given Correct credentials only then will allow to click on it and login will happen

[@CodeWithAamir]

Hi @ Laxmipriya Pradhan,
Thank you for the great suggestion. I will try to come up with that video in future as time permits. Meanwhile if you need any urgent help please let me know we can connect over the zoom or something to get that sorted.
Thanks again.

[@kashikapande6229]

@CodeWithAamir Which version of reactjs and antd are you using?

[@CodeWithAamir]

Hi @Kashika Pande
I am using following versions
"react": "^18.2.0",
"antd": "^5.1.2",

[@hakan126]

amazing skills.

[@CodeWithAamir]

Thank you! Cheers!

[@SatyaSaiVeeraBrahmamButte]

why it is not getting for antd 3x

[@CodeWithAamir]

Hi @Satya Sai Veera Brahmam Butte
What type of errors you are getting there? There might be some component which were introduced after antd 3 or so?

[@SatyaSaiVeeraBrahmamButte]

@@CodeWithAamir changed Ui there is no spaces and input height and width

[@CodeWithAamir]

Hi,
You can try adding the antd css because before antd5 it has to add manually like below
import "antd/dist/antd.css";
and look if that works by adding above css

[@SatyaSaiVeeraBrahmamButte]

@@CodeWithAamir but why spaces Are not getting, before the labels and input

[@CodeWithAamir]

Hi, need to see the code and ui to check what could be the issue. Can you share via codesandbox etc?

[@z2jnv734]

Code to do sir

[@CodeWithAamir]

Thank you.
If you need the code please send me an email at [e-mail]
Thanks