Add Get Directory Route and Refactor UI/UX (#3)

* Add Get Directory route and refactor UI

* Update README to reflect webhooks secret env variable

* Update README to reflect that directory_id is no longer a required env variable

* Update README to remove reference to /users and /groups endpoints

Co-authored-by: Adam Wolfman <[email protected]>

Author: awolfden

python-flask-directory-sync-example/README.md

@@ -54,8 +54,8 @@ If you get stuck, please reach out to us at [email protected] so we can help.
 
 6. Obtain and make note of the following values. In the next step, these will be set as environment variables.
    - Your [WorkOS API key](https://dashboard.workos.com/api-keys)
-   - Your `DIRECTORY_ID`, in the format `directory_<random-alphanumeric-string>`, retrievable from the URL in the Directory Sync area of the WorkOS dashboard:
-    ![](directory_id_location.png)  
+   - Your `WEBHOOKS_SECRET`, retrievable from the URL in the WEBHOOKS area of the WorkOS dashboard. This is only required if you are utilizing the webhooks route of this application to receive and validate webhook events. 
+
 
 7. Ensure you're in the root directory for the example app, `python-flask-directory-sync-example/`. Create a `.env` file to securely store the environment variables. Open this file with the Nano text editor. (This file is listed in this repo's `.gitignore` file, so your sensitive information will not be checked into version control.)
    ```bash
@@ -66,7 +66,7 @@ If you get stuck, please reach out to us at [email protected] so we can help.
  8. Once the Nano text editor opens, you can directly edit the `.env` file by listing the environment variables:
     ```bash
     export WORKOS_API_KEY=<value found in step 6>
-    export DIRECTORY_ID=<value found in step 6>
+    export WEBHOOKS_SECRET=<value found in step 6>
     ```
 
     To exit the Nano text editor, type `CTRL + x`. When prompted to "Save modified buffer", type `Y`, then press the `Enter` or `Return` key.
@@ -79,7 +79,7 @@ If you get stuck, please reach out to us at [email protected] so we can help.
    You can ensure the environment variables were set correctly by running the following commands. The output should match the corresponding values.
    ```bash
    (env) $ echo $WORKOS_API_KEY
-   (env) $ echo $DIRECTORY_ID
+   (env) $ echo $WEBHOOKS_SECRET
    ```
 
 ## Start the server
@@ -89,7 +89,7 @@ If you get stuck, please reach out to us at [email protected] so we can help.
    flask run
    ```
 
-2. Once the server is running, navigate to http://localhost:5000 to view the home page of the app where you can then select the view for users or groups. Alternatively you could also view these directly using the following url's: http://localhost:5000/users and http://localhost:5000/groups.
+2. Once the server is running, navigate to http://localhost:5000 to view the home page of the app where you can then select the view for users or groups. 
 
     - The `/users` URL corresponds to the WorkOS API's [List Directory Users endpoint](https://workos.com/docs/reference/directory-sync/user/list)
     - The `/groups` URL corresponds to the WorkOS API's [List Directory Groups endpoint](https://workos.com/docs/reference/directory-sync/group/list)

python-flask-directory-sync-example/app.py

@@ -12,22 +12,39 @@
 
 @app.route('/')
 def home():
-    return render_template('home.html')
+    directories = workos.client.directory_sync.list_directories()
+    print(directories)
+    directoryNames = []
+    for i in directories['data']:
+        directoryNames.append(i['name'])
+    print(directoryNames)
+    return render_template('home.html', directories=directories)
+
+@app.route('/directory')
+def directory():
+    directory_id = request.args.get('id')
+    print(directory_id)
+    directory = workos.client.directory_sync.get_directory(directory_id)
+    print(directory)
+    return render_template('directory.html', directory=directory, id=directory['id'])
 
 @app.route('/users')
 def directory_users():
+    directory_id = request.args.get('id')
     users = workos_client.directory_sync.list_users(directory=directory_id)
     return render_template('users.html', users=users)
 
 
 @app.route('/groups')
 def directory_groups():
+    directory_id = request.args.get('id')
     groups = workos_client.directory_sync.list_groups(directory=directory_id)
 
     return render_template('groups.html', groups=groups)
 
 @app.route('/webhooks', methods=['POST'])
 def webhooks():
+    print(request)
     payload = request.get_data()
     sig_header = request.headers['WorkOS-Signature']
 

python-flask-directory-sync-example/static/home.css

@@ -84,6 +84,11 @@ body {
     width: 95%;
 }
 
+.directory_button {
+    width: 40%;
+    margin-top: 20px;
+}
+
 h2, h1 {
     text-align: center;
     color: #555555;
@@ -143,6 +148,8 @@ div.text_box {
     border-radius: 5px;
     border: 2px solid #6363f1;
     width: 75%;
+    max-height: 400px;
+    overflow: scroll;
     padding: 10px;
     word-wrap: break-word;
 }

python-flask-directory-sync-example/templates/directory.html

@@ -0,0 +1,44 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="../static/home.css">
+    </head>
+    <body class="container_success">
+        <div class="logged_in_nav">
+            <div class="flex">
+                <p>You're logged in, here is your users object!</p>
+            </div>
+            <div>
+                <img src="../static/images/workos_logo_new.png" alt="workos logo">
+            </div>
+        </div>
+        <div class='flex'>
+            <div class="logged_in_div_left">
+                <div>
+                    <h1>Your app,</h1>
+                    <h2>Enterprise Ready</h2>
+                </div>
+                <div>
+                    <a href="https://workos.com/" target="_blank"><button class='button'>WorkOS</button></a>
+                    <a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
+                    <a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API Reference</button></a>
+                    <a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
+                    <a href="javascript:history.back()"><button class='button'>Home</button></a>
+                    
+                </div>
+            </div>
+            <div class="logged_in_div_right">
+                <div class="flex_column">
+                    <h2>Raw Directory Object Details</h2>
+                    <div class="text_box">
+                        <p>{{ directory }}</p>
+                    </div>
+                </div>
+                <div class="flex">
+                    <a class="button directory_button" href="/users?id={{id}}">Users</a>
+                    <br>
+                    <a class="button directory_button" href="/groups?id={{id}}">Groups</a>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

python-flask-directory-sync-example/templates/groups.html

@@ -22,12 +22,12 @@ <h2>Enterprise Ready</h2>
                     <a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
                     <a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API Reference</button></a>
                     <a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
-                    <a href="javascript:history.back()"><button class='button'>Home</button></a>
+                    <a href="{{ url_for('home') }}"><button class='button'>Home</button></a>
                 </div>
             </div>
             <div class="logged_in_div_right">
                 <div class="flex_column">
-                    <h2>Raw Profile Response Details</h2>
+                    <h2>Raw Groups Response Details</h2>
                     <div class="text_box">
                         <p>{{groups}}</p>
                     </div>

python-flask-directory-sync-example/templates/home.html

@@ -13,9 +13,13 @@ <h1>WorkOS</h1>
             </div>
 
             <h2>Python Flask Directory Sync Example App</h2>
-            <a class="button login_button" href="{{ url_for('directory_users') }}">Users</a>
-            <br>
-            <a class="button login_button" href="{{ url_for('directory_groups') }}">Groups</a>
+
+                {% for i in directories.data %}
+                <a class="button login_button" href="/directory?id={{i['id']}}">{{ i['name'] }}</a>
+                {% endfor %}
+
         </div>
     </body>
 </html>
+
+

python-flask-directory-sync-example/templates/users.html

@@ -22,7 +22,7 @@ <h2>Enterprise Ready</h2>
                     <a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
                     <a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API Reference</button></a>
                     <a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
-                    <a href="javascript:history.back()"><button class='button'>Home</button></a>
+                    <a href="{{ url_for('home') }}"><button class='button'>Home</button></a>
 
                 </div>
             </div>