mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-03 16:10:20 +00:00
Design review for first public TestFlight (#492)
* 430 - Design review for first public TestFlight
This commit is contained in:
@@ -18,16 +18,17 @@ import SwiftUI
|
||||
|
||||
/// An image that is styled for use as the screen icon in the onboarding flow.
|
||||
struct AuthenticationIconImage: View {
|
||||
let image: ImageAsset
|
||||
let image: Image
|
||||
|
||||
var body: some View {
|
||||
Image(image.name)
|
||||
image
|
||||
.resizable()
|
||||
.renderingMode(.template)
|
||||
.foregroundColor(.element.accent)
|
||||
.frame(width: 90, height: 90)
|
||||
.background(.white, in: Circle().inset(by: 2))
|
||||
.foregroundColor(.element.secondaryContent)
|
||||
.accessibilityHidden(true)
|
||||
.padding(20)
|
||||
.frame(width: 72, height: 72)
|
||||
.background(RoundedRectangle(cornerRadius: 14).fill(Color.element.quinaryContent))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,6 +36,6 @@ struct AuthenticationIconImage: View {
|
||||
|
||||
struct AuthenticationIconImage_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
AuthenticationIconImage(image: Asset.Images.serverSelectionIcon)
|
||||
AuthenticationIconImage(image: Image(asset: Asset.Images.serverSelectionIcon))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -197,13 +197,11 @@ final class LoginCoordinator: CoordinatorProtocol {
|
||||
|
||||
/// Presents the server selection screen as a modal.
|
||||
private func presentServerSelectionScreen() {
|
||||
let serverSelectionNavigationStackCoordinator = NavigationStackCoordinator()
|
||||
|
||||
let userNotificationController = UserNotificationController(rootCoordinator: serverSelectionNavigationStackCoordinator)
|
||||
let userNotificationController = UserNotificationController(rootCoordinator: navigationStackCoordinator)
|
||||
|
||||
let parameters = ServerSelectionCoordinatorParameters(authenticationService: authenticationService,
|
||||
userNotificationController: userNotificationController,
|
||||
isModallyPresented: true)
|
||||
isModallyPresented: false)
|
||||
|
||||
let coordinator = ServerSelectionCoordinator(parameters: parameters)
|
||||
coordinator.callback = { [weak self, weak coordinator] action in
|
||||
@@ -211,9 +209,7 @@ final class LoginCoordinator: CoordinatorProtocol {
|
||||
self.serverSelectionCoordinator(coordinator, didCompleteWith: action)
|
||||
}
|
||||
|
||||
serverSelectionNavigationStackCoordinator.setRootCoordinator(coordinator)
|
||||
|
||||
navigationStackCoordinator.setSheetCoordinator(userNotificationController)
|
||||
navigationStackCoordinator.push(coordinator)
|
||||
}
|
||||
|
||||
/// Handles the result from the server selection modal, dismissing it after updating the view.
|
||||
@@ -223,7 +219,7 @@ final class LoginCoordinator: CoordinatorProtocol {
|
||||
updateViewModel()
|
||||
}
|
||||
|
||||
navigationStackCoordinator.setSheetCoordinator(nil)
|
||||
navigationStackCoordinator.pop()
|
||||
}
|
||||
|
||||
/// Shows the forgot password screen.
|
||||
|
||||
@@ -29,15 +29,10 @@ struct LoginScreen: View {
|
||||
VStack(spacing: 0) {
|
||||
header
|
||||
.padding(.top, UIConstants.topPaddingToNavigationBar)
|
||||
.padding(.bottom, 36)
|
||||
.padding(.bottom, 32)
|
||||
|
||||
serverInfo
|
||||
.padding(.leading, 12)
|
||||
|
||||
Rectangle()
|
||||
.fill(Color.element.quinaryContent)
|
||||
.frame(height: 1)
|
||||
.padding(.vertical, 21)
|
||||
.padding(.bottom, 32)
|
||||
|
||||
switch context.viewState.loginMode {
|
||||
case .password:
|
||||
@@ -59,7 +54,7 @@ struct LoginScreen: View {
|
||||
/// The header containing a Welcome Back title.
|
||||
var header: some View {
|
||||
Text(ElementL10n.ftueAuthWelcomeBackTitle)
|
||||
.font(.element.title2Bold)
|
||||
.font(.element.title1Bold)
|
||||
.multilineTextAlignment(.center)
|
||||
.foregroundColor(.element.primaryContent)
|
||||
}
|
||||
@@ -73,7 +68,13 @@ struct LoginScreen: View {
|
||||
|
||||
/// The form with text fields for username and password, along with a submit button.
|
||||
var loginForm: some View {
|
||||
VStack(spacing: 14) {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
Text(ElementL10n.ftueAuthSignInEnterDetails)
|
||||
.font(.element.subheadline)
|
||||
.foregroundColor(.element.primaryContent)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.bottom, 8)
|
||||
|
||||
TextField(ElementL10n.loginSigninUsernameHint, text: $context.username)
|
||||
.focused($isUsernameFocused)
|
||||
.textFieldStyle(.elementInput())
|
||||
@@ -84,8 +85,7 @@ struct LoginScreen: View {
|
||||
.onChange(of: isUsernameFocused, perform: usernameFocusChanged)
|
||||
.onSubmit { isPasswordFocused = true }
|
||||
.accessibilityIdentifier("usernameTextField")
|
||||
|
||||
Spacer().frame(height: 20)
|
||||
.padding(.bottom, 20)
|
||||
|
||||
SecureField(ElementL10n.loginSignupPasswordHint, text: $context.password)
|
||||
.focused($isPasswordFocused)
|
||||
@@ -95,15 +95,18 @@ struct LoginScreen: View {
|
||||
.onSubmit(submit)
|
||||
.accessibilityIdentifier("passwordTextField")
|
||||
|
||||
Button { context.send(viewAction: .forgotPassword) } label: {
|
||||
Text(ElementL10n.ftueAuthForgotPassword)
|
||||
.font(.element.body)
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .trailing)
|
||||
.padding(.bottom, 8)
|
||||
// uncomment this piece of code once forgot password will be available
|
||||
// Button { context.send(viewAction: .forgotPassword) } label: {
|
||||
// Text(ElementL10n.ftueAuthForgotPassword)
|
||||
// .font(.element.body)
|
||||
// }
|
||||
// .frame(maxWidth: .infinity, alignment: .trailing)
|
||||
// .padding(.bottom, 8)
|
||||
|
||||
Spacer().frame(height: 32)
|
||||
|
||||
Button(action: submit) {
|
||||
Text(ElementL10n.loginSignupSubmit)
|
||||
Text(ElementL10n.loginContinue)
|
||||
}
|
||||
.buttonStyle(.elementAction(.xLarge))
|
||||
.disabled(!context.viewState.canSubmit)
|
||||
|
||||
+25
-14
@@ -29,25 +29,36 @@ struct LoginServerInfoSection: View {
|
||||
// MARK: - Views
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text(ElementL10n.ftueAuthSignInChooseServerHeader)
|
||||
.font(.element.subheadline)
|
||||
.foregroundColor(.element.secondaryContent)
|
||||
.foregroundColor(.element.primaryContent)
|
||||
.padding(.horizontal, 16)
|
||||
|
||||
HStack {
|
||||
Text(address)
|
||||
.font(.element.body)
|
||||
.foregroundColor(.element.primaryContent)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: editAction) {
|
||||
Text(ElementL10n.edit)
|
||||
.padding(.vertical, 2)
|
||||
Button(action: editAction) {
|
||||
HStack {
|
||||
Text(address)
|
||||
.font(.element.subheadlineBold)
|
||||
.foregroundColor(.element.primaryContent)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical)
|
||||
|
||||
Spacer()
|
||||
|
||||
Image(systemName: "chevron.right")
|
||||
.foregroundColor(.element.tertiaryContent)
|
||||
.padding(.trailing, 16)
|
||||
}
|
||||
.buttonStyle(.elementGhost())
|
||||
.accessibilityIdentifier("editServerButton")
|
||||
.background(RoundedRectangle(cornerRadius: 14).fill(Color.element.system))
|
||||
}
|
||||
.accessibilityIdentifier("editServerButton")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct LoginServerInfoSection_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
LoginServerInfoSection(address: "matrix.org", editAction: { })
|
||||
.padding()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ struct ServerSelectionViewState: BindableState {
|
||||
|
||||
/// The title shown on the confirm button.
|
||||
var buttonTitle: String {
|
||||
isModallyPresented ? ElementL10n.actionConfirm : ElementL10n.actionNext
|
||||
isModallyPresented ? ElementL10n.continue : ElementL10n.actionNext
|
||||
}
|
||||
|
||||
/// The text field is showing an error.
|
||||
|
||||
+5
-5
@@ -40,7 +40,7 @@ struct ServerSelectionScreen: View {
|
||||
/// The title, message and icon at the top of the screen.
|
||||
var header: some View {
|
||||
VStack(spacing: 8) {
|
||||
AuthenticationIconImage(image: Asset.Images.serverSelectionIcon)
|
||||
AuthenticationIconImage(image: Image(asset: Asset.Images.serverSelectionIcon))
|
||||
.padding(.bottom, 8)
|
||||
|
||||
Text(ElementL10n.ftueAuthChooseServerTitle)
|
||||
@@ -51,13 +51,14 @@ struct ServerSelectionScreen: View {
|
||||
Text(ElementL10n.ftueAuthChooseServerSubtitle)
|
||||
.font(.element.body)
|
||||
.multilineTextAlignment(.center)
|
||||
.foregroundColor(.element.secondaryContent)
|
||||
.foregroundColor(.element.tertiaryContent)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
}
|
||||
|
||||
/// The text field and confirm button where the user enters a server URL.
|
||||
var serverForm: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
VStack(alignment: .leading, spacing: 24) {
|
||||
TextField(ElementL10n.ftueAuthChooseServerEntryHint, text: $context.homeserverAddress)
|
||||
.textFieldStyle(.elementInput(labelText: ElementL10n.hsUrl,
|
||||
footerText: context.viewState.footerMessage,
|
||||
@@ -70,8 +71,6 @@ struct ServerSelectionScreen: View {
|
||||
.onSubmit(submit)
|
||||
.accessibilityIdentifier("addressTextField")
|
||||
|
||||
Divider()
|
||||
|
||||
TextField(ElementL10n.ftueAuthChooseServerEntryHint, text: $context.slidingSyncProxyAddress)
|
||||
.textFieldStyle(.elementInput(labelText: "Sliding sync proxy URL"))
|
||||
.keyboardType(.URL)
|
||||
@@ -80,6 +79,7 @@ struct ServerSelectionScreen: View {
|
||||
.submitLabel(.done)
|
||||
.onSubmit(submit)
|
||||
.accessibilityIdentifier("slidingSyncProxyAddressTextField")
|
||||
.padding(.bottom, 8)
|
||||
|
||||
Button(action: submit) {
|
||||
Text(context.viewState.buttonTitle)
|
||||
|
||||
Reference in New Issue
Block a user