Adjust registration-screen to match updated design (#690)

Please note: this doesn't contain any logic, yet. It's solely UI.

Localization/StringsConvertor/input/Base.lproj/app.json

@@ -301,11 +301,18 @@
             }
         },
         "privacy": {
-            "title": "Privacy"
+            "title": "Privacy",
+            "policy": {
+                "ios": "Privacy Policy - Mastodon for iOS";
+                "server" = "Privacy Policy - %s";
+
+            },
+            "button": {
+                "confirm": "I agree"
+            }
         }
         "register": {
-            "title": "Let’s get you set up on %s",
-            "lets_get_you_set_up_on_domain": "Let’s get you set up on %s",
+            "title": "Create account",
             "input": {
                 "avatar": {
                     "delete": "Delete"
@@ -322,6 +329,7 @@
                 },
                 "password": {
                     "placeholder": "password",
+                    "confirmation_placeholder": "Confirm Password",
                     "require": "Your password needs at least:",
                     "character_limit": "8 characters",
                     "accessibility": {

Localization/app.json

@@ -329,6 +329,7 @@
                 },
                 "password": {
                     "placeholder": "password",
+                    "confirmation_placeholder": "Confirm Password",
                     "require": "Your password needs at least:",
                     "character_limit": "8 characters",
                     "accessibility": {

Mastodon/Scene/Onboarding/Register/MastodonRegisterView.swift

@@ -20,13 +20,13 @@ struct MastodonRegisterView: View {
     var body: some View {
         ScrollView(.vertical) {
             let margin: CGFloat = 16
-            // Display Name & Username
             VStack(alignment: .leading, spacing: 11) {
                 TextField(L10n.Scene.Register.Input.DisplayName.placeholder.localizedCapitalized, text: $viewModel.name)
                     .textContentType(.name)
                     .disableAutocorrection(true)
                     .modifier(FormTextFieldModifier(validateState: viewModel.displayNameValidateState))
                 HStack {
+                    Text("@")
                     TextField(L10n.Scene.Register.Input.Username.placeholder.localizedCapitalized, text: $viewModel.username)
                         .textContentType(.username)
                         .autocapitalization(.none)
@@ -44,12 +44,6 @@ struct MastodonRegisterView: View {
                     Text(errorPrompt)
                         .modifier(FormFootnoteModifier())
                 }
-            }
-            .padding(.horizontal, margin)
-            .padding(.bottom, 22)
-            
-            // Email & Password & Password hint
-            VStack(alignment: .leading, spacing: 11) {
                 TextField(L10n.Scene.Register.Input.Email.placeholder.localizedCapitalized, text: $viewModel.email)
                     .textContentType(.emailAddress)
                     .autocapitalization(.none)
@@ -60,9 +54,19 @@ struct MastodonRegisterView: View {
                     Text(errorPrompt)
                         .modifier(FormFootnoteModifier())
                 }
+
+            }
+            .padding(.horizontal, margin)
+            .padding(.bottom, 32)
+            
+            // Email & Password & Password hint
+            VStack(alignment: .leading, spacing: margin) {
                 SecureField(L10n.Scene.Register.Input.Password.placeholder.localizedCapitalized, text: $viewModel.password)
                     .textContentType(.newPassword)
                     .modifier(FormTextFieldModifier(validateState: viewModel.passwordValidateState))
+                SecureField(L10n.Scene.Register.Input.Password.confirmationPlaceholder.localizedCapitalized, text: $viewModel.passwordConfirmation)
+                    .textContentType(.newPassword)
+                    .modifier(FormTextFieldModifier(validateState: viewModel.passwordValidateState))
                 Text(L10n.Scene.Register.Input.Password.hint)
                     .modifier(FormFootnoteModifier(foregroundColor: .secondary))
                 if let errorPrompt = viewModel.passwordErrorPrompt {
@@ -112,7 +116,6 @@ struct MastodonRegisterView: View {
 
                 Color(Asset.Scene.Onboarding.textFieldBackground.color)
                     .cornerRadius(10)
-                    .shadow(color: .black.opacity(0.125), radius: 1, x: 0, y: 2)
 
                 content
                     .padding()
@@ -157,7 +160,7 @@ extension View {
 
 #if DEBUG
 struct MastodonRegisterView_Previews: PreviewProvider {
-    static var viewMdoel: MastodonRegisterViewModel {
+    static var viewModel: MastodonRegisterViewModel {
         let domain = "mstdn.jp"
         return MastodonRegisterViewModel(
             context: .shared,
@@ -183,55 +186,28 @@ struct MastodonRegisterView_Previews: PreviewProvider {
             )
         )
     }
-    
-    static var viewMdoel2: MastodonRegisterViewModel {
-        let domain = "mstdn.jp"
-        return MastodonRegisterViewModel(
-            context: .shared,
-            domain: domain,
-            authenticateInfo: AuthenticationViewModel.AuthenticateInfo(
-                domain: domain,
-                application:  Mastodon.Entity.Application(
-                    name: "Preview",
-                    website: nil,
-                    vapidKey: nil,
-                    redirectURI: nil,
-                    clientID: "",
-                    clientSecret: ""
-                ),
-                redirectURI: ""
-            )!,
-            instance: Mastodon.Entity.Instance(domain: "mstdn.jp", approvalRequired: true),
-            applicationToken: Mastodon.Entity.Token(
-                accessToken: "",
-                tokenType: "",
-                scope: "",
-                createdAt: Date()
-            )
-        )
-    }
             
     static var previews: some View {
         Group {
             NavigationView {
-                MastodonRegisterView(viewModel: viewMdoel)
+                MastodonRegisterView(viewModel: viewModel)
                     .navigationBarTitle(Text(""))
                     .navigationBarTitleDisplayMode(.inline)
             }
             NavigationView {
-                MastodonRegisterView(viewModel: viewMdoel)
+                MastodonRegisterView(viewModel: viewModel)
                     .navigationBarTitle(Text(""))
                     .navigationBarTitleDisplayMode(.inline)
             }
             .preferredColorScheme(.dark)
             NavigationView {
-                MastodonRegisterView(viewModel: viewMdoel)
+                MastodonRegisterView(viewModel: viewModel)
                     .navigationBarTitle(Text(""))
                     .navigationBarTitleDisplayMode(.inline)
             }
             .environment(\.sizeCategory, .accessibilityExtraLarge)
             NavigationView {
-                MastodonRegisterView(viewModel: viewMdoel2)
+                MastodonRegisterView(viewModel: viewModel)
                     .navigationBarTitle(Text(""))
                     .navigationBarTitleDisplayMode(.inline)
             }

Mastodon/Scene/Onboarding/Register/MastodonRegisterViewModel.swift

@@ -29,6 +29,7 @@ final class MastodonRegisterViewModel: ObservableObject {
     @Published var username = ""
     @Published var email = ""
     @Published var password = ""
+    @Published var passwordConfirmation = ""
     @Published var reason = ""
     
     @Published var usernameErrorPrompt: String? = nil

MastodonSDK/Sources/MastodonLocalization/Generated/Strings.swift

@@ -1014,10 +1014,12 @@ public enum L10n {
         public enum Password {
           /// 8 characters
           public static let characterLimit = L10n.tr("Localizable", "Scene.Register.Input.Password.CharacterLimit", fallback: "8 characters")
+          /// Confirm password
+          public static let confirmationPlaceholder = L10n.tr("Localizable", "Scene.Register.Input.Password.ConfirmationPlaceholder", fallback: "Confirm password")
           /// Your password needs at least eight characters
           public static let hint = L10n.tr("Localizable", "Scene.Register.Input.Password.Hint", fallback: "Your password needs at least eight characters")
-          /// password
-          public static let placeholder = L10n.tr("Localizable", "Scene.Register.Input.Password.Placeholder", fallback: "password")
+          /// Password
+          public static let placeholder = L10n.tr("Localizable", "Scene.Register.Input.Password.Placeholder", fallback: "Password")
           /// Your password needs at least:
           public static let require = L10n.tr("Localizable", "Scene.Register.Input.Password.Require", fallback: "Your password needs at least:")
           public enum Accessibility {

MastodonSDK/Sources/MastodonLocalization/Resources/Base.lproj/Localizable.strings

@@ -346,7 +346,8 @@ uploaded to Mastodon.";
 "Scene.Register.Input.Password.Accessibility.Unchecked" = "unchecked";
 "Scene.Register.Input.Password.CharacterLimit" = "8 characters";
 "Scene.Register.Input.Password.Hint" = "Your password needs at least eight characters";
-"Scene.Register.Input.Password.Placeholder" = "password";
+"Scene.Register.Input.Password.Placeholder" = "Password";
+"Scene.Register.Input.Password.ConfirmationPlaceholder" = "Confirm password";
 "Scene.Register.Input.Password.Require" = "Your password needs at least:";
 "Scene.Register.Input.Username.DuplicatePrompt" = "This username is taken.";
 "Scene.Register.Input.Username.Placeholder" = "username";

MastodonSDK/Sources/MastodonLocalization/Resources/en.lproj/Localizable.strings

@@ -338,6 +338,7 @@ uploaded to Mastodon.";
 "Scene.Register.Input.Password.CharacterLimit" = "8 characters";
 "Scene.Register.Input.Password.Hint" = "Your password needs at least eight characters";
 "Scene.Register.Input.Password.Placeholder" = "password";
+"Scene.Register.Input.Password.ConfirmationPlaceholder" = "Confirm password";
 "Scene.Register.Input.Password.Require" = "Your password needs at least:";
 "Scene.Register.Input.Username.DuplicatePrompt" = "This username is taken.";
 "Scene.Register.Input.Username.Placeholder" = "username";