linagora/esn-frontend-contacts

Contacts SPA for the OpenPaaS Suite - https://open-paas.org/

esn-frontend-contacts

Contacts application for OpenPaaS

Development

Configuration

First, you want to ensure that the application grid component is provided with the necessary information about the apps via the environment variable APP_GRID_ITEMS:

cp .env.example .env

• APP_GRID_ITEMS: A stringified JSON representation of the apps to show in the application grid. It has the following shape:

  [
    { "name": "Inbox", "url": "http://localhost:9900/#/unifiedinbox/inbox" },
    { "name": "Calendar", "url": "http://localhost:9900/#/calendar" },
    ...
  ]

Then, launch the dev server on http://localhost:9900:

OPENPAAS_URL=https://dev.open-paas.org npm run serve

• OPENPAAS_URL: The OpenPaaS URL to be used by the current SPA application. Defaults to http://localhost:8080.

The development server can also be used to serve minified SPA to check that everything is OK:

OPENPAAS_URL=https://dev.open-paas.org npm run serve:prod

Authentication

Authentication is provided by a dedicated SPA esn-frontend-login-app which is defined in the project devDependencies. In order to make it work with the webpack-dev-server launched by the npm run serve command, you will have to generate it like this:

cd ./node_modules/esn-frontend-login && npm install && npm run build

Serve

Go to http://localhost:9900/contacts/ to open the SPA

Build

Generates minified SPA in the ./dist folder:

npm run build:prod

Regarding APP_GRID_ITEMS, you can also provide it as a system variable for production purposes, e.g.:

APP_GRID_ITEMS="[{ \"name\": \"Calendar\", \"url\": \"https://dev.open-paas.org/calendar/\" }, { \"name\": \"Contacts\", \"url\": \"https://dev.open-paas.org/contacts/\" }, { \"name\": \"Inbox\", \"url\": \"http://dev.open-paas.org/inbox/\" }, { \"name\": \"Admin\", \"url\": \"https://dev.open-paas.org/admin/\" }, { \"name\": \"LinShare\", \"url\": \"https://user.linshare-4-0.integration-linshare.org/\" }]" npm run build:prod

Running tests

You can run tests by executing the following command:

npm run test

Note that there is a 10000ms timeout by default. If you want to change that, simply pass the TEST_TIMEOUT environment variable:

TEST_TIMEOUT=2000 npm run test

esn-frontend-contacts's Issues

davproxy connection do not have global HTTP headers

This is required for a working OIDC connection.

Collected contact book isn't valid

Actual Result

Collected contact is a default addressbook. It is displaying with an invalid icon and unable to open its setting.

Expected result

Collected contact addressbook should be valid

---

DoD:

The Collected contact should have an icon and we can open its Settings

Production bug: unable to update contact

Tested on Chrome/Firefox
Environment: openpaas.linagora.com

Steps:

1. Create a contact

2. Edit the above contact

3. Hit Save

4. Wait 10 seconds

5. Reload the page

Expected result:

The contact contains the updated information

Actual result:

The contact does NOT contains the updated information

DAVx5 > Cannot login by using Production account on DAVx5

Actual Result

Returns error message dialog

<d:error xmlns:d="DAV:" xmlns:s="http://sabredav.org/ns">
<s:sabredav-version>3.2.2</s:sabredav-version>
<s:exception>Sabre\DAV\Exception\NotAuthenticated</s:exception>
<s:message>Username or password was incorrect. Login was needed for privilege: {DAV:}read on </s:message>
</d:error>

Expected Result

User should be able to login DAVx5 by Production Account

The label of input field in the dialog to create a new addressbook is broken

Current behaviour

The label doesn't move away when the user is typing or has typed some text:

Expected haviour

The label should move to the top of the input field.

Explicit dependencies

Details here

Optimize dependencies

Put mouse over a contact displays an ugly tooltip

Expected

TBD: Display nothing or display the user popover

Translation/Collected contact list is not translated

[STORY] Display the address book configuration screen in a dialog

User story summary

1. Related epic
2. Definition
3. Criteria
4. UI/UX Design
5. TASKS

Related epic

Synchronize Contacts' UI/UX with Calendar's

Definition

As a user, I want the address book configuration screen to display in a dialog on desktop.

• I login and go to Contacts
• Then I select "Settings" in an address book
• Then the address book configuration should be displayed in a dialog

Criteria

• The address book settings screen should display inside a dialog.
• The dialog should stand out from the rest of the viewport (as seen in the screenshots below).
• The address book's name and its icon is displayed first in the body of the dialog.
• The "Save" and "Close" buttons will be at the bottom of the dialog.

UI/UX Design

1. [Desktop] The main "Address book settings" screen:

2. [Desktop] The "Address book settings" dialog:

TASKS

create/modify the route state for the address-book settings

change the address book configuration template to be a modal

[OPTIONAL]

move the name edit and delete button into the configuration screen

Fix i18n

As explained here, some translations need manual fixings:

In the task changing pug i18n calls __() with angular translate {{ 'thing' | translate }}
The expression
#{__('Address book %s will be deleted along with its contacts.', '{{::$ctrl.addressbookDisplayShell.displayName}}')}
will be replaced by
{{ 'Address book %s will be deleted along with its contacts.' | translate:$ctrl.addressbookDisplayShell.displayName }}

That will not work. The code should be updated to use Angular Translate way of passing arguments
See https://angular-translate.github.io/docs/#/api/pascalprecht.translate.filter:translate
File: /home/mbailly/work/openpaas/git/esn-spa-converter/src/linagora.esn.contact/app/addressbook/delete/addressbook-delete.pug

---------------------------------------------
In the task changing pug i18n calls __() with angular translate {{ 'thing' | translate }}
The expression
#{__('Export your contacts in "%s" to vCard format file (.vcf) that you can import to other applications.', '{{::$ctrl.addressbookDisplayShell.displayName}}')}
will be replaced by
{{ 'Export your contacts in "%s" to vCard format file (.vcf) that you can import to other applications.' | translate:$ctrl.addressbookDisplayShell.displayName }}

That will not work. The code should be updated to use Angular Translate way of passing arguments
See https://angular-translate.github.io/docs/#/api/pascalprecht.translate.filter:translate
File: /home/mbailly/work/openpaas/git/esn-spa-converter/src/linagora.esn.contact/app/addressbook/export/contact-addressbook-export.pug

Followed members address book is not shown

Steps to reproduce:

1. As admin, enable Followed member address book in adminstration
2. User go to https://dev.open-paas.org/contacts/
3. Check if Followed member is shown in the left menu under Directory section

Expected result:
Followed members is listed in Directory. When user clicks on Followed members, the list of followed members is shown on the right panel

Actual result:
Followed member address book is not in the left menu

---

EDIT:

So we will need to remove everything related to follow in modules admin, contacts, ...

[STORY] Edit an existing contact in a dialog

User story summary

1. Related epic
2. Definition
3. Criteria
4. UI/UX Design
5. Tasks

Related epic

Synchronize Contacts' UI/UX with Calendar's

Definition

As a user, I want to be able to edit an existing contact in a dialog on desktop.

• I login and go to Contacts
• Then I choose to edit an existing contact
• Then the content used to edit an existing contact should display in a dialog

Criteria

• The content used to edit an existing contact should display in a dialog
• The dialog should stand out from the rest of the viewport (as seen in the pictures below).
• The header of the dialog is named "Edit contact" and has a "X" icon button to close the dialog.
• The body of the dialog will have the following fields (they will also appear in the following order):
  • Address book selector
  • Avatar, first name, and last name
  • Organization, job title
  • Email, type of email (can add more than one email with a "+" button)
  • Phone, type of phone (can add more than one phone number with a "+" button)
  • Street, type of address, city, city's zip code, country (can add more than one address with a "+" button)
  • Tags
  • Website (collapsible, can add more than one website with a "+" button)
  • Social account, type of social account (collapsible, can add more than one website with a "+" button)
  • Birthday (collapsible)
  • Nickname (collapsible)
  • Comments (collapsible)
• There are a "More options" button and a "Save" button at the bottom of the dialog.
  • The "More options" button will display all the collapsible fields mentioned above. And afterwards, there will be a "Fewer options" to hide those fields again.
  • The "Save" button is used to save the contact.

UI/UX Design

1. [Desktop] The main "Edit contact" screen:

2. [Desktop] The "Edit contact" dialog:

3. [Desktop] The "Edit contact" dialog with the collapsible fields shown:

Tasks

adapt the contact edit template

adapt or create the route state of the contact edit dialog

Translation/Copy contact popup should be in French instead of Chinese

When an address book is delegated to a user, it should be automatically be added to the "Shared address books" of that user

Steps to reproduce

As User A:

• Go to Contacts
• Delegate one of my address books to User B

As User B:

• Go to Contacts

Current behaviour

User B still does not see the delegated address book in the "Shared address books" list. He will have to manually add the address book via the "Add shared address book" button.

Expected/Suggested behaviour

The delegated address book is automatically added to the list of "Shared address books" of User B without him having to manually add it.

OPENPAAS_URL selection algorithm

Here:
https://github.com/OpenPaaS-Suite/esn-frontend-contacts/blob/main/src/linagora.esn.contact/app/contact/contact.service.js#L149

What does process.env.OPENPAAS_URL means in a frontend ?

The selection algorithm should use window.location to detect the website base url

Cannot import contact from a file

Reason

/linagora.esn.dav.import/api is missing in the list of devServer proxies

Fix templates import

As explained here, check that the frontend does not call the backend to get templates.

In the task moving from "templateUrl: string" to "template: require('pugfile')"

The templateUrl has not been changed for path /contact/app/search/contact-search.html. This would break application.
BoxOVerlay system should support "template" attriute before updating this line.

---------------------------------------------
In the task moving from "templateUrl: string" to "template: require('pugfile')"

The templateUrl has not been changed for path /contact/app/search/contact-search.html. This would break application.
BoxOVerlay system should support "template" attriute before updating this line.

[i18n] inject translations

Details here

The avatar and the name in a contact card are not aligned properly

Current behaviour

The avatar and the name in a contact card are not aligned properly.

Expected behaviour

The avatar and the name in a contact card are aligned properly (vertically centered).

CORS issue when SPA and backend API are on different origins

• If we set withCredentials: true:

Access to XMLHttpRequest at 'http://localhost:8080/dav/api/principals/users/5f2d39943d95095cf22477a5' from origin 'http://localhost:4000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

• If we don't set withCredentials: true:

GET http://localhost:8080/dav/api/addressbooks/5f2d39943d95095cf22477a6.json?contactsCount=true&inviteStatus=2&personal=true&shared=true&subscribed=true 401 (Unauthorized)

[STORY] Display a contact's details in a dialog

User story summary

1. Related epic
2. Definition
3. Criteria
4. UI/UX Design
5. Tasks

Related epic

Synchronize Contacts' UI/UX with Calendar's

Definition

As a user, I want the details of a contact to display in a dialog on desktop.

• I login and go to Contacts
• Then I choose to view the details of a contact
• Then the details of the contact should be displayed in a dialog

Criteria

• The details of a contact should display inside a dialog.
• The dialog should stand out from the rest of the viewport (as seen in the screenshots below).
• The content of the dialog should follow the UI/UX design below (see Picture 2).

UI/UX Design

1. [Desktop] The main "Contact details" screen:

2. [Desktop] The "Contact details" dialog:

Tasks

the route state for the contact dialog

create a new display dialog template

Add favicon

Adapt new version of esnI18nService.translate method to fix translation

Topic: linagora/esn-frontend-common-libs#83

Reference PR: linagora/esn-frontend-inbox#54

Translation > Tabs name are not translated

Actual Result

1. The tab name for each module should be translated for corresponding languages since it's always English.

2. Account's tab name is "OpenPaas". It should have specìied name such as account, profile (and should be translated)... and also the tab's icon.

Display shared address books with the owner of the address book in the address book selector

Steps to reproduce

• Go to Contacts
• Make sure you have a shared address book with write permission
• Now choose to create a new contact
• Open the address book selector

Current behaviour

The shared address books in the selector are only dislayed with their names. This makes it confusing for users in case when there are multiple shared address books with the same name.

Suggested behaviour

The shared address books in the selector should be displayed with their names and the names of their owners like this: "My contacts - John Doe1".

After created, user need to refresh the page to see a new addressbook

Actual Result

Expected Result

After creating a new addressbook, it should display in the sidebar menu without page refreshing

A user can still share his address book in the address book settings page although address book sharing is disabled

Steps to reproduce

As a domain admin:

• Go to the Admin module
• Disable address book sharing

As a user:

• Go to the Contacts module
• Select an address book and open the settings page

Expected behaviour

All the content related to address book sharing/delegation should not be displayed.

Current behaviour

The content related to address book sharing/delegation is still displayed and the user can still share his address book.

Translation: Subscribe address book popup is not in the right language

when the language is Russia, popup is displayed in Chinese:

When the selected language is Vietnamese, popup is displayed in English

When selected language is French, popup is displayed in Chinese

Unable to subscribe to shared address book

Steps to reproduce:

1. Go to https://dev.open-paas.org/contacts/
2. Click (+) button on the left menu and select "Shared address book" option

Expected result:
"Shared address book" popup is displayed and user can search for other users and select address books to subscribe

Actual result:

There is no field to search for user

Linked PR: linagora/esn-frontend-common-libs#100

Group common files with admin spa in contacts-libs

config template in modules management require files from contact spa

remove config files

Unable to share address book by delegation

Steps to reproduce:

1. Go to settings of a certain address book
2. Select Delegation tab

Expected result:
User should be able to input user to share with and select permissions

Actual result:
There is no field to input user to share with

remove the follow module from esn-frontend-contacts

Mobile > Existing issues on Gitlab

This is the list of exíting issues on Gitlab. Please notice and fix them:

1. Mobile > Edit contact > User cannot exit from edit contact form by click back button or (x) button
https://ci.linagora.com/linagora/lgs/openpaas/linagora.esn.contact/issues/539

Mobile/Tablet > Cannot upload a profile picture when creating a new contact

Actual Result

When tap to "add a profile picture" button, nothing happens

Expected result

It should be able to upload a profile picture

Environment

• Mobile: iphone 7
• Tablet: ipad air 2

Display a splashscreen while assets are loading

resgister the contactRestangularService to the global httpConfigurer

Unable to synchronize contacts in some specific address book to iphone

Please refer to https://ci.linagora.com/linagora/lgs/openpaas/esn-sabre/issues/67.

[TASK][address book configuration screen] change the adressbook configuration template to be a modal

STORY

TODO:

• wrap the current template into a modal, the modal structure could be:

.modal
  .modal-dialog
    .modal-content
      .modal-header
        button.close
        title
      .modal-body
          content <- this is the old template
      .modal-footer.flex
          button <- some save button
          button <- mayeb a close button?

• remove the contactAddressbookSettingsSubheader directive and its files ( src/linagora.esn.contact/app/addressbook/settings/contact-addressbook-settings.pug etc ..)
• handle the dialog close and save button handlers and keeping in mind the previous state of the app:
  • when I click on the close button what should happen and what state should I go back to?
  • same for the save button

Translation > Get shared contact dialog has not been translated

Actual Result

Get shared contact dialog has not been translated into other languages. It's always English

Expected Result

It should be translated into the corresponding languages.

Steps

1. Navigate to Contact module
2. Click here
   

[TASK][address book configuration screen] create/modify the route state for the address-book settings

STORY

TODO:

• update the existing route (contact.addressbooks.settings view main@contact ) or create a new route state ( ie /edit/:addressbookId )
• inject the settings component with the $modal into the scope when entering the state
• hide the dialog when leaving the state
• pass the previous state as params to the state
• load the addressbook from the $stateParams in the component controller ( ie from $stateParams.addressbookId )
• make sure that the configuration dialog can be accessed via a URL
• make the settings button go to the new state $state.go('example'):
  • you can use contactAddressbookActionSettings._goToSettingsPage ( or adapt )

There is no loading indicator when contacts are being loaded

Steps to reproduce

• Login and go to Contacts
• Select an address book

Current behaviour

While the contacts in the selected address book are being loaded, a blank page is shown with nothing to indicate that the contacts are being loaded.

Expected behaviour

While the contacts in the selected address book are being loaded, there should be an OpenPaaS loading spinner at the center of the section to display contacts.

DAVx5 cannot synchronize Domain Member Addressbook on Samsung Note

Environment

Production
Samsung Note 9, Note 10 - Androids 10

Actual Result

DAVx5 cannot synchronize the Domain Member Address book on Samsung Note. It displays an error log on Control Center "Authentication failed".

Expected Result

Please investigate.
Domain Member Addressbook should be synced successfully on Samsung Note 9, 10

UI/Create new address book/Placeholder is still shown when user inputs the address book name

See screenshot

Order of the address books on Mobile vs on Desktop are different.

Actual Result

Address books order on the mobile and desktop are different.

On Desktop:

On Mobile:

Expected result

On the mobile and on the desktop, address book order should be consistent.

Environment

• Desktop: Chrome Ubuntu
• Mobile: iphone 7

[EPIC] Synchronize Contacts' UI/UX with Calendar's

Stories

• Display the address book configuration screen in a dialog: #95
• Display a contact's details in a dialog: #92
• Create a new contact in a dialog: #94
• Edit an existing contact in a dialog: #93

Demo :(PLZ DO NOT update this section the links is used in the sprint demo)
https://images.zenhubusercontent.com/278394200/b3637f59-358f-47a8-8015-3b63a0672b97/fulldemo3.mp4

[STORY] Create a new contact in a dialog

User story summary

1. Related epic
2. Definition
3. Criteria
4. UI/UX Design
5. Tasks

Related epic

Synchronize Contacts' UI/UX with Calendar's

Definition

As a user, I want to be able to create a new contact in a dialog on desktop.

• I login and go to Contacts
• Then I choose to create a new contact
• Then the content used to create a new contact should display in a dialog

Criteria

• The content used to create a new contact should display in a dialog
• The dialog should stand out from the rest of the viewport (as seen in the pictures below).
• The header of the dialog is named "Create new contact" and has a "X" icon button to close the dialog.
• The body of the dialog will have the following fields (they will also appear in the following order):
  • Address book selector
  • Avatar, first name, and last name
  • Organization, job title
  • Email, type of email (can add more than one email with a "+" button)
  • Phone, type of phone (can add more than one phone number with a "+" button)
  • Street, type of address, city, city's zip code, country (can add more than one address with a "+" button)
  • Tags
  • Website (collapsible, can add more than one website with a "+" button)
  • Social account, type of social account (collapsible, can add more than one website with a "+" button)
  • Birthday (collapsible)
  • Nickname (collapsible)
  • Comments (collapsible)
• There are a "More options" button and a "Save" button at the bottom of the dialog.
  • The "More options" button will display all the collapsible fields mentioned above. And afterwards, there will be a "Fewer options" to hide those fields again.
  • The "Save" button is used to create the contact.

UI/UX Design

1. [Desktop] The main "Create new contact" screen:

2. [Desktop] The "Create new contact" dialog:

3. [Desktop] The "Create new contact" dialog with the collapsible fields shown:

Tasks

adapt the new create contact template dialog

adapt or create the route state of the new contact dialog

Missing CardDAV URL in the Address Book Setting

Actual Result

CardDAV URL is not displaying in the Addressbook Settings screen

Expected result

CardDAV URL should display.

Environment

Desktop Ubuntu

Setup tests

The aim is to make unit tests runnable

Topic: linagora/esn#11

Sample PR: linagora/esn-frontend-calendar#25