| 前のリビジョン | |
| apps:public:member_entry [2020/07/01 20:11] – admin | — |
|---|
| <WRAP page-title> | |
| ====== 会員登録 ====== | |
| <php> | |
| echo '<div class="small text-right">'; | |
| $pinfo = $GLOBALS['TEMPLATE']->getPageInfo(); | |
| echo '</div>'; | |
| </php> | |
| </WRAP> | |
| |
| <html> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <script src="https://kit.fontawesome.com/1bd0cc9316.js" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> | |
| <script src="https://unpkg.com/http-vue-loader"></script> | |
| <script src="https://unpkg.com/vuejs-paginate@latest"></script> | |
| <script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.js"></script> | |
| <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script> | |
| |
| <div id="app"> | |
| <div class="row"> | |
| <div class="col-sm-2"></div> | |
| <div class="col-sm-8"> | |
| <ul> | |
| <li>公認審判員、賛助会員はこちらから会員登録をお願いいたします。</li> | |
| <li>こちらから、ログインID、パスワード、メールアドレスを登録頂いた後、詳細をご登録頂く案内を記載したメールをお送りします。</li> | |
| </ul> | |
| <hr/> | |
| </div> | |
| <div class="col-sm-2"></div> | |
| </div> | |
| <div class="form-horizontal"> | |
| <div class="form-group" v-bind:class="{ 'has-error': errors.login }"> | |
| <label class="col-sm-4 control-label">ログインID</label> | |
| <div class="col-sm-6"> | |
| <input type="text" class="form-control" placeholder="" v-model="item.login"> | |
| <span>半角英数記号 3 文字以上で入力してください.</span><br/> | |
| <span v-show="errors.login" class="text-danger">{{ errors.login }}</span> | |
| </div> | |
| </div> | |
| <div class="form-group" v-bind:class="{ 'has-error': errors.password }"> | |
| <label class="col-sm-4 control-label">パスワード</label> | |
| <div class="col-sm-6"> | |
| <div class="input-group"> | |
| <input type="password" class="form-control" placeholder="" v-model="item.password"> | |
| <span class="input-group-btn"> | |
| <button type="button" class="btn btn-default" @click="display_password = !display_password">確認</button> | |
| </span> | |
| </div> | |
| <h4 v-show="display_password"><span class="label label-info">{{ item.password }}</span></h4> | |
| <span>半角英数記号 6 文字以上で入力してください.</span><br/> | |
| <span v-show="errors.password" class="text-danger">{{ errors.password }}</span> | |
| </div> | |
| </div> | |
| <div class="form-group" v-bind:class="{ 'has-error': errors.email }"> | |
| <label class="col-sm-4 control-label">メールアドレス</label> | |
| <div class="col-sm-6"> | |
| <input type="email" class="form-control" required="true" v-model="item.email"> | |
| <span class="text-danger" v-show="errors.email">{{ errors.email }}</span> | |
| </div> | |
| </div> | |
| <div class="form-group" v-bind:class="{ 'has-error': errors.recaptcha }"> | |
| <label class="col-sm-4 control-label"></label> | |
| <div class="col-sm-6"> | |
| <vue-recaptcha sitekey="6LfmGOAUAAAAAGgzcpNWN-A--6ggRfnYAE94IOR3" ref="invisibleRecaptcha"></vue-recaptcha> | |
| <span class="text-danger" v-show="errors.recaptcha">{{ errors.recaptcha }}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-xs-12" style="text-align: right"> | |
| <button type="button" class="btn btn-default" @click="clearItemHandler">取消</button> | |
| <button type="button" class="btn btn-primary" @click="showConfirmModalHandler">登録</button> | |
| </div> | |
| </div> | |
| <confirm-modal ref="confirmModal" @apply-item="applyItemHandler"></confirm-modal> | |
| </div> | |
| |
| <!-- 入力確認モーダル --> | |
| <script type="text/x-template" id="confirm-modal-template"> | |
| <modal-base modal-id="confirmModal"> | |
| <template v-slot:header> | |
| <h4 class="modal-title">入力内容のご確認</h4> | |
| </template> | |
| <template v-slot:body> | |
| <div class="form-horizontal"> | |
| <div class="form-group"> | |
| <label class="col-sm-4 control-label">ログインID</label> | |
| <div class="col-sm-6" style="padding-top: 7px;">{{ item.login }}</div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="col-sm-4 control-label">パスワード</label> | |
| <div class="col-sm-6" style="padding-top: 7px;">********</div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="col-sm-4 control-label">メールアドレス</label> | |
| <div class="col-sm-6" style="padding-top: 7px;">{{ item.email }}</div> | |
| </div> | |
| </div> | |
| </template> | |
| <template v-slot:footer> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> | |
| <button type="button" class="btn btn-primary" @click.prevent.stop="applyButtonClickHandler">登録</button> | |
| </template> | |
| </modal-base> | |
| </script> | |
| |
| <script src=/lib/components/public/member_entry.js></script> | |
| |
| </html> | |