[popup] added 'password.change' with API

public_html/asset/svg/minipopup.leave.svg

@@ -22,7 +22,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -49,7 +49,7 @@
      inkscape:window-maximized="1"
      inkscape:current-layer="svg898" />
   <path
-     style="fill:#e65835;stroke-width:1.125;fill-opacity:1"
+     style="fill:#737f8d;stroke-width:1.125;fill-opacity:1"
      d="M 6.1875 2.25 C 4.2932137 2.25 2.25 4.2794175 2.25 6.2382812 C 2.25 8.1971449 4.2932138 10.125 6.1875 10.125 C 8.0817857 10.125 10.125 8.1971449 10.125 6.2382812 C 10.125 4.2794175 8.0817857 2.25 6.1875 2.25 z M 13.595703 7.1757812 L 12.800781 7.9707031 L 14.392578 9.5625 L 12.800781 11.154297 L 13.595703 11.949219 L 15.1875 10.357422 L 16.779297 11.949219 L 17.574219 11.154297 L 15.982422 9.5625 L 17.574219 7.9707031 L 16.779297 7.1757812 L 15.1875 8.7675781 L 13.595703 7.1757812 z M 6.1875 11.25 C 3.8989283 11.25 0 12.743836 0 15.101562 L 0 16.875 L 12.375 16.875 L 12.375 15.101562 C 12.375 12.743836 8.4760714 11.25 6.1875 11.25 z "
      transform="scale(0.88888889)"
      id="path969" />

public_html/asset/svg/minipopup.password.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h18v18H0z"/>
+    <path fill="#737F8D" d="M9 9h5.25c-.3975 3.0825-2.46 5.835-5.25 6.69V9H3.75V4.725L9 2.3925V9zm0 0H3.75c.3975 3.0825 2.46 5.835 5.25 6.69V9h5.25V4.725L9 2.3925V9zM9 .75l-6.75 3v4.5c0 4.1625 2.88 8.0475 6.75 9 3.87-.9525 6.75-4.8375 6.75-9v-4.5L9 .75z"/>
+  </g>
+</svg>

webpack/lib/authentication.js

@@ -26,7 +26,16 @@ export default class Authentication{
 	*
 	---------------------------------------------------------*/
 	// TOKEN
-	get token(){       return this.lsi.fetch('token');        }
+	get token(){
+		let tok = this.lsi.fetch('token');
+
+		// redirect if on 'auth' page
+		if( tok === null && gs.get.authed )
+			document.location = '';
+
+		return tok;
+	}
+
 	set token(_token){ return this.lsi.push('token', _token); }
 
 	// USER DATA

webpack/lib/content-controller.js

@@ -77,7 +77,7 @@ export default class ContentController{
 	change_username(username=null){
 
 		/* (1) Error: if invalid user_id */
-		if( typeof username !== 'string' || username.length < 3 )
+		if( typeof username !== 'string' || !/^[a-z0-9_-]{3,20}$/i.test(username) )
 			return false;
 
 		/* (2) Error: unknown user */
@@ -85,7 +85,7 @@ export default class ContentController{
 			return false;
 
 		/* (3) Call api UPDATE */
-		api.call(`PUT /user/${this.uid}`, { username: username, password: null }, function(rs){
+		api.call(`PUT /user/${this.uid}`, { username: username }, function(rs){
 
 			// manage error
 			if( rs.error !== 0 )
@@ -109,5 +109,29 @@ export default class ContentController{
 	}
 
 
+	/* (7) Change password
+	*
+	* @password<String>				New password
+	*
+	---------------------------------------------------------*/
+	change_password(password=null){
+
+		/* (1) Error: if invalid user_id */
+		if( typeof password !== 'string' || !/^[^<>\/\\]{8,50}$/.test(password) )
+			return false;
+
+		/* (2) Error: unknown user */
+		if( this.uid == null  )
+			return false;
+
+		/* (3) Call api UPDATE */
+		api.call(`PUT /user/${this.uid}`, { password: password }, () => {}, auth.token);
+
+		/* (4) Error */
+		return true;
+
+	}
+
+
 
 }

webpack/lib/popup-controller.js

@@ -66,6 +66,15 @@ export default class PopupController{
 			reset(){ },
 			submit(){ gs.get.channel.remove() && this.parent.hide(); }
 		});
+		/* (6) Change password */
+		this.register('password.change', {
+			data: {
+				password: '',
+				confirm: ''
+			},
+			reset(){ this.data.password = ''; this.data.confirm = ''; },
+			submit(){ this.data.password === this.data.confirm && gs.get.content.change_password(this.data.password) && this.parent.hide(); }
+		});
 
 
 	}

webpack/vue/auth/dialog.vue

@@ -61,6 +61,7 @@
 			&[data-icon='remove']{   background-image: url('/asset/svg/minipopup.remove.svg');   }
 			&[data-icon='logout']{   background-image: url('/asset/svg/minipopup.logout.svg');   }
 			&[data-icon='leave']{   background-image: url('/asset/svg/minipopup.leave.svg');   }
+			&[data-icon='password']{   background-image: url('/asset/svg/minipopup.password.svg');   }
 
 			&:hover{ background-color: #f9f9f9;	color: #737f8d; }
 
@@ -104,6 +105,7 @@
 				<span class ='invalid-h'   data-icon='remove'   @click='gs.popup.show(`channel.remove`);  minipop=false'>Remove channel</span>
 				<span                      data-icon='category' @click='gs.popup.show(`room.create`);     minipop=false'>Create room</span>
 				<span                      data-icon='edit'     @click='gs.popup.show(`nickname.change`); minipop=false'>Change nickname</span>
+				<span                      data-icon='password' @click='gs.popup.show(`password.change`); minipop=false'>Change password</span>
 				<span class='sb invalid-h' data-icon='leave'    @click='gs.popup.show(`channel.leave`);   minipop=false'>Leave channel</span>
 				<span class='sb invalid'   data-icon='logout'   @click='gs.auth.token=null; gs.refresh()'>Logout</span>
 			</div>

webpack/vue/auth/wrapper.vue

@@ -112,6 +112,24 @@
 			</span>
 		</div>
 
+		<!-- Pop-up PASSWORD CHANGE -->
+		<div class='popup' v-show='gs.popup.get(`password.change`).active'>
+			<span class='header'>Change password</span>
+
+			<span class='body form'>
+				<label for='password'>New password</label>
+				<input type='password' name='password' v-model='gs.popup.get(`password.change`).data.password'>
+
+				<label for='password'>Confirmation</label>
+				<input type='password' name='password' v-model='gs.popup.get(`password.change`).data.confirm'>
+			</span>
+
+			<span class='footer form'>
+				<button @click='gs.popup.hide()'>Cancel</button>
+				<button class='submit' @click='gs.popup.get(`password.change`).submit()'>Update</button>
+			</span>
+		</div>
+
 	</div>