Refactor the Talawa connection URL string to the hamburger menu. Make the Talawa demo work without URL string.

[DMills27]

Is your feature request related to a problem? Please describe.
Having to enter a connection URL string in order to use Talawa is counterproductive; it requires one to setup the API or have it available somewhere to see the frontend's features and functionalities. We would much rather have the user be able to enter the app to get a look and free for it without having the API available.

Describe the solution you'd like
Have the user access the Talawa frontend and then give them an option to connect to an organisation via the hamburger menu, more specifically through the Join new organization option. The logic should allow the user to enter a connection string if they are not already connected to any org, as well as, allow them to sift through the different orgs they connected to on a separate page.

[Azad99-9]

@aashimawadhwa could you please assign this issue to me.

[Azad99-9]

@DMills27 , @palisadoes

Please check if i am in right track, correct me if i am wrong.

1. Changes in Login/Signup section:
   a. Remove the organization url section from login flow.
   b. Directly ask users to either register/login.

2. Changes in "Join organization" section from Hamburger menu:
   a. As soon as user clicks on - Join organization, from hamburger menu they will be navigated to a new page.
   b. This new page is current Join organization page and it will be modified to containing 2 sections.
   First Section: Enter URL of desired organization to join.
   Second Seciton: List of all organizations that the user has joined previously and he can
   switch between them from here easily.

Clarifications:

1. Will the organization feed left empty if the user is not associated with any organization initially.
2. Does each organisation has its own unique url (or) Single connection URL has one/multiple organizations linked with it.

[DMills27]

@Azad99-9 You've got it mostly correct. The step 1b is not needed at the moment. The app should just take the user to an unpopulated home page once loaded. In other words, there should be no authorisation when starting up the app, it should just take the user to a version of Talawa that has not pulled in any data from the API.

Clarifications:

1. Yes, the feed will be empty if the user is not affiliated with any org.
2. Each organisation has its own unique url.

[Azad99-9]

@Azad99-9 You've got it mostly correct. The step 1b is not needed at the moment. The app should just take the user to an unpopulated home page once loaded. In other words, there should be no authorisation when starting up the app, it should just take the user to a version of Talawa that has not pulled in any data from the API.

Clarifications:

1. Yes, the feed will be empty if the user is not affiliated with any org.
2. Each organisation has its own unique url.

follow up:

@DMills27 please have a look at above mongodb document of The Unity Foundation organization. if each organization has its own unique url then i would like to know why is the url not mentioned in the organisation's respective database document. And also i would like to know where can i access the organization's url.

Rightnow the organization url we are specifying at login time does not belong to any specific org but its the url of the api itself.

[Azad99-9]

@Azad99-9 You've got it mostly correct. The step 1b is not needed at the moment. The app should just take the user to an unpopulated home page once loaded. In other words, there should be no authorisation when starting up the app, it should just take the user to a version of Talawa that has not pulled in any data from the API.
Clarifications:

1. Yes, the feed will be empty if the user is not affiliated with any org.
2. Each organisation has its own unique url.

follow up: @DMills27 please have a look at above mongodb document of The Unity Foundation organization. if each organization has its own unique url then i would like to know why is the url not mentioned in the organisation's respective database document. And also i would like to know where can i access the organization's url.

Rightnow the organization url we are specifying at login time does not belong to any specific org but its the url of the api itself.

@palisadoes please have a look at above comment.

[palisadoes]

@Azad99-9 Please refer to this document: https://docs.talawa.io/docs/introduction/core-concepts#community

Each API instance handles a community or parent organization. All organizations would be affiliated with this parent. So for example. The parent could be the Indian Premier League Fan Club, and each organization would be the fan clubs of each team. Fans of multiple teams could become members of multiple team fan clubs.

So the URL is really a community URL, not an organization URL.

Start with the assumption that the Mobile App can store only one URL at a time. When we know that works as part of completing this issue we can focus on the Mobile App storing multiple community URLs as a separate issue.

We'll need to change the terminology in the App to community URL and eventually alter it in the other repositories.

[Azad99-9]

@palisadoes the above information was really helpful and understood.👍

[Azad99-9]

@palisadoes , @DMills27 i have implemented the feature and made multiple UI changes in the app that were demanded by the feature. Now how can I share you the apk so that you can review the changes and give me feedback for any modifications.

[palisadoes]

1. Please add a video to show what you've done proving that the app will work without the URL.
2. Make sure that it is obvious that it's in demo mode with a clear option to add a real URL. This does not have to be visible in every screen.

@Ayush0Chaudhary This should interest you.

[Azad99-9]

@Ayush0Chaudhary , @palisadoes , @DMills27

please have a look at the demo video and let me know if any modifications.

flow_demo.mp4

[Azad99-9]

when the customalertdialog appears saying that "please login to make a post" if the user clicks on login he will be navigated to the seturl screen and the login/signup flow takes over from there and the same applies to all the remaining user specific actions like donation, adding event etc. Prompting the user to login/signup to use the app in a full pledged mode.

[palisadoes]

Thanks. I have a list of comments, please take them as constructive criticisms.

The UI/UX here doesn't clearly show that this in demo mode. Nor does it give an indication of where to go to set it up the properly. We need an intuitive interface for that

[palisadoes]

Similarly here. There isn't a way to show that this is a demo mode. A transient informational popup with translated text maybe? An overlay? A Footer? Do you think this or any other approach is most appropriate, if not what alternative do you suggest?

[palisadoes]

Same here. It needs to be clearly understood that this is a demo and what the steps should be to remedy it.

[palisadoes]

Screens like this occur when an action is attempted. Can you make the left drawer appear temporarily to make it clearer?

[Azad99-9]

@palisadoes i am glad that you have suggested some changes.

One straight forward way would be showing a thin banner on top of navigation bar in every page, mentioning the prompt messages like
for example:

1. "For complete access, please log in."
2. "Login to unlock all app functions."
3. "For the full experience, please log in." etc

by clicking on this banner user can directly go to community url page.

I would like to know your thoughts on this approach.

[palisadoes]

1. That could work. I've asked @DMills27 for comment.
2. Remember that we will need to have 100% test code coverage for all the files you edit in the PR for this issue

[DMills27]

I agree with Peter's suggestions. Additionally, I think you need to make it clear that there's a distinction between logging in and joining an organisation. The video you posted suggests that they are somewhat synonymous in the initial steps when this is not the case. It would be better to prompt the user for an organisation url string then segue to the login screen to make this clear. That is, instead of the 'login' in the hamburger menu it should be 'join a new organisation'; the login option should not appear in the hamburger menu at all. After the user has joined an organisation by inputting an organisation url string they should be prompted to login in the stage after that and subsequently after that they should only have the option to sign up for other organisations they wish to join if they have the requisite connection string. This would make the transitions more logical.

[Azad99-9]

Remember that we will need to have 100% test code coverage for all the files you edit in the PR for this issue.

yeah noted.

[Azad99-9]

The video you posted suggests that they are somewhat synonymous in the initial steps when this is not the case.

Previously I chose to place the "Login" option in the hamburger menu instead of the "Community URL" is because of the reason users might not immediately grasp the organization's structure within our app. Initially, they are more likely to search for a login or signup option. However, I've reconsidered, and I will now replace the "Login/Signup" section with the "Community URL" option.

After the user has joined an organisation by inputting an organisation url string they should be prompted to login.

yeah this is already implemented and will be left as it is.

subsequently after that they should only have the option to sign up for other organisations they wish to join if they have the requisite connection string.

@DMills27 for this part, Currently, we lack unique connection strings for each organization. Therefore, following the suggestion from @palisadoes, our focus will be on entering a sole parent community URL that links to a singular API instance to address this matter for now. At this stage, we'll enable users to switch between the organizations existing within the parent community.

[Azad99-9]

Screens like this occur when an action is attempted. Can you make the left drawer appear temporarily to make it clearer?

@palisadoes i will trigger the left drawer(hamburger menu) whenever a user specific action is performed.

[Azad99-9]

better approach would be prompting the user to enter a community url by focusing on the join organization button from hamburger menu. Letting the user decide to continue the demo mode or join a community.

The UI would look similar to the above image.

@palisadoes , @DMills27 what are your thoughts?

[DMills27]

@Azad99-9 What you're describing is called a 'feature tour' and it's the right idea. Ideally you want some functionality within the app to guide the user to what options are available within it. Rather than prompting the user to enter a community you should have different silhouettes centred about the buttons/menus the user can use to guide them as to how they can add their organisations. Note you should have the option for the user to opt out of the feature tour if they want.

[Azad99-9]

@palisadoes , @DMills27 In the demo video I shared, I utilized the approach conditional UI rendering based on the user.loggedIn attribute for displaying demo-specific widgets. While this approach worked, as the code expanded, it started to become cumbersome.

So I am considering to define new Demo routes to render these Demo widgets which would be a more elegant solution. This way we can conditionally navigate to the desired-mode and keep them seperate.

I welcome any better solutions to handle this scenario, from you side.

[DMills27]

@Azad99-9 The demo routes idea seems fine. Can you come up with a basic implementation and the post the video recording here? Nothing too fancy we just need to see if you got the gist of what needs to be implemented.

[Azad99-9]

@DMills27
I will send the video right after this clarification.
Certainly, the complete app tour has already been implemented and it comes right after first time user signup (in user mode). So for the demo mode, should I solely guide users through the organization joining process?

Moreover, considering our recent segmentation of the app into demo mode and user mode, would it be more suitable to relocate the app tour to the demo mode, initiating it when users first launch the app? I guess this makes more sense.

[Azad99-9]

@palisadoes , @DMills27 please have a look at the demo video and let me know if any modifications.

select-organization-feature_oR4cEGJY.mp4

[DMills27]

@Azad99-9 For the most part it looks good! I only have some very minor nitpicks such as the speed as to which the various components are being zoomed into. Good job!

[Azad99-9]

thanks @DMills27 .

[Azad99-9]

is it ok additionally should i enhance any part of it apart from the speed as you have mentioned.

[palisadoes]

is it ok additionally should i enhance any part of it apart from the speed as you have mentioned.

@Azad99-9 Please create a PR for this and ask @DMills27 and @Ayush0Chaudhary to review it. Include a link to your most recent video. The final details can be discussed there.

[Azad99-9]

Sure @palisadoes , I have some tests left for the code i changed after writing them I will raise the PR.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.