userdetails.html

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/userdetails.css" />

<!-- MODAL -->
<div id="userdetails-modal" class="modal fade" tabindex="-1" aria-labelledby="userdetails-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="userdetails-form">
                <div class="modal-header">
                    <h3 id="userdetails-modal-title">__MSG__PLEASE_ENTER_YOUR_DETAILS__</h3>
                </div>
                <div class="modal-body">
                    <h4 id="userdetails-info">__MSG__ADDING_YOUR_FULL_NAME__</h4>
                    <div>
                        <div class="form-group">
                            <label class="control-label" for="userdetails-name"><h4>__MSG__NAME__</h4></label>
                            <input type="text" id="userdetails-name" class="form-control required maxlength-short displayname" name="userdetails-name" placeholder="Hiroyuki Sakai" />
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="userdetails-email"><h4>__MSG__EMAIL__</h4></label>
                            <input type="text" id="userdetails-email" name="email" autocapitalize="off" class="form-control required email maxlength-short" placeholder="hiroyuki.sakai@example.com" />
                        </div>
                    </div>
                    <div id="userdetails-accept-terms-and-conditions-container" class="form-group hide"><!-- --></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary pull-right">__MSG__CONTINUE__</button>
                </div>
            </form>

            <div id="userdetails-terms-and-conditions" class="hide">
                <div class="modal-header">
                    <h3 id="userdetails-modal-title">__MSG__TERMS_AND_CONDITIONS__</h3>
                </div>
                <div id="userdetails-terms-and-conditions-container" class="modal-body"><!-- --></div>
                <div class="modal-footer">
                    <button type="button" id="userdetails-back" class="btn btn-primary pull-right">__MSG__BACK__</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="userdetails-accept-terms-and-conditions-template"><!--
    {var termsAndConditionsLink = '<a href="#" role="button" id="userdetails-accept-terms-and-conditions-button" class="oae-plain-link">__MSG__TERMS_AND_CONDITIONS__</a>'}
    <label for="userdetails-accept-terms-and-conditions" class="checkbox control-label">
        <input type="checkbox" id="userdetails-accept-terms-and-conditions" class="required" name="termsandconditions"/> __MSG__I_AGREE_TO_THE_TERMS_AND_CONDITIONS__
    </label>
    <div class="help help-block"></div>
--></div>

<div id="userdetails-terms-and-conditions-template"><!--
    <div class="well">
        <div class="oae-markdown">${oae.api.util.security().encodeMarkdownForHTMLWithLinks(terms)}</div>
    </div>
--></div>

<!-- JAVASCRIPT -->
<script type="text/javascript" src="js/userdetails.js"></script>