plz / templates / new / org.html
87 lines · 78 sloc · 3.03 KB · 4de5ced2a76bc53b998b59aafbda96221ab37dfe
Raw 


1<!DOCTYPE html>


2<html>


3    <head>


4        @include '../layout/head.html'


5    </head>


6    <body>


7        @include '../layout/header.html'


8


9        <div class="content">


10            <div class="new-org">


11                <div class="new-org__header">


12                    <p class="new-org__subtitle">%new_org_subtitle</p>


13                    <h1>%new_org_title</h1>


14                </div>


15


16                @if ctx.form_error != ''


17                    <div class='form-error'>@ctx.form_error</div>


18                @end


19


20                <form class="new-org__form" method='post' action='/organizations/new'>


21                    <div class="new-org__field">


22                        <label class="new-org__label" for="org_name">%new_org_name <span class="new-org__req">*</span></label>


23                        <input id="org_name" class="new-org__input" type='text' name='org_name' required autofocus maxlength=@max_username_len>


24                        <p class="new-org__hint">%new_org_name_hint</p>


25                        <p class="new-org__hint">%new_org_url_hint https://@app.config.hostname/<span class="new-org__url-slot" id="url_slot"></span></p>


26                    </div>


27


28                    <div class="new-org__field">


29                        <label class="new-org__label" for="contact_email">%new_org_contact_email <span class="new-org__req">*</span></label>


30                        <input id="contact_email" class="new-org__input" type='email' name='contact_email' required>


31                    </div>


32


33                    <div class="new-org__field">


34                        <p class="new-org__label">%new_org_belongs_to</p>


35                        <label class="new-org__option">


36                            <input type="radio" name="org_kind" value="personal" required>


37                            <span class="new-org__option-body">


38                                <span class="new-org__option-title">%new_org_personal</span>


39                                <span class="new-org__option-desc">


40                                %new_org_personal_example @ctx.user.username


41                                @if ctx.user.full_name != ''


42                                    (@ctx.user.full_name)


43                                @end


44                            </span>


45                            </span>


46                        </label>


47                        <label class="new-org__option">


48                            <input type="radio" name="org_kind" value="business" required>


49                            <span class="new-org__option-body">


50                                <span class="new-org__option-title">%new_org_business</span>


51                                <span class="new-org__option-desc">%new_org_business_example</span>


52                            </span>


53                        </label>


54                    </div>


55


56                    <div class="new-org__field new-org__field--inline">


57                        <label class="new-org__checkbox">


58                            <input type="checkbox" id="accept_terms" name="accept_terms" value="1" required>


59                            <span>%new_org_accept_terms</span>


60                        </label>


61                    </div>


62


63                    <div class="new-org__actions">


64                        <input id="new_org_submit" type='submit' class='new-org__submit' value='%new_org_next' disabled>


65                    </div>


66                </form>


67            </div>


68        </div>


69


70        <script>


71            (function() {


72                var nameInput = document.getElementById('org_name');


73                var slot = document.getElementById('url_slot');


74                var terms = document.getElementById('accept_terms');


75                var submit = document.getElementById('new_org_submit');


76                function syncUrl() { slot.textContent = nameInput.value; }


77                function syncSubmit() { submit.disabled = !terms.checked; }


78                nameInput.addEventListener('input', syncUrl);


79                terms.addEventListener('change', syncSubmit);


80                syncUrl();


81                syncSubmit();


82            })();


83        </script>


84


85        @include '../layout/footer.html'


86    </body>


87</html>


88