Merge pull request #1167 from TorstenDittmann/feat-account-sessions

refactor(console): users devices into session

CHANGES.md

@@ -1,3 +1,11 @@
+# NOT PUBLISHED YET
+
+## Features
+- Refactored Devices page in Console:
+  - Renamed *Devices* to *Sessions*
+  - Add Provider Icon to each Session
+  - Add Anonymous Account Placeholder
+
 # Version 0.8.0
 
 ## Features

app/config/auth.php

@@ -6,7 +6,7 @@ return [
     'email-password' => [
         'name' => 'Email/Password',
         'key' => 'usersAuthEmailPassword',
-        'icon' => '/images/users/email-password.png',
+        'icon' => '/images/users/email.png',
         'docs' => 'https://appwrite.io/docs/client/account?sdk=web#accountCreateSession',
         'enabled' => true,
     ],

app/views/console/account/index.phtml

@@ -193,8 +193,8 @@
                 </div>
             </div>
         </li>
-        <li data-state="/console/account/devices">
-            <h2>Devices</h2>
+        <li data-state="/console/account/sessions">
+            <h2>Sessions</h2>
 
             <div class="box margin-bottom"
                 data-service="account.getSessions"
@@ -250,7 +250,13 @@
                             </form>
                         </span>
 
-                        <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.clientCode|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.clientName}},alt={{session.clientName}}" class="avatar trans pull-start margin-end" />
+                        <div class="pull-start margin-end avatar-container">
+                            <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.clientCode|lowercase}}?width=60&height=60&project={{env.PROJECT}},title={{session.clientName}},alt={{session.clientName}}" class="avatar" loading="lazy" width="60" height="60" />
+                                
+                            <div data-ls-if="{{session.provider}} !== 'email'" class="corner">
+                                <img data-ls-attrs="src=/images/users/{{session.provider}}.png?buster=<?php echo APP_CACHE_BUSTER; ?>,title={{session.provider}},alt={{session.provider}}"  class="avatar xs" loading="lazy" width="30" height="30" />
+                            </div>
+                        </div>
 
                         <span data-ls-if="(!{{log.clientName}})">Unknown</span>
                         <span data-ls-if="({{log.clientName}})" data-ls-bind="{{session.clientName}}"></span> <span data-ls-bind="{{session.clientVersion}}"></span> on <span data-ls-bind="{{session.deviceModel}}"></span> <span data-ls-bind="{{session.osName}}"></span> <span data-ls-bind="{{session.osVersion}}"></span>
@@ -283,7 +289,7 @@
                 data-failure-param-alert-text="Logout from All Sessions Failed"
                 data-failure-param-alert-classname="error">
                 <input type="hidden" name="id" value="0">
-                <button class="danger">Logout from all devices</button>
+                <button class="danger">Logout from all sessions</button>
             </form>
         </li>
         <li data-state="/console/account/activity">

app/views/console/users/index.phtml

@@ -78,6 +78,7 @@ $auth = $this->getParam('auth', []);
                                         <a data-ls-attrs="href=/console/users/user?id={{user.$id}}&project={{router.params.project}}">
                                             <span data-ls-bind="{{user.name}}"></span>
                                             <span data-ls-if="{{user.name|escape}} === ''">-----</span>
+                                            <span data-ls-if="{{user.email}} === ''">Anonymous User</span>
                                         </a>
                                     </td>
                                     <td data-title="Email: ">
@@ -479,7 +480,7 @@ $auth = $this->getParam('auth', []);
                                     <button class="switch pull-end" data-ls-ui-trigger="provider-update-<?php echo $this->escape($provider); ?>"></button>
                                 </span>
 
-                                <img src="/images/users/oauth2/<?php echo $this->escape(strtolower($provider)); ?>.png?buster=<?php echo APP_CACHE_BUSTER; ?>" alt="<?php echo $this->escape(ucfirst($provider)); ?> Logo" class="pull-start provider margin-end" />
+                                <img src="/images/users/<?php echo $this->escape(strtolower($provider)); ?>.png?buster=<?php echo APP_CACHE_BUSTER; ?>" alt="<?php echo $this->escape(ucfirst($provider)); ?> Logo" class="pull-start provider margin-end" />
                                 
                                 <span class="text-size-small">
                                     <?php echo $this->escape($name); ?> <?php if($sandbox): ?><span class="text-size-xs text-fade">sandbox</span><?php endif; ?> <?php if($beta): ?><span class="text-size-xs text-fade">beta</span><?php endif; ?>

app/views/console/users/user.phtml

@@ -12,7 +12,8 @@
             <br />
 
             <span data-ls-bind="{{user.name}}">&nbsp;</span>
-            <span data-ls-if="{{user.name}} === ''">Unknown</span>
+            <span data-ls-if="{{user.name}} === '' && {{user.email}} !== ''">Unknown</span>
+            <span data-ls-if="{{user.name}} === '' && {{user.email}} === ''">Anonymous User</span>
         </h1>
     </div>
 
@@ -180,8 +181,8 @@
                     </div>
                 </div>
             </li>
-            <li data-state="/console/users/user/devices?id={{router.params.id}}&project={{router.params.project}}">
-                <h2>Devices</h2>
+            <li data-state="/console/users/user/sessions?id={{router.params.id}}&project={{router.params.project}}">
+                <h2>Sessions</h2>
 
                 <div
                     data-service="users.getSessions"
@@ -216,8 +217,13 @@
                                         <input type="hidden" name="sessionId" data-ls-bind="{{session.$id}}">
                                         <button class="danger">Logout</button>
                                     </form>
-
-                                    <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.clientCode|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.clientName}},alt={{session.clientName}}" class="avatar trans pull-start margin-end" />
+                                    <div class="pull-start margin-end avatar-container">
+                                        <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.clientCode|lowercase}}?width=60&height=60&project={{env.PROJECT}},title={{session.clientName}},alt={{session.clientName}}" class="avatar" loading="lazy" width="60" height="60" />
+                                        
+                                        <div data-ls-if="{{session.provider}} !== 'email'" class="corner">
+                                            <img data-ls-attrs="src=/images/users/{{session.provider}}.png?buster=<?php echo APP_CACHE_BUSTER; ?>,title={{session.provider}},alt={{session.provider}}"  class="avatar xs" loading="lazy" width="30" height="30" />
+                                        </div>
+                                    </div>
 
                                     <span data-ls-bind="{{session.clientName}}"></span> <span data-ls-bind="{{session.clientVersion}}"></span> on <span data-ls-bind="{{session.deviceModel}}"></span> <span data-ls-bind="{{session.osName}}"></span> <span data-ls-bind="{{session.osVersion}}"></span>
 
@@ -244,7 +250,7 @@
                             data-failure-param-alert-text="Failed to logout all sessions"
                             data-failure-param-alert-classname="error">
                             
-                            <button class="danger">Logout from all devices</button>
+                            <button class="danger">Logout from all sessions</button>
                         </form>
                     </div>
                 </div>

docs/tutorials/add-oauth2-provider.md

@@ -25,7 +25,7 @@ Make sure to fill all data needed and that your provider array key name:
 
 ### Add Provider Logo
 
-Add a logo image to your new provider in this path: `./public/images/oauth2`. Your logo should be a png 100×100px file with the name of your provider (all lowercase). Please make sure to leave about 30px padding around the logo to be consistent with other logos.
+Add a logo image to your new provider in this path: `./public/images/users`. Your logo should be a png 100×100px file with the name of your provider (all lowercase). Please make sure to leave about 30px padding around the logo to be consistent with other logos.
 
 ### Add Provider Class