From a3a27ced66360136137d909568d8c795a88f71e5 Mon Sep 17 00:00:00 2001
From: Eldad Fux <eldad.fux@gmail.com>
Date: Sun, 28 Feb 2021 13:41:18 +0200
Subject: [PATCH] Updated UI

---
 app/controllers/web/console.php     |  5 ++-
 app/views/console/users/index.phtml | 70 ++++++++++++++++++++++++++---
 2 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/app/controllers/web/console.php b/app/controllers/web/console.php
index b41f1d1f86..2506c70070 100644
--- a/app/controllers/web/console.php
+++ b/app/controllers/web/console.php
@@ -323,7 +323,10 @@ App::get('/console/users')
 
         $page = new View(__DIR__.'/../../views/console/users/index.phtml');
 
-        $page->setParam('providers', Config::getParam('providers'));
+        $page
+            ->setParam('auth', Config::getParam('auth'))
+            ->setParam('providers', Config::getParam('providers'))
+        ;
 
         $layout
             ->setParam('title', APP_NAME.' - Users')
diff --git a/app/views/console/users/index.phtml b/app/views/console/users/index.phtml
index b41730baf9..90b5bc1462 100644
--- a/app/views/console/users/index.phtml
+++ b/app/views/console/users/index.phtml
@@ -1,5 +1,6 @@
 <?php
 $providers = $this->getParam('providers', []);
+$auth = $this->getParam('auth', []);
 ?>
 
 <div class="cover">
@@ -300,9 +301,67 @@ $providers = $this->getParam('providers', []);
         </li>
         
         <li data-state="/console/users/providers?project={{router.params.project}}">
-            <h2>OAuth2 Providers</h2>
+            <p class="text-fade text-size-small margin-bottom pull-end">Unlimited Users <a href="">Set Limit</a></p>
+            
+            <h2>Settings</h2>
 
-            <div class="margin-bottom margin-top-large"
+            <p class="text-fade margin-bottom">Choose auth methods you wish to use.</p>
+
+            <ul class="tiles cell-3 margin-bottom-small">
+                <?php foreach($auth as $index => $method):
+                    $key = $method['key'] ?? '';
+                    $name = $method['name'] ?? '';
+                    $icon = $method['icon'] ?? '';
+                    $docs = $method['docs'] ?? '';
+                    $enabled = $method['enabled'] ?? false;
+                    ?>
+                <li class="">
+                    <div class="box padding-small margin-bottom clear">
+                        <?php if($enabled): ?>
+                            <form
+                                data-analytics
+                                data-analytics-activity
+                                data-analytics-event="submit"
+                                data-analytics-category="console"
+                                data-analytics-label="Update Project Auth Status (<?php echo $this->escape($name); ?>)"
+                                data-service="projects.updateAuthStatus"
+                                data-scope="console"
+                                data-event="submit"
+                                data-param-project-id="{{router.params.project}}"
+                                data-success="alert,trigger"
+                                data-success-param-alert-text="Updated project auth status successfully"
+                                data-success-param-trigger-events="projects.update"
+                                data-failure="alert"
+                                data-failure-param-alert-text="Failed to update project auth status settings"
+                                data-failure-param-alert-classname="error">
+                                <input name="method" id="<?php echo $this->escape($key); ?>" type="hidden" autocomplete="off" value="<?php echo $this->escape($index); ?>">
+
+                                <span data-ls-if="{{console-project.<?php echo $this->escape($key); ?>}}">
+                                    <button name="status" class="switch on pull-end" value="false" data-cast-to="boolean"></button>
+                                </span>
+                                <span data-ls-if="!{{console-project.<?php echo $this->escape($key); ?>}}">
+                                    <button name="status" class="switch pull-end" value="true" data-cast-to="boolean"></button>
+                                </span>
+                            </form>
+                        <?php endif; ?>
+
+                        <img src="<?php echo $this->escape($icon); ?>?buster=<?php echo APP_CACHE_BUSTER; ?>" alt="Email/Password Logo" class="pull-start provider margin-end" />
+                                
+                        <span class="text-size-small"><?php echo $this->escape($name); ?><?php if(!$enabled): ?> <spann class="text-fade text-size-xs">soon</span><?php endif; ?></span>
+
+                        <?php if($docs): ?>
+                        <p class="margin-bottom-no text-one-liner text-size-small">
+                            <a href="<?php echo $this->escape($docs); ?>" target="_blank" rel="noopener">Docs<i class="icon-link-ext"></i></a>
+                        </p>
+                        <?php endif; ?>
+                    </div>
+                </li>
+                <?php endforeach; ?>
+            </ul>
+
+            <h3>OAuth2 Providers</h3>
+
+            <div class="margin-bottom margin-top"
                 data-service="projects.get"
                 data-event="load,projects.create,projects.update,projects.deleteProject"
                 data-name="console-project"
@@ -312,6 +371,7 @@ $providers = $this->getParam('providers', []);
                     <?php foreach ($providers as $provider => $data):
                         if (isset($data['enabled']) && !$data['enabled']) { continue; }
                         if (isset($data['mock']) && $data['mock']) { continue; }
+                        $sandbox = $data['sandbox'] ?? false;
                         $form = $data['form'] ?? false;
                         $name = $data['name'] ?? 'Unknown';
                         $beta = $data['beta'] ?? false;
@@ -320,7 +380,7 @@ $providers = $this->getParam('providers', []);
                             <div data-ui-modal class="modal close" data-button-alias="none" data-open-event="provider-update-<?php echo $provider; ?>">
                                 <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
-                                <h1><?php echo $this->escape($name); ?> OAuth2 Settings</h1>
+                                <h1><?php echo $this->escape($name); ?> <?php if($sandbox): ?>Sandbox<?php endif; ?> OAuth2 Settings</h1>
 
                                 <form
                                     data-analytics
@@ -383,10 +443,10 @@ $providers = $this->getParam('providers', []);
                                     <button class="switch pull-end" data-ls-ui-trigger="provider-update-<?php echo $this->escape($provider); ?>"></button>
                                 </span>
 
-                                <img src="/images/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/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" />
                                 
                                 <span class="text-size-small">
-                                    <?php echo $this->escape($name); ?> <?php if($beta): ?>(beta)<?php endif; ?>
+                                    <?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; ?>
                                 </span>
 
                                 <p class="margin-bottom-no text-one-liner text-size-small">