Update all logos and MFA code entry UI (#22)

awolfden · Adam Wolfman · web-flow · commit 800f5409f839 · 2022-08-08T14:30:40.000-06:00
Co-authored-by: Adam Wolfman &lt;adamwolfman@Adams-MBP-3.domain&gt;
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "python.formatting.provider": "black"
+}
diff --git a/python-flask-admin-portal-example/static/css/login.css b/python-flask-admin-portal-example/static/css/login.css
@@ -242,12 +242,6 @@ div.text_box {
 
 .logged_in_nav img {
     height: 50px;
-    border-radius: 50%;
-    border: 2px solid #2f2e2e;
-}
-
-.logged_in_nav img:hover {
-    border: 2px solid #555555;
 }
 
 .nav-item {
diff --git a/python-flask-admin-portal-example/templates/org_logged_in.html b/python-flask-admin-portal-example/templates/org_logged_in.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-directory-sync-example/static/home.css b/python-flask-directory-sync-example/static/home.css
@@ -228,12 +228,6 @@ div.text_box {
 
 .logged_in_nav img {
     height: 50px;
-    border-radius: 50%;
-    border: 2px solid #2f2e2e;
-}
-
-.logged_in_nav img:hover {
-    border: 2px solid #555555;
 }
 
 .nav-item {
diff --git a/python-flask-directory-sync-example/templates/directory.html b/python-flask-directory-sync-example/templates/directory.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-directory-sync-example/templates/groups.html b/python-flask-directory-sync-example/templates/groups.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-directory-sync-example/templates/users.html b/python-flask-directory-sync-example/templates/users.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-directory-sync-example/templates/webhooks.html b/python-flask-directory-sync-example/templates/webhooks.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-magic-link-example/static/login.css b/python-flask-magic-link-example/static/login.css
@@ -220,12 +220,6 @@ div.text_box {
 
 .logged_in_nav img {
     height: 50px;
-    border-radius: 50%;
-    border: 2px solid #2f2e2e;
-}
-
-.logged_in_nav img:hover {
-    border: 2px solid #555555;
 }
 
 .nav-item {
diff --git a/python-flask-magic-link-example/templates/serve_magic_link.html b/python-flask-magic-link-example/templates/serve_magic_link.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-magic-link-example/templates/success.html b/python-flask-magic-link-example/templates/success.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-mfa-example/app.py b/python-flask-mfa-example/app.py
@@ -110,7 +110,13 @@ def challenge_factor():
 
 @app.route("/verify_factor", methods=["POST"])
 def verify_factor():
-    code = request.form["code"]
+    def buildCode(code_values):
+        code = ""
+        for x in code_values.values():
+            code += x
+        return code
+
+    code = buildCode(request.form)
     challenge_id = session["challenge_id"]
     verify_factor = workos.client.mfa.verify_factor(
         authentication_challenge_id=challenge_id,
diff --git a/python-flask-mfa-example/static/login.css b/python-flask-mfa-example/static/login.css
@@ -220,12 +220,6 @@ div.text_box {
 
 .logged_in_nav img {
     height: 50px;
-    border-radius: 50%;
-    border: 2px solid #2f2e2e;
-}
-
-.logged_in_nav img:hover {
-    border: 2px solid #555555;
 }
 
 .nav-item {
@@ -287,4 +281,12 @@ pre.prettyprint {
 .qr_code {
     width: 7vw;
     max-width: 100px;
+}
+
+.code-input {
+    width: 75px;
+    height: 100px;
+    margin: 0px 5px 30px 5px;
+    font-size: 60px;
+    color: darkslategray;
 }
diff --git a/python-flask-mfa-example/templates/challenge_factor.html b/python-flask-mfa-example/templates/challenge_factor.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
@@ -46,23 +43,55 @@ <h2 class="home-hero-gradient">Enterprise Ready</h2>
                     <div>
                         <form method="POST" action="{{ url_for('verify_factor') }}">
                             <div class='flex_column'>
-                                <div>
-                                    <input type="text" id="code" name="code" class="text_input"
-                                        placeholder="Input Auth Code">
+                                <div class="flex form-wrap">
+                                    <input type="text" id="code-1" name="code-1" maxlength="1"
+                                        class="text_input code-input" placeholder="-">
+                                    <input type="text" id="code-2" name="code-2" maxlength="1"
+                                        class="text_input code-input" placeholder="-">
+                                    <input type="text" id="code-3" name="code-3" maxlength="1"
+                                        class="text_input code-input" placeholder="-">
+                                    <input type="text" id="code-4" name="code-4" maxlength="1"
+                                        class="text_input code-input" placeholder="-">
+                                    <input type="text" id="code-5" name="code-5" maxlength="1"
+                                        class="text_input code-input" placeholder="-">
+                                    <input type="text" id="code-6" name="code-6" maxlength="1"
+                                        class="text_input code-input" placeholder="-">
                                 </div>
-                                <div>
-                                    <button type="submit" class="button">Verify Factor</button>
+                                <div class="flex space-evenly width_25vw">
+                                    <div>
+                                        <button type="submit" class="button button-sm">Verify Factor</button>
+                                    </div>
+                                    <div>
+                                        <a href="/"><button type="button" class='button button-sm'>Go Back
+                                                Home</button></a>
+                                    </div>
                                 </div>
                             </div>
                         </form>
-
                     </div>
                 </div>
-
             </div>
-
         </div>
     </div>
 </body>
+<script>
+    var container = document.getElementsByClassName("form-wrap")[0];
+    container.onkeyup = function (e) {
+        var target = e.srcElement;
+        var maxLength = parseInt(target.attributes["maxlength"].value, 10);
+        var myLength = target.value.length;
+        if (myLength >= maxLength) {
+            var next = target;
+            while (next = next.nextElementSibling) {
+                if (next == null)
+                    break;
+                if (next.tagName.toLowerCase() == "input") {
+                    next.focus();
+                    break;
+                }
+            }
+        }
+    }
+</script>
 
 </html>
diff --git a/python-flask-mfa-example/templates/challenge_success.html b/python-flask-mfa-example/templates/challenge_success.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-mfa-example/templates/enroll_factor.html b/python-flask-mfa-example/templates/enroll_factor.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-mfa-example/templates/factor_detail.html b/python-flask-mfa-example/templates/factor_detail.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-mfa-example/templates/list_factors.html b/python-flask-mfa-example/templates/list_factors.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>WorkOS</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>
diff --git a/python-flask-sso-example/app.py b/python-flask-sso-example/app.py
@@ -1,6 +1,6 @@
 import json
 import os
-
+from urllib.parse import urlparse, parse_qs
 from flask import Flask, session, redirect, render_template, request, url_for
 import workos
 
@@ -18,7 +18,7 @@
 
 # Enter Connection ID here
 
-CUSTOMER_CONNECTION_ID = ""
+CUSTOMER_CONNECTION_ID = "conn_01G90XQ07953ZADRSFVF1YFSXP"
 
 
 def to_pretty_json(value):
@@ -54,6 +54,11 @@ def auth():
 
 @app.route("/auth/callback")
 def auth_callback():
+
+    print(request.args.get("error"))
+    print(request.args.get("error_description"))
+    print(request.args.get("error_uri"))
+
     code = request.args.get("code")
     profile = workos.client.sso.get_profile_and_token(code)
     p_profile = profile.to_dict()
diff --git a/python-flask-sso-example/static/login.css b/python-flask-sso-example/static/login.css
@@ -220,12 +220,6 @@ div.text_box {
 
 .logged_in_nav img {
     height: 50px;
-    border-radius: 50%;
-    border: 2px solid #2f2e2e;
-}
-
-.logged_in_nav img:hover {
-    border: 2px solid #555555;
 }
 
 .nav-item {
diff --git a/python-flask-sso-example/templates/login_successful.html b/python-flask-sso-example/templates/login_successful.html
@@ -8,10 +8,7 @@
     <div class="logged_in_nav">
         <div class="flex">
             <div>
-                <img src="../static/images/workos_logo_new.png" alt="workos logo">
-            </div>
-            <div class="flex">
-                <p>You're logged in {{first_name}}, welcome!</p>
+                <img src="../static/images/workos-logo-with-text.png" alt="workos logo">
             </div>
         </div>
         <div>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "python.formatting.provider": "black"`
	`3`	`+}`