Allow user changes their password in RoundCube webmail

After installed RoundCube for my customer, they asked: user can change their own password

To do this, we have to enable password plugin of RoundCube

  1. cd plugins/password
  2. cp config.inc.php.dist config.inc.php
  3. nano  config.inc.php
  4. Set $rcmail_config[‘password_driver’] = ‘sql';
  5. Save file
  6. cd ../config
  7. nano main.inc.php
  8. Find the line $rcmail_config[‘plugins’] = array(); and change to $rcmail_config[‘plugins’] = array( ‘password’);
  9. Save file

If you finish 9 steps above and access to RoundCube, you will see the Password tab in Settings section. However, you maybe meet the error:

1
[1305] FUNCTION xxx_roundcube.update_passwd does not exist (SQL Query: SELECT update_passwd('', '@'))

The simplest way is modify password_query:

  1. Find  $rcmail_config[‘password_query’] in plugins/password/config.inc.php
  2. Change $rcmail_config[‘password_query’] = ‘SELECT update_passwd(%c, %u)'; to $rcmail_config[‘password_query’] = ‘UPDATE zpanel_postfix.mailbox SET password=CONCAT(\'{PLAIN-MD5}\’,MD5(%p)) WHERE username=%u AND password=CONCAT(\'{PLAIN-MD5}\’,MD5(%o)) LIMIT 1′;

All done!

AngularJS ng-view problem on Firefox

By default, multiple ng-view is not supported by AngularJS. Assume that we have some pages with different layout as the code bellow:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container-master" ng-switch on="layout">	 	
	<div ng-switch-when="landing" ng-view></div>	 	 
	<div ng-switch-when="404">
		<div ng-include src="'views/header.html'"></div>	 	 		
		<div ng-view></div>	 	 			
	</div>	 	 	
	<div ng-switch-when="default">	 	 
		<div ng-include src="'views/header.html'"></div>	 	 
		<div id="container">
			<div id="sidebar-right">
				<div class="site-ad">
					<img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad">
					<img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad">
				</div>
			</div>
			<div id="main-content" ng-view></div>
		</div>		
	</div>
</div>

As you can see, we have 3 ng-view directive and use ng-switch to decide which layout will be used. When running on Chrome browser, everything is fine. AngularJS uses only one ng-view (which matched with ng-switch-when). But on Firefox, the data will be put to all ng-view, but only the div which matched with ng-swith-when is shown (the other is hidden), it also sends as many request as ng-view has, too.

Currently I cannot find the solution for this case so I reorganized the HTML to use only one ng-view:

1
2
3
4
5
6
7
8
9
10
11
<div ng-include src="'views/header.html'" ng-show="layout != 'landing'"></div>	 	
	<div id="container" ng-class="{'landing-wrapper': layout != 'default'}">	 	 
		<div id="sidebar-right" ng-show="layout == 'default'">	 	 		
			<div class="site-ad">	 	 		
				<img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad">
				<img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad">
			</div>
		</div>	 	 
	</div>
	<div id="main-content" ng-view></div>	 	 	
</div>

It works!!!

Sửa lỗi background bị giật khi swipe qua lại trên Ipad

Hôm nay tìm ra & fix được lỗi rất chuối khi swipe trên Ipad thì background image có thuộc tính background-size: cover bị giật.

Lý do là background image không hiểu do vô tình hay cố ý bị nhét thêm thuộc tính: no-repeat vào. Theo như mô tả của W3shools thì giá trị cover của background-size là:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Rõ ràng, nếu đã scale tới giá trị lớn nhất có thể của kích thước containner thì no-repeat không cần thiết nữa, thử bỏ nó đi và đúng là lỗi đã được fix thật :)

Cập nhật: sau khi test lại thì lỗi chính xác là do thuộc tính background-attachment: fixed gây ra. Hiện vẫn chưa biết giải quyết thế nào với trường hợp này, vì nếu bỏ “fixed” đi thì với page có nội dung dài thì background sẽ không scale được toàn bộ màn hình :(