view.js

import PropTypes from 'prop-types';
import { Component } from 'react';
import reducerMixin from 'Core/reducerMixin';
import PasswordReducer from '../reducer';
import Button from 'Src/components/controls/button/button';
import Input from 'Src/components/controls/textField/textField';
import './index.css';
import Router from 'next/router';
import { inquirePwdPrompt } from 'Src/modules/passwordModule/action';
import { connect } from 'react-redux';
import { isMobile } from 'Src/core/checkDevice';
import Mask from 'Components/controls/mask';

let reGetOtpTime = 30;
let verCodeLifeTime =575;
export class Index extends Component {
	constructor(props) {
		super(props);
		this.state = {
			sms: true,
			email: false,
			askLoginPwd: true,
			askTransactionPwd: false,
			isMobile: false,
			otpEnable:true,
			reGetOtp:reGetOtpTime,
			verCodeLife:verCodeLifeTime,
			verCodeMessage:''
		};

		this.inquirePwd = this.inquirePwd.bind(this);
		this.setAskPwd = this.setAskPwd.bind(this);
		this.getOTP = this.getOTP.bind(this);
		this.timeFormate = this.timeFormate.bind(this);
	}

	componentDidMount(){
		this.setState({
			isMobile:isMobile()
		});		
	}

	setAskPwd(input) {
		//del
	}

	inquirePwd() {
		// del
	}

	getOTP(){
		let phoneVaildSta = this.getPhoneVaildSta();
		if(phoneVaildSta){
			if(this.state.otpEnable){			
				//限定秒數內不得重新取得 can't re get the code in 30 sec
				let otpTimer = setInterval(()=>{
					this.setState({
						reGetOtp:(--this.state.reGetOtp)
					});
					
					if(this.state.reGetOtp<=0){
						clearInterval(otpTimer);
						this.setState({
							reGetOtp:reGetOtpTime,
							otpEnable:true
						});
					}

				},1000);

				//計算驗證碼有效時間 count the ver code lifetime
				if(this.state.verCodeLife==verCodeLifeTime){
					let verCodeTimer=setInterval(()=>{
						this.setState({
							verCodeLife:(--this.state.verCodeLife)
						});

						if(this.state.verCodeLife<=0){
							clearInterval(verCodeTimer);
							this.setState({
								verCodeLife:verCodeLifeTime,
								verCodeMessage:'請重新取得驗證碼' //pls re get the ver code
							});
						}
					},1000);
				}

			}

			this.setState({
				otpEnable:false
			});
		}

		//dispatch api event
	}

	timeFormate(sec){
		let s = sec%60;
		let m= parseInt(sec/60);
		let mzero = '';
		let szero = '';
		if(m<=9){mzero='0'}
		if(s<=9){szero='0'}
		return mzero+m+":"+szero+s;
	}

	componentWillReceiveProps(nextProps){
		//del
	}

	render() {
		const Sms = () => {
			return (
				<div>
					{mobileDevice ? (
						//del
					) : (
					//pc or tablet
						<div className="d-none d-sm-block">
							<span>簡訊認證</span> {/*SMS verification */}
							<div className="input-group">
								<Input
									vaildType="phonenum"
									vaildSta={(foo) => { this.getPhoneVaildSta = foo; }}
									className="ingroup"
									type="text"
									hintText='請輸入手機號碼' //input your phone number
									inputRef={(input) => { this.smsPhoneNum = input; }}
								/>
								<button								
									type="button"
									className={this.state.otpEnable?('input-span'):('input-span otp-disable')}
									onClick={()=>{this.getOTP();}}
								>
									{this.state.otpEnable?('立即取得驗證碼' /*get verification code now*/):('重新取得:'+this.state.reGetOtp) /*re get verification code*/} 
								</button>
							</div>
							<div className="check-code">
								<span>簡訊驗證碼</span>
								<span className="countdown">
									{(this.state.verCodeLife===verCodeLifeTime)?(
										this.state.verCodeMessage
									):(
										'驗證碼有效時間：'+this.timeFormate(this.state.verCodeLife) //the verification code's lifetime
									)}
								</span>
							</div>
							<Input
								vaildType="notnull"
								vaildSta={(foo) => {this.getVerificationCodeVaildSta = foo;}}
								type="text"
								hintText='請輸入從簡訊收到的驗證碼' //input your verification code
								width='100%'
								inputRef={(input) => { this.smsVerificationCode = input; }}
							/><br />
						</div>
					)}
				</div>
			);
		};

		const Email = () => {
			//del
		};

		//
		let state = this.props.state;
		let mobileDevice = this.state.isMobile;

		return (
			<div className="col">
				<Mask open={state.loading}/>
				{mobileDevice ? (
					//del
				) : (
				//pc or tablet
					<div id="askfor">
						<form className="card container askfor-block d-none d-sm-block">
							<p className="title">密碼查詢</p> 
							<div className="row">
								<div className="col-12 col-lg-6">
									<span>請選擇您欲查詢之密碼別</span><br />
									<input
										type="radio"
										value="login-password"
										name="ask-pwd"
										defaultChecked={this.state.askLoginPwd}
										ref={(input) => { this.pwdTypeIsLoginPwd = input; }}
										onClick={() => { this.setAskPwd(this.pwdTypeIsLoginPwd.value); }}
									/>
									<p className="radio">登入密碼</p>
									<input
										type="radio"
										value="transaction-password"
										name="ask-pwd"
										className="radio-second"
										defaultChecked={this.state.askTransactionPwd}
										ref={(input) => { this.pwdTypeIsTransactionPwd = input; }}
										onClick={() => { this.setAskPwd(this.pwdTypeIsTransactionPwd.value); }}
									/>
									<p className="radio">交易密碼</p><br />
									<span>身分證字號</span><br />
									<Input							
										vaildType="idnum"
        			        			vaildSta={(foo) => { this.getIdnumVaildSta = foo; }}
										type="text"
										hintText='請輸入身分證字號或營利事業統一編號'
										width='100%'
										inputRef={(input) => { this.idnum = input; }}
									/>
								</div>
								<div className="col-12 col-lg-6">
									<span>請選擇取得驗證碼的方式</span><br />
									<input
										ref={(input) => { this.verificationCodeBySms = input; }}
										type="radio"
										name="code-type"
										value="sms"
										defaultChecked={this.state.sms ? true : false}
										onFocus={() => { this.setState({ sms: true, email: false }); }}
									/>
									<p className="radio">手機簡訊驗證</p>
									<input
										ref={(input) => { this.verificationCodeByEmail = input; }}
										type="radio"
										name="code-type"
										value="email"
										className="radio-second"
										defaultChecked={this.state.email ? true : false}
										onFocus={() => { this.setState({ sms: false, email: true }); }}
									/>
									<p className="radio">電子信箱資料驗證</p><br />									
									{this.state.sms ? <Sms /> : ''} {/*<= the timer is in here */}
									{this.state.email ? <Email /> : ''}
									<Button
										inputRef={(input) => { this.applyBtn = input; }}
										fontSize='24px'
										label="確認送出"
										onClick={this.inquirePwd}
									/>
									{/* <div className="link-button-block">
											<Link href='/?page=askforsuccess'><a className="btn-dark-green link-button">確認送出</a></Link>
										</div> */}
								</div>
							</div>
						</form>
					</div>
				)}
			</div>
		);
	}
}

Index.propTypes = {
	dispatch: PropTypes.func,
	inquirePwdPromptSta: PropTypes.string
};

function mapToPorps(state) {
	return {
		state: state.PasswordReducer
	};
}

export default reducerMixin(connect(mapToPorps)(Index), { PasswordReducer });