swift和swiftui_在SwiftUI中创建无效的用户名和密码动画

swift和swiftui

In this tutorial, we’ll be creating code to look at the number of login attempts just for the password field. It would be best if you didn’t let the user know which field has the wrong data. Instead, have both the username/email and password fields highlighted — this makes hacking the account more difficult. Of course, there are other security measures like two-factor authentication, but I will leave these for another tutorial.

在本教程中，我们将创建代码以查看仅密码字段的登录尝试次数。 最好是不让用户知道哪个字段的数据错误。 相反，请同时突出显示“用户名/电子邮件和密码”字段-这使**帐户变得更加困难。 当然，还有其他安全措施，例如两因素身份验证，但是我将把它们留给另一个教程。

简单的用户界面 (Simple UI)

We will start by making a view struct with a login text inside a VStack.

我们将从在VStack内创建带有登录文本的视图结构开始。

Declare a username/email and password variables to store the user entered values, then create and add to the VStack the username/email and password fields. Make the Password field a SecureField.

声明用户名/电子邮件和密码变量以存储用户输入的值，然后创建用户名/电子邮件和密码字段并将其添加到VStack。 将Password字段设置为SecureField 。

You can use some of the SF Symbols to customize your field. Below I have the symbol named person for the username and lock for the password. Insert the images inside HStacks with the relevant TextField.

您可以使用一些SF符号来自定义字段。 在下面，我有一个名为person的符号作为用户名，并lock了密码。 将图像与相关的TextField插入HStacks 。

Add the forgot password, login and sign up buttons to the same VStack to complete the UI, as shown below:

将忘记密码，登录和注册按钮添加到同一VStack以完成UI，如下所示：

Now we have all the UI elements set up.

现在，我们已经设置了所有UI元素。

App’s simple UI

应用程序的简单UI

动画 (Animation)

Next, we make the shake effect using GeometryEffect. Adjust the variable as you need. travelDistance will affect how far the TextField will travel horizontally. numOfShakes is the number of times the TextField will shake. animatableData is the number of attempts taken from the LoginView.

接下来，我们使用GeometryEffect进行抖动效果。 根据需要调整变量。 travelDistance将影响TextField水平移动的距离。 numOfShakes是TextField会抖动的次数。 animatableData是从LoginView进行的尝试次数。

Declare a variable to keep count of the number of invalid login attempts. Add an overlay to create a border to the HStacks that includes our TextField, then add a modifier to the same HStack that takes our ShakeEffect.

声明一个变量以记录无效登录尝试的次数。 添加覆盖创建一个边界到HStacks ，包括我们的TextField ，再加入改性剂相同HStack这需要我们ShakeEffect 。

@State var invalidAttempts = 0

Inside withAnimation, increase the number of invalid attempts each time the user taps the login button.

在withAnimation内部，每次用户单击登录按钮时，都会增加无效尝试的次数。

All done! Next, you can limit the number of failed login attempts to prevent users from abusing your server.

全做完了！ 接下来，您可以限制登录尝试失败的次数，以防止用户滥用您的服务器。

Final code result — highlight & shake animation

最终代码结果-高亮显示并摇动动画

翻译自: https://medium.com/better-programming/create-an-invalid-username-and-password-animation-in-swiftui-72fb4c52f7b6

swift和swiftui