thewidlarzgroup / holidaily Goto Github PK
View Code? Open in Web Editor NEW๐ดโ๏ธ๐ดโ๏ธ๐ด
๐ดโ๏ธ๐ดโ๏ธ๐ด
Create all the screens for password reset flow, along with all the new inputs
Severity: Minor
Priority: Medium
Description of an issue: text in Input is not vertically centered
How it should work: text should be vertically centered
Platform: iOS
Device: simulator
As a user I want to have some information presented in form of a modal
UI in figma
Modal
componentvisible
props along with toggle
func prop to trigger its visibilityYou can base it either on regular RN Modal, ro Modal component from react-native-community
. There is also one from react-native-paper
.
Note that when using RN or react-native-community modal, the gesture handlers from react-native-gesture-handler
will probably not work on Android (unless it has changed since last months, there is one HOC function that can be imported from gesture-handler library, but I could not make it work myself in the project this way :no-evil:) and we would have to use some kind of Portal
from e.g. react-native-paper
to fix it.
Please swap tab bar icons into these new ones :)
I love tab bar's ellipses animation โค๏ธ
Please create the global user context, where user data from me/login/signup endpoint is kept.
Please use context pattern from hooks museum.
As a developer, I want to have post-install script that automatically install Pods in the iOS directory
Here you've got the first version of app icon :)
Edit:
(from easyappicon.com)
As a user I want to add my profile picture.
In order to do so, after clicking the profile placeholder or a text button "Add profile picture", I want to have the ability to take a selfie in the app or choose a photo from the phone gallery.
The modal should slide from the bottom of the screen with an ease out effect, 300 ms.
After clicking on the "Take a selfie" text button and icon, I want to launch my camera and take a selfie
After clicking "Choose from gallery" text button and icon, I want to go to my phone gallery.
Error modals are grey :)
Here you've got two illustrations for error modals:
Illustrations_error_2021-04-13.zip
Setup absolute paths for the main folders of the project.
For example instead of this:
import x from "../../../utils/changeLanguage.ts"
we should be able to import things like this:
import x from "Utils/changeLanguage.ts"
Each button and clickable element should have left the visual indicator that was clicked.
For android buttons please use inbuilt RippleEffect
The rest should have at least changed opacity
when pressed
Please get inspired by docs:
https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/buttons/
https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/touchables
As a user I want to be able to login to the app while also creating the organization. All in one form
After the onboarding slider, please change blank screen (hello guest) to the "How would you like to sign in" screen (with the "log in" text button, as shown in Figma) :)
https://www.figma.com/file/LrAhsnwm7ZdUQPnKfjxfjz/Holidaily?node-id=8%3A691
retrigger_account_confirmation
(using it will trigger an email send to the provided recipient)When firing up the app on iOS, the i18n outputs errors and app does not work
It seems to be cause by
const locale =
Platform.OS === 'ios'
? NativeModules.SetttingManager.settings.AppleLocale
: NativeModules.I18nManager.localeIdentifier
in i18n.js
Ti fix it, I guess we need to come up with another way of telling the locale for iOS :)
As an already registered user, I want to log in to my account one more time (after uninstalling the app or changing the device).
I want to accomplish this by clicking the "Log in" button on the first screen after onboarding.
Out custom TextInput should also take all the RN Text Input props and pass them to the wrapped TextInput in our Custom Wrapper :)
E.g.
keyboardType
to the CustomInputIn order to do so, please add a black (inside) stroke (2 px) in a focused input state, as shown below:
https://www.figma.com/file/LrAhsnwm7ZdUQPnKfjxfjz/Holidaily?node-id=16%3A323
Error input state: please change the distance between the input and an error text for 4 px.
Password input: please change the visibility icon to the "eye-closed" in the default state.
As shown below:
https://www.figma.com/file/LrAhsnwm7ZdUQPnKfjxfjz/Holidaily?node-id=110%3A2
Please add Bottom Navigation as shown in the Home Screen wireframe
In order to use push notifications in the future in a less complicated manner (from BE and mobile perspective as well) let's use firebase cloud messaging.
In order to do so, we need to:
This will make the password recovery path almost finished.
The confetti feature should start automatically when the user was signed up or logged in successfully, as well as when the user opens a modal/screen with an approved day off request (from notifications).
Welcome onboard modal: https://www.figma.com/file/LrAhsnwm7ZdUQPnKfjxfjz/Holidaily?node-id=134%3A249
Modal with an approved request is in progress.
Confetti lib:
https://www.npmjs.com/package/react-native-confetti-cannon
When we launch the app we should be presented by Intro Slider flow.
Slider flow consists of 4 screens. Each screen has dots that indicate position.
The slider should be animated by Reanimated2. We can navigate by swiping.
Below how it should work ๐
https://www.youtube.com/watch?v=XmEFmR4SBP0
Figma link:
https://www.figma.com/file/LrAhsnwm7ZdUQPnKfjxfjz/Holidaily?node-id=0%3A1
Assets and illustrations:
Holidaily_Assets.zip
Holidaily_Slider_Illustrations.zip
As a user, I want to swipe left and move from the last screen of the onboarding slider to "How would you like to sign in" screen.
As a user I want to edit my profile.
In order to do so, after tapping on Edit Profile icon (as well as the text button) on the User Profile screen, I want to go to the Edit Profile screen.
As a user I want to edit my full name and a role in Edit Profile screen.
In order to do so, after tapping an input or an edit icon I want to write a different text.
After tapping, the input should also be active visually - this means a 2px black outline stroke inside the input.
If changes have been made, a CTA button should appear in order to save them.
After clicking the CTA button, a modal with an animated check button should slide in from the bottom of the screen, and slide back down after 3 sec. The user can close this modal faster by clicking check mark or swiping down.
As a user I want to go to the user profile.
In order to do so, after swiping from left to right or clicking the user profile picture on the home screen, I want the user profile screen to appear.
The home screen, except for the profile picture, should move to the right side and get smaller.
The user profile screen should appear, as if it was hidden underneath the home screen. Please add a resizing animation (decreasing, when going from home screen to the user profile and increasing, when going from user profile to the home screen).
It would be nice if the profile picture would stay in the same position, "detached" from the home screen.
It should work similar to the one below:
In order to synch the app with our Holidaily domain (and have an option to open the app with links) we need to:
linking
in NavigationContainer
in RN app./well-known
at Holidaily domainInitially, we need to sync only the account confirmation path and password reset path
As a user I want to be able to log in to the up.
In order to do so, I need to receive an invitation prior to the logging in or sign up as a organization first (will be implemented in the future)
As a user, I want to create a user account after receiving a link.
In order to do so, after clicking the link I want the app to open (or inform me that I have to download it), and complete the sign-up form with a name, surname, and password.
My e-mail address is already on the sign-up screen.
As a user, I want to create a user account using an e-mail address.
In order to do so, I want to complete the sign-up form with an e-mail address, name and surname, company name, and password.
Each input has its own compulsory letters or special characters. If these are not entered, inputs should inform about an error.
Correct completing the form:
Each error should appear, just after the input state is changing from "focus" into "filled".
After clicking the CTA button in the sign-up form, the button should change from a regular state to a tick in a circle
Below how it should work:
As an android user, I want to have the navigation bar to match the white theme of the app
As a user I want to be able to confirm my account.
In order to do so, I want to receive an email after the sign up with a link to the activation.
Link should be synced with app (universal links/app links) and trigger the app open. It should also contain an activation token and email address in url params.
Inside the app, a proper loading screen should show. In the background, the mutation for account confirmation should be invoked, with the aforementioned token and email.
Flow (for now only happy path - user on mobile with app installed, we also should have a fallback solution on web, but web version is not in the scope for now)
Buttons should animate from default to pressed state in 200 ms with ease out effect (starts quickly and decelerates). If the ease-out effect is too complicated or time-consuming then go linear.
Below how it should work:
As a user I want to be able to log in to the app
First, UI has to be finished, task :#23
And probably also this as we want to handle the confirmation in-app #1
confirmed
(has clicked the confirmation email sent via email)Please create a .env
file for storing API keys and sensitive data.
As a result of this task, we have a .env
file, which is not uploaded to Github.
Please put the server address there, as we use different for dev and prod.
Example content of .env
file:
API_URL=https://api.example.org
API_TOKEN=abc123
When we launch the app we should be presented by Intro Slider flow.
Slider flow consists of 4 screens. Each screen has dots that indicate position.
The slider should be animated by Reanimated2. We can navigate by swiping.
Below how it should work ๐
The inspiration comes from this video
As a user I want to change or delete my current profile picture.
In order to do so, after clicking on "Edit profile picture" text button, there should appear a modal with "Change profile picture" text button and icon and "Delete profile picture" text button and icon.
The modal should slide from the bottom of the screen with an ease out effect, 300 ms.
In order to do so, there should appear a modal with a text, "Take a selfie" text button and icon, and "Choose from gallery" text button and icon.
After clicking "Yes", the CTA button should animate to a check mark.
Please add Drawer Navigation when swiped from the left and when a user profile image is clicked.
Please change the dimensions (and padding) of "Log in with... " buttons.
As shown below:
https://www.figma.com/file/LrAhsnwm7ZdUQPnKfjxfjz/Holidaily?node-id=8%3A691
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.