iOS App Features and Screens / Table Of Contents

[felix-schwarz]

This issue tracks the planned features for the iOS app rewrite, where to find them - and how to get there.

List Of Servers (Screen)

Features

• List Of Server Bookmarks
• Remove Server Bookmark
• Save last used Bookmark and re-connect automatically upon app termination / relaunch

Linked Screens

• Add / Edit Server Bookmark
• Server View
• Settings
• About / Help

Add / Edit Server Bookmark (Screen)

Features

• Enter / Edit Server Address
• Choose Authentication Method (auto-discovery if OC server supports it)
• Enter Passphrase (where applicable)
• Reset/Remove auth token (where applicable)

Linked Screens

• List Of Server Bookmarks
• Server Certificate Detail View

Server Certificate Detail overview (Screen)

Features

• Show Certificate Details like Fingerprint, Common Name, Issuer, Serial and Expiration Date

Linked Screen

• Add / Edit Server Bookmark

Server View (Screen)

Features

• File Browser Tab
  • Search
  • Sort (inspired by Files app)
  • Item Detail View
  • Grid / List / Slide View
  • Preview File
  • Drag & Drop
  • Thumbnails (where supported by Server)
• Shares Tab
  • List Of Shares
  • Delete Shares
• Network Activity Indication Tab
  • Currently running up-/download/sync activities
  • Option to cancel network activities

Linked Screens

• Item Detail View

Item Detail View (Screen)

Features

• Add, Remove and List Shares per item
• File metadata (size, last modified)
• Download status
  • Make available Offline
  • Delete Offline Copy
• Actions
  • Open with
  • Rename
  • Move
  • Preview
  • Delete

Linked Screens

• Server View / File Browser Tab

Slide View / Preview File (Screen)

Features

• Paginated PDF viewing (+ annotations if supported by iOS out-of-the-box)
• Video preview (for downloaded files, and possibly streaming)
• Text file preview / basic editing

Linked Screens

• Server View / File Browser Tab
• Item Detail View

Settings (Screen)

Features

• Background Uploads / Downloads
• Account to upload photos to
• Passcode Lock
• Touch ID Lock
• Clear Caches

Linked Screens

• List Of Servers
• User-Approved Certificates

User-Approved Certificates (Screen)

Features

• List User-Approved Certificates
• Delete User-Approved Certificates

Linked Screens

• Server Certificate Detail View
• Settings

About / Help (Screen)

Features

• Help
• Version Information
• License Information (on included third-party libraries such as OpenSSL)

Linked Screens

• List Of Servers

Other features

• Migration URL (change of server URL via MDM)
• iOS 11+ only
• Share Extension
  • Share to ownCloud folder
• File Provider Extension (Files app integration)
• Layout adapts to iPhone and iPad respectively
  • Support for iPad multitasking (split screen + slide over)
  • Portrait and Lanscape support throughout the app
• Branding Options

[jesmrec]

Let's analyse a bit all this nice stuff:

Regarding this one:

Add / Edit Server Bookmark (Screen)

is this the entry point for the user who clicks the app icon for the first time after installing? if it is, user is given the option to input the server URL and depending the authentication method (currently we are detecting it using the header www-authentication that the server sends with Basic / Bearer info), either inputs basic auth credentials (will we support this @michaelstingl?) or is redirect to OAuth2 webview that handles the authentication.

For this consideration (OAuth2) , and regarding security issues, very important: owncloud/ios-legacy#942 .

This feature:

Reset/Remove auth token (where applicable)

would need core support (API for that?), that is not currently available.

I think these two options should be clearly differentiated:

• Add a new bookmark
• Edit an existing bookmark

Although in both cases the view will be similar for the user, the logic to handle is not the same (does it means different views as well?). For example:

• User adds a new server (bookmark) -> input URL, and credentials -> user authorized by core. Until first authorization is not granted

Linked Screens

• List Of Server Bookmarks

should not be reachable.

• User edits an existing server (bookmark) -> user wants to edit his credentials, but not the URL. Changing URL means migration and not edition, imo. Also, in this case:

Linked Screens

• List Of Server Bookmarks

should be always available.

Regarding List of Servers:

List Of Servers (Screen)

Features

• List Of Server Bookmarks
• Remove Server Bookmark
• Save last used Bookmark and re-connect automatically upon app termination / relaunch

I miss in the the list the feature to add / edit a bookmark, that points a few lines below to its linked screen:

• Add / Edit Server Bookmark

only an small tweak, you know.

[felix-schwarz]

Regarding this one:

Add / Edit Server Bookmark (Screen)

is this the entry point for the user who clicks the app icon for the first time after installing?

The entry point is the List Of Servers, from where users can also access Settings and Help. If no server has been added yet (which should be the case on first launch, too, of course), a message with a call to action "Add server" is shown to the user:

if it is, user is given the option to input the server URL and depending the authentication method (currently we are detecting it using the header www-authentication that the server sends with Basic / Bearer info), either inputs basic auth credentials (will we support this @michaelstingl?) or is redirect to OAuth2 webview that handles the authentication.

I imagine adding a server to be a two-step process:

• Step 1: the user enters a name and the server's URL, then taps "Continue"
• The App can now query the server for the authentication methods it offers and also grab a copy of the server's certificate (if any)
• The App subsequently presents the available authentication methods to the user (defaulting to OAuth2 where available) and also adds a "Show Certificate Details" button below the URL the user entered.
• Step 2: (assuming OAuth2) the user taps "Connect" and finishes authentication

Regarding supported authentication methods: I don't know since when OAuth2 is supported by ownCloud servers - or whether it is safe to assume it's always available on recent installs. I would suggest to start OAuth2-only, but keep the door open for other authentication methods if they're needed (I can see this, f.ex. on tvOS, where no web views are available).

For this consideration (OAuth2) , and regarding security issues, very important: owncloud/ios-legacy#942 .

Thanks!

This feature:

Reset/Remove auth token (where applicable)

would need core support (API for that?), that is not currently available.

This can be achieved by setting the respective OCBookmark's authenticationData to nil. Setting it to nil deletes the data from the keychain.

I think these two options should be clearly differentiated:

• Add a new bookmark
• Edit an existing bookmark

Although in both cases the view will be similar for the user, the logic to handle is not the same (does it means different views as well?). For example:

The logic should be so similar that I would actually realize both in one view controller. Here are the scenarios I have in mind:

1. User changes name

• No difference

2. User changes server address

• Add: view controller starts with all rows below the address hidden.
• Edit: view controller hides all rows below the address.
• Common: user taps on "Continue" for the client to fetch available auth methods + certificate.

3. User changes auth method

• Common: the interface adapts accordingly to show/hide f.ex. user/pass fields.

4. User enters user/pass or changes user/pass fields

• Common: that data is sent to the OCAuthenticationMethod's -generateBookmarkAuthenticationDataWithConnection:.. in a dictionary when the user taps "Connect". If the authentication succeeds, the app can update the bookmark with the returned authenticationData.

5. User completes action (either Add or Edit) by tapping "Connect"

• Common: authentication is attempted and the user is prompted if either no auth data exists ("Delete Authentication Data") or it is no longer valid

I can't think of any other scenarios right now. Please let me know if I overlooked any.

Here's a screenshot of what I put together in Figma today:

• User edits an existing server (bookmark) -> user wants to edit his credentials, but not the URL. Changing URL means migration and not edition, imo.

The ability to edit the URL alongside all other data defining the bookmark / connection to the server feels like it's the right place to do it.

But I'm not as familiar with ownCloud as you are, so please let me know if there are any reasons I may not know about yet why this would be a bad idea.

Regarding List of Servers:

List Of Servers (Screen)

Features

• List Of Server Bookmarks
• Remove Server Bookmark
• Save last used Bookmark and re-connect automatically upon app termination / relaunch

I miss in the the list the feature to add / edit a bookmark, that points a few lines below to its linked screen:

• Add / Edit Server Bookmark

only an small tweak, you know.

If a feature is actually implemented in a different place and turns up in "Linked Screens", I tried to avoid to also list it under "Features", too, so it's clear what's actually implemented in which place. The thought behind that was that if something is a "Linked Screen", the Screen that it is linked to from must provide access to it in some way.

[hurradieweltgehtunter]

I was asked to have a look here regarding ownCloud CI and layout. I think it's awesome that you guys make this extra effort. By rewriting the app, we should definitely be correct on CI and styles.
I'm not quite sure how much I need to tell you about styles etc. so i'm just writing down what comes to my mind. If it's too basic, just ignore it.
Here it goes:

Colors

Primary color: #1D293B (oc dark blue)
Secondary color: #468CC8 (oc light blue)
We do not use any gradients on any surfaces.

Logo

Please use the correct logo -> https://owncloud.org/trademark/
The text "ownCloud" must not be removed from the cloud.
The most correct use would be a white logo on a oc dark blue background (like in the top menu bar). If it's possible, please implement like this.
The logo in the screenshots is a mix from community and enterprise logo which doesn't exist in this way.
Also, no grey logo, no gradient and no oc enterprise orange.

Icons

Please use clean, monochrome icons without shadow or 3d effects. See FontAwesome for example.
Icons can be very useful if used in a meaningful way but not every element needs an icon. It should provide a real advantage for every new and recurring user.

Buttons, Preview Images etc.

Please do not use rounded corners.

Font

ownClouds main font is OpenSans Light and Bold (no semi-bold, regular, ...)

Example

1. correct color in head bar
2. correct logo in head bar
3. removed all rounded corners on buttons, file icon and dialog overlay

If you need any help regarding CI, I'm always happy to help.

[felix-schwarz]

I was asked to have a look here regarding ownCloud CI and layout. I think it's awesome that you guys make this extra effort. By rewriting the app, we should definitely be correct on CI and styles.
I'm not quite sure how much I need to tell you about styles etc. so i'm just writing down what comes to my mind. If it's too basic, just ignore it.

Thanks a lot! 😃

Logo

Please use the correct logo -> https://owncloud.org/trademark/

Thanks! That's so much better! (for the "List Of Servers" screen, I used material from https://owncloud.com/press/)

The text "ownCloud" must not be removed from the cloud.
The most correct use would be a white logo on a oc dark blue background (like in the top menu bar). If it's possible, please implement like this.
The logo in the screenshots is a mix from community and enterprise logo which doesn't exist in this way.

For the "List Of Servers", I found the "ownCloud" text below it really bites with the "Welcome" text below the logo (I tried it). It would duplicate the existing "ownCloud" label in the top bar, too.

About the images above with yellow background: that is material based on screenshots from the previous client and resources used there. I'm not sure there's a good way to also place the ownCloud logo up there in the new app. But if we find one, it would also look better without the "ownCloud" text below it. That text would be really small and - due to its thin font weight and scaling (down to ~ 20 points vertically) - practically illegible, making the filled clouds look vertically off-center with "pixel dirt" below it.

Since the previous iOS app used the clouds without text as well - and keeping the text will almost certainly not look good in the contexts it lends itself to be used: is there really no chance we can use just the clouds?

Also, no grey logo, no gradient and no oc enterprise orange.

If we go with a light design, would a oc light blue cloud on white background also be ok?

Buttons, Preview Images etc.

Please do not use rounded corners.

Rounded corners are how things usually look on iOS. With recent iOS releases, Apple has walked back some of the "blue text are buttons" design language it introduced with iOS 7 and now even uses solid, blue round-rect buttons (as seen in the "Welcome" screen above) throughout device setup and system apps.

Apps that adopt a rectangular look (like Google's iOS apps, which Google tries to use its own Material Design language in) feel foreign on the iOS platform, which I'd like to avoid.

Font

ownClouds main font is OpenSans Light and Bold (no semi-bold, regular, ...)

Given how widespread OpenSans is in use (I coincidentally also use it on my company's website), is it really a recognizable part of the ownCloud brand that needs to be preserved in the app?

If possible, I'd really like to use Apple's system font San Francisco (in weights commonly used by iOS and Apple apps) as it allows us to take full advantage of the iOS text system, means writing less code and getting to results faster.

Thanks!

[felix-schwarz]

I added a screen for User-Approved Certificates that's accessible via the Settings.

Users should be able to see which certificates they approved and revoke their approval on an individual basis.