First attempt for recovery link

2d9867b3 · Mart van Santen · e80091e5 · 2d9867b3 · 2d9867b3 · 2d9867b3
Commit 2d9867b3 authored 3 years ago by Mart van Santen
--- a/login/app.py
+++ b/login/app.py
@@ -293,10 +293,21 @@ app.cli.add_command(user_cli)
 # -> recovery

 # TODO: Create webroutes
-@app.route('/recover', methods=['GET', 'POST'])
-def recover():
+@app.route('/recovery', methods=['GET', 'POST'])
+def recovery():

-    return render_template('recover.html')
+    flow = request.args.get("flow")
+    if not flow:
+        return redirect(app.config["KRATOS_PUBLIC_URL"] + "self-service/recovery/browser")
+
+
+#    localhost:8080/self-service/recover/browser
+#    return redirect("https://google.com")
+    # /self-service/recovery/browsera
+    return render_template(
+        'recover.html',
+        api_url = app.config["KRATOS_PUBLIC_URL"]
+        )


    #login_form=login_form, logo=login_request.client.logo_uri, application_name=login_request.client.client_name)

--- a/login/config.py
+++ b/login/config.py
@@ -16,7 +16,7 @@ class Config(object):
    HYDRA_ADMIN_URL = os.environ['HYDRA_ADMIN_URL'];

    KRATOS_ADMIN_URL = os.environ['KRATOS_ADMIN_URL'];
-    KRATOS_PUBLIC_URL = os.environ['KRATOS_PUBLIC_URL'];
+    KRATOS_PUBLIC_URL = os.environ['KRATOS_PUBLIC_URL'] + "/";




--- a/login/source_env
+++ b/login/source_env
@@ -4,7 +4,7 @@
 export FLASK_RUN_HOST=0.0.0.0
 export FLASK_RUN_PORT=5000
 export HYDRA_ADMIN_URL=http://localhost:4445
-export KRATOS_PUBLIC_URL=http://localhost:8080
+export KRATOS_PUBLIC_URL=http://localhost/api
 export KRATOS_ADMIN_URL=http://localhost:8000

 export DATABASE_URL="postgresql://stackspin:stackspin@localhost/stackspin"

--- a/login/static/css/bootstrap.min.css
+++ b/login/static/css/bootstrap.min.css
--- a/login/static/js/bootstrap.bundle.min.js
+++ b/login/static/js/bootstrap.bundle.min.js
--- a/login/static/js/jquery-3.6.0.min.js
+++ b/login/static/js/jquery-3.6.0.min.js
--- a/login/static/style.css
+++ b/login/static/style.css
+
+
+div.loginpanel {
+    width: 644px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 100px;
+}
--- a/login/templates/base.html
+++ b/login/templates/base.html
+<!doctype html>
+<html>
+    <link rel="stylesheet" href="static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="static/style.css">
+    <script src="static/js/bootstrap.bundle.min.js"></script>
+    <script src="static/js/jquery-3.6.0.min.js"></script>
+    <title>Stackspin Account</title>
+</html>
+
+
+
+<body>
+<script>
+    var api_url = '{{ api_url }}';
+
+
+    // Actions
+    $(document).ready(function() {
+        var flow = $.urlParam('flow');
+        var uri = api_url + 'self-service/recovery/flows?id=' + flow;
+        console.log("Calling: " + uri);
+
+        $.ajax( {
+            type: "GET",
+            url: uri,
+            success: function(data) {
+                for (const node of data.ui.nodes) {
+        
+                    var name = node.attributes.name;
+                    var type = node.attributes.type;
+                    var value = node.attributes.value;
+                    
+                    elm = getFormElement(type, name, value);
+                    console.log(elm);
+                }
+            },
+            complete: function(obj) {
+
+                // Expired flow, refresh
+                if (obj.status == 410) {
+                    alert("flow expired");
+                }
+            }
+            });
+    });
+
+
+    // Return form element based on name, including help etc
+    function getFormElement(type, name, value) {
+
+        if (name == 'email') {
+            return getFormInput(
+                'email',
+                'email', 
+                'E-mail address',
+                'Please enter your e-mail address here',
+                'Please provode your e-mail address. We will send a recovery ' +
+                    'link to that e-mail address.',
+                );
+        }
+
+        if (type == 'hidden') {
+            return `
+               <input type="`+type+`" class="form-control" id="`+name+`"
+                    name="`+name+`" value='`+value+`'>`;
+        }
+
+        if (type == 'submit') {
+            return `<div class="form-group">
+               <input type="`+type+`" class="form-control" id="`+name+`"
+                    name="`+name+`" value='x' text='z'>
+                    </div>`;
+        }
+
+    }
+    function getFormInput(type, name, label, placeHolder, help) {
+
+        // Id field for help element
+        nameHelp = name + "Help";
+
+        element = `
+        <div class="form-group">
+        <label for="`+name+`">`+label+`</label>
+
+        <input type="`+type+`" class="form-control" id="`+name+`" name="`+name+`"
+           aria-describedby="` + nameHelp +`"
+            placeholder="`+placeHolder+`">
+
+        <small id="`+nameHelp+`" class="form-text text-muted">` + help + `
+        </small>
+        </div>`
+
+        return element;
+    }
+
+
+    // Helpers
+    $.urlParam = function(name) {
+        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
+        if (results==null) {
+           return null;
+        }
+        return decodeURI(results[1]) || 0;
+    };
+</script>
+
+
+<div class="loginpanel">
+
+{% block content %}{% endblock %}
+
+
+</div>
--- a/login/templates/recover.html
+++ b/login/templates/recover.html
+
+
+{% extends 'base.html' %}
+
+{% block content %}
+
+
+    <div id="
+    <div class="form-group">
+    <label  for="email">E-mail address</label>
+
+    <input type="email" class="form-control" id="email" name="email"
+        aria-describedby="emailHelp" 
+        placeholder="Enter your email address to send recover link">
+    <small id="emailHelp" class="form-text text-muted">
+    Please provode your e-mail address. We will send a recovery link to that
+    e-mail address.
+    </small>
+
+    <input type="submit"
+        name="method"
+        values="link"
+        type="button"
+        class="btn btn-primary">Recover
+    </button>
+    </div>
+
+{% endblock %}