#5

Create all the screens for password reset flow, along with all the new inputs

• password reset screens
• special 6digits code input

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

• create reusable Modal component
• component should take visible props along with toggle func prop to trigger its visibility
• modal should have the opaque backdrop
• *you can animate the modal on mounting and unmounting (fade in or slide in like transitions)

You 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 ❤️

Holidaily_Assets_Tab-bar.zip

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 :)

Holidaily app icon.zip

Edit:
(from easyappicon.com)

holidaily_app-icon.zip

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

• This and this is mandatory
• clicking

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

• the mutation is retrigger_account_confirmation (using it will trigger an email send to the provided recipient)

We need to tweak the look of the buttons on iOS (see: pics)

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.

Figma-Holidaily

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.

• we can pass keyboardType to the CustomInput

• As a user, I want to distinguish which input is focused as I type my personal data.

In 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

https://reactnavigation.org/docs/bottom-tab-navigator/

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:

• create firebase dev project
• create firebase staging project
• create firebase prod project
• install necessary library and set up the mobile app to connect with firebase project based on the current environment

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:

• create AASA file
• create assetlinks.json file
• setup iOS native code (Capabilities + URL Schemes)
• setup Android (Intent filters)
• setup linking in NavigationContainer in RN app
• host AASA and assetlinks.json files at ./well-known at Holidaily domain

Initially, 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)

• create login screens UI
  MOCKUPS

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 onboard

Slider has to

Title

MOCKUP

• to do 1
• todo

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:

• Name and company name with at least one word,
• E-mail address input with @ and a domain,
• Password input with at least one capital letter, one number, and one special character

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

• change nav bar on android to be white
• *in the future, "dynamic"? - so it changes along with dark/light mode

As shown in wireframes, please add the circle "add" button.
Press on the button should open full screen modal from react-navigation v5 (stack navigator, mode="modal")

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)

• user register along with creating an organization
• user receives an email with activation link
• user click activation link
• app opens thanks to linking on an appropriate screen with a loader
• in the background, the app gets the token from the URL and makes a request to the backend with it

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

• send requests to the backend to log in and receive back the access token
• check if user is confirmed (has clicked the confirmation email sent via email)
• let user in only when confirmed, if not, display appropriate info screen based on mockups
• store access token in a secure storage (react-native-secure-storage library, do not use react-native-async-storage)

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.

• Changing Profile Picture
  After clicking on Change profile picture I want to have the ability to take a selfie or choose a photo from my gallery.

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.

• Deleting profile picture
  After clicking on Delete profile picture, there should appear a modal with "Are you sure..." text, and primary and secondary buttons.

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.

https://reactnavigation.org/docs/drawer-based-navigation/

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