Actualización

plugin/whispeakauth/view/authentify_password.html.twig

@@ -0,0 +1,44 @@
+<div class="row">
+    <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
+        {{ form }}
+
+        <br>
+
+        <div id="frm-login-result"></div>
+    </div>
+</div>
+
+<script>
+    $(function () {
+        $('#form-login').on('submit', function (e) {
+            e.preventDefault();
+
+            var formData = new FormData(this),
+                self = $(this);
+            self.children().prop('disabled', true);
+            self.find(':submit em.fa').get(0).className = 'fa fa-spinner fa-spin';
+
+            $
+                .ajax({
+                    type: 'POST',
+                    url: this.action,
+                    data: formData,
+                    processData: false,
+                    contentType: false
+                })
+                .then(function (response) {
+                    $('#frm-login-result').html(response);
+                    self.children().prop('disabled', false);
+                    self.find(':submit em.fa').get(0).className = 'fa fa-check';
+
+                    if ($('#frm-login-result > .alert.alert-success').length > 0 ||
+                        $('#frm-login-result > .alert.alert-danger [data-reach-attempts]').length > 0
+                    ) {
+                        self.find(':submit').prop('disabled', true);
+                    }
+                });
+
+            this.reset();
+        });
+    });
+</script>

plugin/whispeakauth/view/authentify_recorder.html.twig

@@ -0,0 +1,44 @@
+{% extends 'whispeakauth/view/record_audio.html.twig' %}
+
+{% block intro %}
+    {% if show_form %}
+        <form class="form-horizontal" action="#" method="post">
+            <div class="form-group ">
+                <label for="enter_username_username" class="col-sm-4 control-label">
+                    {{ 'Username'|get_lang }}
+                </label>
+                <div class="col-sm-8">
+                    <input class="form-control" name="username" type="text" id="username">
+                </div>
+            </div>
+        </form>
+
+        <hr>
+    {% endif %}
+
+    {{ parent() }}
+{% endblock %}
+
+{% block config_data %}
+    {% if show_form %}
+        $('#username').on('change', function () {
+            $('#record-audio-recordrtc, #btn-start-record, #btn-stop-record, #btn-save-record').off('click', '');
+    {% endif %}
+        RecordAudio.init(
+            {
+                blockId: '#record-audio-recordrtc',
+                btnStartId: '#btn-start-record',
+                btnStopId: '#btn-stop-record',
+                btnSaveId: '#btn-save-record',
+                plyrPreviewId: '#record-preview',
+                data: {
+                    action: 'authentify',
+                    username: $('#username').val()
+                }
+            }
+        );
+
+    {% if show_form %}
+        });
+    {% endif %}
+{% endblock %}

plugin/whispeakauth/view/quiz_question.html.twig

@@ -0,0 +1,45 @@
+<div class="text-center">
+    <p>{{ 'YouNeedToIdentifyYourselfToAnswerThisQuestion'|get_plugin_lang('WhispeakAuthPlugin') }}</p>
+
+    <button type="button" class="btn btn-info" id="whispeak-question-{{ question }}" data-loading-text="{{ 'PleaseWaitWhileLoading'|get_plugin_lang('WhispeakAuthPlugin')|escape('html') }}">
+        {{ 'IdentifyMe'|get_plugin_lang('WhispeakAuthPlugin') }}
+    </button>
+</div>
+
+<script>
+    $(function () {
+        function loadAuth() {
+            var $btnTrigger = $('#whispeak-question-{{ question }}'),
+                originalText = $btnTrigger.text(),
+                $modal = $('#global-modal'),
+                $modalTitle = $modal.find('.modal-title'),
+                $modalBody = $modal.find('.modal-body'),
+                $originalLoadingText = $btnTrigger.data('loading-text');
+
+            $btnTrigger.text($originalLoadingText).prop('disabled', true);
+
+            $modalTitle.text($originalLoadingText);
+            $modalBody.html('');
+            $modal.modal('show');
+
+            $
+                .ajax({
+                    url: _p.web_plugin + 'whispeakauth/authentify.php'
+                })
+                .then(function (response) {
+                    $modalBody.html(response);
+
+                    $modalTitle.text('{{ 'plugin_title'|get_plugin_lang('WhispeakAuthPlugin') }}');
+                    $btnTrigger.text(originalText).prop('disabled', false);
+                });
+        }
+
+        $('#whispeak-question-{{ question }}').on('click', function (e) {
+            e.preventDefault();
+
+            loadAuth();
+        });
+
+        loadAuth();
+    });
+</script>

plugin/whispeakauth/view/record_audio.html.twig

@@ -0,0 +1,59 @@
+<div id="record-audio-recordrtc" class="row">
+    <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-0">
+        {% block intro %}
+            <p class="text-center">{{ 'RepeatThisPhrase'|get_plugin_lang('WhispeakAuthPlugin') }}</p>
+            <div class="well well-sm">
+                <div class="row">
+                    <div class="col-sm-3 text-center">
+                        <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
+                        <span id="txt-timer" class="text-danger h3 show"></span>
+                    </div>
+                    <div class="col-sm-9 text-center">
+                        <p class="lead" id="txt-sample-text">{{ sample_text }}</p>
+                    </div>
+                </div>
+            </div>
+        {% endblock %}
+
+        <div class="text-center">
+            <p>
+                <button class="btn btn-primary" type="button" id="btn-start-record">
+                    <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
+                </button>
+            </p>
+            <p class="hidden">
+                <button class="btn btn-danger" type="button" id="btn-stop-record" disabled
+                        data-loadingtext="{{ 'Uploading'|get_lang }}">
+                    <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
+                </button>
+            </p>
+        </div>
+    </div>
+    <div class="col-sm-8 col-sm-offset-2 col-md-5 col-md-offset-1">
+        <hr class="visible-sm">
+        <div id="messages-deck"></div>
+        <div class="hidden" id="audio-wrapper">
+            <p>
+                <audio class="center-block" controls id="record-preview"></audio>
+            </p>
+        </div>
+    </div>
+</div>
+
+<script>
+    $(function () {
+        {% block config_data %}
+            var data = {action: 'enrollment', license: 0 };
+
+            RecordAudio.init(
+                {
+                    blockId: '#record-audio-recordrtc',
+                    btnStartId: '#btn-start-record',
+                    btnStopId: '#btn-stop-record',
+                    plyrPreviewId: '#record-preview',
+                    data: data
+                }
+            );
+        {% endblock %}
+    });
+</script>