template: implement newuser form validation

diff --git a/src/newslash_web/public/js/new-user.js b/src/newslash_web/public/js/new-user.js
new file mode 100644 (file)
index 0000000..0bd3804
--- /dev/null
+++ b/src/newslash_web/public/js/new-user.js
@@ -0,0 +1,65 @@
+var newUser = {};
+
+newUser.run = function run(params) {
+  var nickRegex = /^[a-zA-Z_][ a-zA-Z0-9$_.+!*\'(),-]{0,19}$/;
+
+  Vue.component('new-user-error-message', {
+    props: { error: String, target: String },
+    template: '#newuser-error-message',
+  });
+
+  var data = {
+    unickname: "",
+    email: "",
+    email2: "",
+    allowNewsletter: 1,
+    allowHeadline: 0,
+    unicknameError: "BLANK_ID",
+    emailError: "BLANK_EMAIL",
+    formError: true,
+  };
+
+  var methods = {};
+  methods.doPost = function doPost() {
+    newslash.validateNewUser(this.unickname, this.email).then(
+      (resp) => {
+        // ok
+      },
+      (resp) => {
+        // failed
+        this.emailError = resp.email_error || false;
+        this.unicknameError = resp.id_error || false;
+        this.unicknane = resp.nickname || false;
+        this.email = resp.email || false;
+        this.formError = true;
+      });
+  };
+
+  // form value validations
+  var watch = {};
+  watch.unickname = function watchUnickname(val, oldVal) {
+    if (val.length == 0) { this.unicknameError = "BLANK_ID"; }
+    else if (!nickRegex.test(val)) { this.unicknameError = "INVALID_ID"; }
+    else { this.unicknameError = false; }
+    this.formError = this.emailError || this.unicknameError;
+  };
+  watch.email = function watchEmail(val, oldVal) {
+    if (val.length == 0) { this.emailError = "BLANK_EMAIL"; }
+    else if (val != this.email2) { this.emailError = "EMAIL_NOT_MATCH"; }
+    else { this.emailError = false; }
+    this.formError = this.emailError || this.unicknameError;
+  };
+  watch.email2 = function watchEmail2(val, oldVal) {
+    if (val != this.email) { this.mailError = "EMAIL_NOT_MATCH"; }
+    else { this.emailError = false; }
+    this.formError = this.emailError || this.unicknameError;
+  };
+  
+  var vm = new Vue({
+    el: params.el,
+    data: data,
+    methods: methods,
+    watch: watch,
+  });
+
+};

diff --git a/src/newslash_web/templates/login/newuser.html.tt2 b/src/newslash_web/templates/login/newuser.html.tt2
index df23484..0ab6c26 100644 (file)
--- a/src/newslash_web/templates/login/newuser.html.tt2
+++ b/src/newslash_web/templates/login/newuser.html.tt2
@@ -1,10 +1,20 @@
 [% WRAPPER common/layout %]
 
+<script type="text/x-template" id="newuser-error-message">
+  <div class="alert-error"      v-if="error == 'BLANK_ID'">IDを入力してください</div>
+  <div class="alert-error" v-else-if="error == 'INVALID_ID'">IDに不正な文字が使われています。</div>
+  <div class="alert-error" v-else-if="error == 'ID_EXISTS'">すでにそのIDは使われています。</div>
+  <div class="alert-error" v-else-if="error == 'BLANK_EMAIL'">メールアドレスを入力してください。</div>
+  <div class="alert-error" v-else-if="error == 'INVALID_EMAIL'">不正なメールアドレスです。</div>
+  <div class="alert-error" v-else-if="error == 'EMAIL_NOT_MATCH'">確認用メールアドレスと一致しません。</div>
+  <div class="alert-error" v-else-if="error == 'EMAIL_EXISTS'">すでにそのメールアドレスは登録されています。</div>
+</script>
+
 <div class="main-contents" id="new-user-prefs">
   <div class="panel">
     <h3>アカウント作成</h3>
     <form id="new-user-form" action="/my/newuser" method="POST">
-      <label>ログインID（半角英数字）：
+      <label>ログインID（半角英数字、最大20文字）：
         [%- IF prefs.id_error %]
         <div class="alert-error">
           [%- IF prefs.id_error == "BLANK_ID" -%]IDを入力してください。
@@ -13,20 +23,22 @@
           [%- ELSE %]IDエラー[% END -%]
         </div>
         [%- END %]
-        <input id="unickname" type="text" name="unickname" placeholder="ログインID" v-model="newUser.unickname"
+        <new-user-error-message :error="unicknameError"></new-user-error-message>
+        <input id="unickname" type="text" name="unickname" placeholder="ログインID" v-model="unickname"
                value="[% prefs.unickname %]"/>
       </label>
 
       <label>メールアドレス：
         [%- IF prefs.mail_error %]
         <div class="alert-error">
-          [%- IF prefs.mail_error == "BLANK_MAIL" -%]メールアドレスを入力してください。
-          [%- ELSIF prefs.mail_error == "INVALID_MAIL" -%]不正なメールアドレスです。
-          [%- ELSIF prefs.mail_error == "MAIL_NOT_MATCH" -%]確認用メールアドレスと一致しません。
-          [%- ELSIF prefs.mail_error == "ID_EXISTS" %]すでにそのメールアドレスは登録されています。
+          [%- IF prefs.mail_error == "BLANK_EMAIL" -%]メールアドレスを入力してください。
+          [%- ELSIF prefs.mail_error == "INVALID_EMAIL" -%]不正なメールアドレスです。
+          [%- ELSIF prefs.mail_error == "EMAIL_NOT_MATCH" -%]確認用メールアドレスと一致しません。
+          [%- ELSIF prefs.mail_error == "EMAIL_EXISTS" %]すでにそのメールアドレスは登録されています。
           [%- ELSE %]メールアドレスエラー[% END -%]
         </div>
         [%- END %]
+        <new-user-error-message target="email" :error="emailError"></new-user-error-message>
         <input id="email" type="text" name="email" v-model="email" placeholder="メールアドレス"
                value="[% prefs.email %]"/>
       </label>
@@ -38,18 +50,17 @@
 
       <label>
         <input type="checkbox" id="allow-newsletter" name="allow_newsletter"
-               [% IF !prefs.disallow_newsletter %]checked="checked"[% END %] value="1" v-model="newUser.allowNewsletter" />
+               [% IF !prefs.disallow_newsletter %]checked="checked"[% END %] value="1" v-model="allowNewsletter" />
         ニュースレターを受け取る
       </label>
 
       <label>
         <input type="checkbox" id="allow-headline" name="allow_headline"
-               [% IF prefs.allow_headline %]value="1"[% END %] v-model="newUser.allowHeadline" />
+               [% IF prefs.allow_headline %]value="1"[% END %] v-model="allowHeadline" />
         毎日のヘッドラインを受け取る
       </label>
 
-      <input class="btn btn-primary" type="submit" v-on:click="create()" value="アカウントを作成する" />
-      <span v-text="message"></span>
+      <input class="btn btn-primary" :disabled="formError" type="submit" @click.prevent.stop:="doPost" value="アカウントを作成する" />
     </form>
   </div><!-- .panel -->
 </div>