From 11d262e10ecb62e3e10180b0ebca9f1b37892307 Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Wed, 5 Feb 2025 11:36:57 +0100 Subject: [PATCH] Some signup login flow UI changes (#2645) * Add title string * Label for icon button * Restyle 3rd party sign in section * Add apple svg icon * Use apple svg * Add google icon * Update strings.ftl * Partially bold string * SignUpForm TS * SignUpConfirmation TS * Rename signup screens * SignUpConfirmation TS * Remove string * TS fixes * Button text change * Remove superfluous margin * Move two text fields to sign up confirmation * Revert "Remove superfluous margin" This reverts commit 6a8fe1e7cf9f4f2a064a3fff0a4a37a2f06d15e3. * Add TODO * Remove text under Continue button * Reorder states * Close button only on login * LoginSignupWrapper TS * SignUp TS * Remove Learn More screen * Update text input field label * Remove email confirmation screen * Disable button when inputs empty * Navigate to main after register * Only show one check box * Add error component to first signup screen * Partially italics string * Remove previous text * SignUpConfirmationForm TS * Add a type * Make exclamation mark appear white * Example email validation * Updated Learn More webview title * Comment out some registration fields from previous checkboxes * Add comment * Update Error.tsx * Set all previously separate checkbox consents to true if the one is checked * Revert removal of LearnMore screen * Navigate to Learn More screen * Update LoginForm.tsx * Revert "Remove email confirmation screen" This reverts commit 52c396e4112e8f41214f70d9c0c1b03fec53f760. * Use pink_flower as background for Learn More screen * Remove old confirmation screen * Remove LearnMore demo * Show translated error text for common errors * Force dark buttons in signup/login flow screens * Add text to forgot password page * Change text input label --- .../app/src/main/assets/fonts/INatIcon.ttf | Bin 29340 -> 29504 bytes android/link-assets-manifest.json | 2 +- assets/fonts/INatIcon.ttf | Bin 29340 -> 29504 bytes .../project.pbxproj | 8 +- ios/link-assets-manifest.json | 2 +- src/components/Developer/UiLibrary.js | 1 - .../UiLibrary/LoginSignUpLearnMoreDemo.js | 6 - src/components/Developer/UiLibraryItem.js | 2 - src/components/LoginSignUp/Error.tsx | 14 +- .../LoginSignUp/ForgotPasswordForm.js | 9 +- src/components/LoginSignUp/LearnMore.tsx | 2 +- .../LoginSignUp/LicensePhotosForm.js | 260 ------------------ src/components/LoginSignUp/LoginForm.tsx | 90 +++--- ...ignUpWrapper.js => LoginSignUpWrapper.tsx} | 25 +- .../LoginSignUp/{SignUp.js => SignUp.tsx} | 8 +- .../LoginSignUp/SignUpConfirmation.js | 55 ---- ...icensePhotos.js => SignUpConfirmation.tsx} | 13 +- .../LoginSignUp/SignUpConfirmationForm.tsx | 168 +++++++++++ src/components/LoginSignUp/SignUpForm.js | 113 -------- src/components/LoginSignUp/SignUpForm.tsx | 79 ++++++ .../SharedComponents/INatIcon/glyphmap.json | 3 +- src/i18n/l10n/en.ftl | 38 +-- src/i18n/l10n/en.ftl.json | 31 +-- src/i18n/strings.ftl | 38 +-- src/images/google.png | Bin 0 -> 1804 bytes src/images/icons/apple.svg | 4 + .../StackNavigators/LoginStackNavigator.js | 14 +- 27 files changed, 394 insertions(+), 591 deletions(-) delete mode 100644 src/components/Developer/UiLibrary/LoginSignUpLearnMoreDemo.js delete mode 100644 src/components/LoginSignUp/LicensePhotosForm.js rename src/components/LoginSignUp/{LoginSignUpWrapper.js => LoginSignUpWrapper.tsx} (89%) rename src/components/LoginSignUp/{SignUp.js => SignUp.tsx} (83%) delete mode 100644 src/components/LoginSignUp/SignUpConfirmation.js rename src/components/LoginSignUp/{LicensePhotos.js => SignUpConfirmation.tsx} (61%) create mode 100644 src/components/LoginSignUp/SignUpConfirmationForm.tsx delete mode 100644 src/components/LoginSignUp/SignUpForm.js create mode 100644 src/components/LoginSignUp/SignUpForm.tsx create mode 100644 src/images/google.png create mode 100644 src/images/icons/apple.svg diff --git a/android/app/src/main/assets/fonts/INatIcon.ttf b/android/app/src/main/assets/fonts/INatIcon.ttf index 85f8bdc1e615c24d37883e7ac35544230289f1a1..5ad9781216d1c0860ce209bf0202b7497d92ea57 100644 GIT binary patch delta 509 zcmW-dO-K}B7{{My-mjV2*;X?pgqGNi6~v9&boOE&L}#g6P(j1)=x8&$gYKAtAcBV! z4=#g9Ak?W-ml(Q;VFwT0`hcio7dw=cLI;hYp4k_E@AJO@=l?wK$L1cs`G#x7g{J_x z3IO+OffK^!^F08z3!vUk_>acdckR~z);z$y1J8Bpw_iNFPTsGC?UA5`xI*h~;+z+> z=9X{#`#}Bni7$S$=FEJ$^ARAE_Wv0;b0M~|n{uaVf41QS?#)vFg=2szA3*C1n=`F< z8-uR^{3QUn)!r^2N++|_$Z|X!H6M(Q>W2R5uikUS|6#q*gT;_>+- zfW)&_?=FzG1E0a7Gs*zfie0rYV?io;235tb^i{54b)+;<8X3NdrD8$J0?o4bR9?HZ z!4(r+XClW;-O#1Z7?&ohELVbMn3vBxg`}H68|p(&3gmHS90=`6J72`|6^d_ zt^vxw$xW;%V4T1x2$Yim@)hzDb5jG2Z$M18$cuwlx!AYD`K78!~L3Z%jO!M to|w%OGDVqzwk^wfwRuwR1Xc;*#FP}>;;R)_!q diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json index a8ab8224e3..804be16bf5 100644 --- a/android/link-assets-manifest.json +++ b/android/link-assets-manifest.json @@ -3,7 +3,7 @@ "data": [ { "path": "assets/fonts/INatIcon.ttf", - "sha1": "0dabb1fdd2af1e0e98ec6636b7e035a2a9ba30de" + "sha1": "89474f5d4caf95704dfaf57d6155f39b9fe2c08a" }, { "path": "assets/fonts/Lato-Bold.ttf", diff --git a/assets/fonts/INatIcon.ttf b/assets/fonts/INatIcon.ttf index 85f8bdc1e615c24d37883e7ac35544230289f1a1..5ad9781216d1c0860ce209bf0202b7497d92ea57 100644 GIT binary patch delta 509 zcmW-dO-K}B7{{My-mjV2*;X?pgqGNi6~v9&boOE&L}#g6P(j1)=x8&$gYKAtAcBV! z4=#g9Ak?W-ml(Q;VFwT0`hcio7dw=cLI;hYp4k_E@AJO@=l?wK$L1cs`G#x7g{J_x z3IO+OffK^!^F08z3!vUk_>acdckR~z);z$y1J8Bpw_iNFPTsGC?UA5`xI*h~;+z+> z=9X{#`#}Bni7$S$=FEJ$^ARAE_Wv0;b0M~|n{uaVf41QS?#)vFg=2szA3*C1n=`F< z8-uR^{3QUn)!r^2N++|_$Z|X!H6M(Q>W2R5uikUS|6#q*gT;_>+- zfW)&_?=FzG1E0a7Gs*zfie0rYV?io;235tb^i{54b)+;<8X3NdrD8$J0?o4bR9?HZ z!4(r+XClW;-O#1Z7?&ohELVbMn3vBxg`}H68|p(&3gmHS90=`6J72`|6^d_ zt^vxw$xW;%V4T1x2$Yim@)hzDb5jG2Z$M18$cuwlx!AYD`K78!~L3Z%jO!M to|w%OGDVqzwk^wfwRuwR1Xc;*#FP}>;;R)_!q diff --git a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj index 40cc1b5fcc..73b4466d83 100644 --- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj +++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj @@ -31,10 +31,10 @@ 8F1AC6782BC1B610002F994B /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 8F1AC6762BC1B610002F994B /* PrivacyInfo.xcprivacy */; }; 8F1AC6792BC1B610002F994B /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 8F1AC6762BC1B610002F994B /* PrivacyInfo.xcprivacy */; }; 8F346E4A2CF6912700CED7B4 /* geomodel.mlmodel in Sources */ = {isa = PBXBuildFile; fileRef = 8F346E492CF6912700CED7B4 /* geomodel.mlmodel */; }; - 8FFB0C4B23034426BE3DD441 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0E1D9B3B44B84541AFD0FBEC /* INatIcon.ttf */; }; AE4DC81B3A87484CB3FD6750 /* Lato-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4B0AEEF6CA584BCF9880EB35 /* Lato-Regular.ttf */; }; E23E0899594A7C6DF680FFDB /* libPods-iNaturalistReactNative-ShareExtension.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A336AF0ADEAE537AB1B73F98 /* libPods-iNaturalistReactNative-ShareExtension.a */; }; E5DFC1C6FBFA45739CE91C69 /* Lato-MediumItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 69DF855D92EA4ADFB73B47F1 /* Lato-MediumItalic.ttf */; }; + 59925732D1464B6388BDAEB7 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2CFF1354495A49DEA8CEA670 /* INatIcon.ttf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -73,7 +73,6 @@ 00E356EE1AD99517003FC87E /* iNaturalistReactNativeTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = iNaturalistReactNativeTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = iNaturalistReactNativeTests.m; sourceTree = ""; }; - 0E1D9B3B44B84541AFD0FBEC /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = ""; }; 13B07F961A680F5B00A75B9A /* iNaturalistReactNative.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = iNaturalistReactNative.app; sourceTree = BUILT_PRODUCTS_DIR; }; 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = iNaturalistReactNative/AppDelegate.h; sourceTree = ""; }; 13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = iNaturalistReactNative/AppDelegate.mm; sourceTree = ""; }; @@ -108,6 +107,7 @@ D7AE5BDBC584A83878A04344 /* Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig"; sourceTree = ""; }; D8663889EABFBFC3077401E3 /* Pods-iNaturalistReactNative-ShareExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; + 2CFF1354495A49DEA8CEA670 /* INatIcon.ttf */ = {isa = PBXFileReference; name = "INatIcon.ttf"; path = "../assets/fonts/INatIcon.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -261,7 +261,7 @@ 3A9BAF07FCF24F668E2EF5AB /* Lato-Medium.ttf */, 69DF855D92EA4ADFB73B47F1 /* Lato-MediumItalic.ttf */, 4B0AEEF6CA584BCF9880EB35 /* Lato-Regular.ttf */, - 0E1D9B3B44B84541AFD0FBEC /* INatIcon.ttf */, + 2CFF1354495A49DEA8CEA670 /* INatIcon.ttf */, ); name = Resources; sourceTree = ""; @@ -398,7 +398,7 @@ 085DD3205807404CAFC32228 /* Lato-Medium.ttf in Resources */, E5DFC1C6FBFA45739CE91C69 /* Lato-MediumItalic.ttf in Resources */, AE4DC81B3A87484CB3FD6750 /* Lato-Regular.ttf in Resources */, - 8FFB0C4B23034426BE3DD441 /* INatIcon.ttf in Resources */, + 59925732D1464B6388BDAEB7 /* INatIcon.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json index a8ab8224e3..804be16bf5 100644 --- a/ios/link-assets-manifest.json +++ b/ios/link-assets-manifest.json @@ -3,7 +3,7 @@ "data": [ { "path": "assets/fonts/INatIcon.ttf", - "sha1": "0dabb1fdd2af1e0e98ec6636b7e035a2a9ba30de" + "sha1": "89474f5d4caf95704dfaf57d6155f39b9fe2c08a" }, { "path": "assets/fonts/Lato-Bold.ttf", diff --git a/src/components/Developer/UiLibrary.js b/src/components/Developer/UiLibrary.js index 277813ebfc..67cc2ceb1d 100644 --- a/src/components/Developer/UiLibrary.js +++ b/src/components/Developer/UiLibrary.js @@ -19,7 +19,6 @@ const ITEMS = sortBy( [ { title: "Buttons", component: "Buttons" }, { title: "Floating Action Bar", component: "FloatingActionBarDemo" }, { title: "Icons", component: "Icons" }, - { title: "Login/Signup LearnMore", component: "LoginSignUpLearnMoreDemo" }, { title: "Typography", component: "Typography" }, { title: "ObsListItem", component: "ObsListItemDemo" }, { title: "TaxonResult", component: "TaxonResultDemo" }, diff --git a/src/components/Developer/UiLibrary/LoginSignUpLearnMoreDemo.js b/src/components/Developer/UiLibrary/LoginSignUpLearnMoreDemo.js deleted file mode 100644 index 22d5128e8d..0000000000 --- a/src/components/Developer/UiLibrary/LoginSignUpLearnMoreDemo.js +++ /dev/null @@ -1,6 +0,0 @@ -import LearnMore from "components/LoginSignUp/LearnMore.tsx"; -import React from "react"; - -const LoginSignUpLearnMoreDemo = () => ; - -export default LoginSignUpLearnMoreDemo; diff --git a/src/components/Developer/UiLibraryItem.js b/src/components/Developer/UiLibraryItem.js index fdfec025dc..c377680182 100644 --- a/src/components/Developer/UiLibraryItem.js +++ b/src/components/Developer/UiLibraryItem.js @@ -6,7 +6,6 @@ import ActivityIndicatorDemo from "./UiLibrary/ActivityIndicatorDemo"; import Buttons from "./UiLibrary/Buttons"; import FloatingActionBarDemo from "./UiLibrary/FloatingActionBarDemo"; import Icons from "./UiLibrary/Icons"; -import LoginSignUpLearnMoreDemo from "./UiLibrary/LoginSignUpLearnMoreDemo"; import Misc from "./UiLibrary/Misc"; import ObsGridItemDemo from "./UiLibrary/ObsGridItemDemo"; import ObsListItemDemo from "./UiLibrary/ObsListItemDemo"; @@ -20,7 +19,6 @@ const LIBRARY = { Buttons, FloatingActionBarDemo, Icons, - LoginSignUpLearnMoreDemo, Misc, ObsGridItemDemo, ObsListItemDemo, diff --git a/src/components/LoginSignUp/Error.tsx b/src/components/LoginSignUp/Error.tsx index bebcf33428..cfd19bac5d 100644 --- a/src/components/LoginSignUp/Error.tsx +++ b/src/components/LoginSignUp/Error.tsx @@ -12,7 +12,19 @@ interface Props { const Error = ( { error }: Props ) => ( - + + {/* + Little bit of a hack to color the exclamation mark of the icon white. + The icon is a SVG of a triangle with a transparent exclamation mark in the middle. + So, I am adding a white background behind the center of the icon. + */} + + + {error} diff --git a/src/components/LoginSignUp/ForgotPasswordForm.js b/src/components/LoginSignUp/ForgotPasswordForm.js index a0426d4357..6197ebb8a8 100644 --- a/src/components/LoginSignUp/ForgotPasswordForm.js +++ b/src/components/LoginSignUp/ForgotPasswordForm.js @@ -2,6 +2,7 @@ import { useNavigation } from "@react-navigation/native"; import { + Body1, Button } from "components/SharedComponents"; import { View } from "components/styledComponents"; @@ -42,17 +43,21 @@ const ForgotPasswordForm = ( { reset }: Props ): Node => { return ( + + {t( "Lets-reset-your-password" )} + setEmail( text )} testID="Login.email" />