Yii2: Create Advanced Lock Screen Web Application with Javascript Part 2

lockscreen Melanjutkan artikel sebelumnya, sebenarnya ada bug pada tutorial sebelumnya yaitu ketika setelah beberapa saat user idle atau tidak melakukan aktifitas apapun maka aplikasi akan otomatis redirect ke halaman lockscreen, nah disinilah bugnya. Apabila user tidak segera datang dan login maka token dari form akan expired.. sehingga ketika login akan muncul error token invalid..

Nah solusi yang penulis tawarkan adalah.. aplikasi tidak langsung redirect.. namun hanya menulis status saja bahwa user sedang idle. Kemudian ketika user datang atau melakukan aktifitas lagi.. baru kemudian halaman diredirect ke lock screen.. dengan cara ini akan mengurangi kemungkinan expired token.. (mengurangi.. karena kalo misal ada kucing lewat dan nyenggol mouse.. :))

Tantangan kedua adalah, kita ingin agar ketika user telah login, maka url akan meredirect ke halaman yang sebelumnya user tinggalkan. Defaultnya kan setelah login, kembali ke halaman home.

Oke untuk itu, kode JS penulis ubah menjadi seperti ini:

$this->registerJs("
			var goLockScreen = false;
			var stop = false;
			var autoLockTimer;
			window.onload = resetTimer;
			window.onmousemove = resetTimer;
			window.onmousedown = resetTimer; // catches touchscreen presses
			window.onclick = resetTimer;     // catches touchpad clicks
			window.onscroll = resetTimer;    // catches scrolling with arrow keys
			window.onkeypress = resetTimer;

			function lockScreen() {
				stop = true;
				window.location.href = '".\yii\helpers\Url::toRoute(['/site/lock-screen'])."?previous='+encodeURIComponent(window.location.href);
			}
			
			function lockIdentity(){
				goLockScreen = true;
			}
			
			function resetTimer() {
				if(stop==true){
				
				}
				else if (goLockScreen) {
					lockScreen();				
				}
				else{
					clearTimeout(autoLockTimer);
					autoLockTimer = setTimeout(lockIdentity, 1000*15*60);  // time is in milliseconds						
				}
					
			}
		");

Kemudian pada site controller, update action lockScreen, kira2 begini

public function actionLockScreen($previous)
    {
		if(isset(Yii::$app->user->identity->username)){
			// save current username	
			$username = Yii::$app->user->identity->username;
			// force logout		
			Yii::$app->user->logout();
			// render form lockscreen
			$model = new LoginForm(); 
			$model->username = $username;	//set default value	
			return $this->render('lockScreen', [
				'model' => $model,
				'previous' => $previous,
			]);  
        }
		else{
			return $this->redirect(['login']);
		}
    }

Lalu pada action Login, ubah menjadi begini

    public function actionLogin($previous="")
    {
        if (!\Yii::$app->user->isGuest) {
            return $this->goHome();
        }

        $model = new LoginForm();
        if ($model->load(Yii::$app->request->post()) && $model->login()) {
			if(!empty($previous)){
				return $this->redirect($previous);
			}
			else{
				return $this->goBack();
			}
        } else {
            return $this->render('login', [
                'model' => $model,
            ]);
        }
    }

Initinya tambahkan variabel previous url..

Selesai..

Tags:
8 Comments
  1. ratdiyanti
  2. gilang
  3. bayu
  4. Rin
  5. Rino
    • Hafid Mukhlasin
      • Rino

Leave a Reply

Your email address will not be published. Required fields are marked *