커즐(kuzzle) 활용 예시 1(회원가입) v5.x

// 가입 조건 유효성 검사 및 가입하기 구현 ts

import { Component, OnInit } from '@angular/core';

import { LoadingController, AlertController, NavController } from '@ionic/angular';

import Kuzzle from 'kuzzle-sdk/dist/kuzzle.js';

@Component({

selector: 'app-singup',

templateUrl: './singup.page.html',

styleUrls: ['./singup.page.scss'],

})

export class SingupPage implements OnInit {

public type = 'password';

public showPass = false;

kuzzle: any;

userid: any;

username: any;

usernickname: any;

userpwd: any;

userpwdCon: any;

special_pattern = /[`~!@#$%^&*|\\\'\";:\/?]/gi;

blank_pattern = /[\s]/g;

id_input_pattern = /^[a-z](?=.*[a-z])(?=.*[0-9]).{4,14}$/;

pwd_input_pattern = /^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-.,:;]).{8,}$/;

errorInfo = {idError1 : true, idError2 : false, idError3 : false, idError4 : false, pwdError1 : true,

pwdError2 : false, pwdError3 : true, pwdError4 : false};

pleaseEnterId = '※ 아이디를 입력해 주세요.';

pleaseEnterPwd = '※ 비밀번호를 입력해 주세요.';

notBlankPwdAndAddSpecialPatternPwd = '※ 영문 소문자, 숫자, 특수문자를 포함하여 8자 이상으로 공백없이 입력해

주세요.';

pleaseConfirmPassword = '※ 비밀번호가 일치하지 않습니다.';

pleaseEnterPhone = '※ 연락처를 정확히 입력해 주세요.';

notBlankIDAndNotSpecialPatternID = '※ 아이디에 공백 또는 특수문자를 사용할 수 없습니다.';

requiredInformation = '※ 필수 정보입니다.';

greatId = '※ 멋진 아이디네요!';

pleaseId = '※ 영문 소문자로 시작하며 숫자를 포함해서 5~15자로 입력해주세요.';

posUserId = false;

posUserNickname = false;

constructor(public loadingController: LoadingController, public alertCtrl: AlertController,

private navCtrl: NavController) {}

async signUp() {

if (this.errorInfo.idError1 === false &&

this.errorInfo.idError2 === false &&

this.errorInfo.idError3 === true &&

this.errorInfo.idError4 === false &&

this.errorInfo.pwdError1 === false &&

this.errorInfo.pwdError2 === false &&

this.errorInfo.pwdError3 === false &&

this.errorInfo.pwdError4 === false &&

this.userpwdCon === this.userpwd &&

this.posUserId === true &&

this.posUserNickname === true) {

this.kuzzleDataInsert();

const alertId = await this.alertCtrl.create({

header: '회원가입',

message: '가입되었습니다. 로그인해주세요.',

buttons: [{

text: '확인',

handler: data => {

this.aftersignup();

}

}]

});

return await alertId.present();

} else {

const alertId = await this.alertCtrl.create({

header: '회원가입',

message: '다시 확인해주세요.',

buttons: ['확인']

});

return await alertId.present();

}

}

kuzzle_callback (err, res) {

this.kuzzle.login('local', {username: 'kuzzle id', password: 'kuzzle password'}, '유지 시간',

function(error, result) {

});

}

ngOnInit() {

this.kuzzle = new Kuzzle('192.168.0.26', this.kuzzle_callback.bind(this));

this.checkId();

this.checkPwd();

this.checkConfirmPwd();

}

kuzzleDataInsert() {

const body = {

'USER_ID': this.userid,

'USER_PASSWORD': this.userpwd,

'USER_NAME': this.username,

'USER_NICKNAME': this.usernickname

};

this.kuzzle

.collection('emp_user_info', 'name_test')

.createDocument(this.userid, body, {ifExist: 'replace'}, function (err, res) {

});

}

confirmOverlapId() {

this.kuzzle

.collection('emp_user_info', 'name_test')

.fetchDocument(this.userid, async function (error, result) {

if (error && this.userid.length !== 0) {

const alertId = await this.alertCtrl.create({

header: '아이디 중복확인',

message: '사용 가능합니다.',

buttons: [

{

text: '확인',

handler: data => {

this.posUserId = true;

}

}]

});

return await alertId.present();

} else if (result) {

const alert = await this.alertCtrl.create({

header: '아이디 중복확인',

message: '다시 입력해주세요.',

inputs: [

{

name: 'userid',

value: this.userid

}],

buttons: [

{

text: '취소',

role: '취소',

},

{

text: '확인',

handler: data => {

this.userid = data.userid;

this.posUserId = false;

}

}]

});

return await alert.present();

}

}.bind(this));

}

confirmOverlapNickname() {

const body = {

'query': {

'match': {

'USER_NICKNAME': this.usernickname

}

}

};

const options = {

from: 0

};

this.kuzzle

.collection('emp_user_info', 'name_test')

.search(body, options, async function (err, searchResult) {

if (searchResult.documents.length === 0) {

const alertNickname = await this.alertCtrl.create({

header: '닉네임 중복확인',

message: '사용 가능합니다.',

buttons: [

{

text: '확인',

handler: data => {

this.posUserNickname = true;

}

}]

});

return await alertNickname.present();

} else if (searchResult.documents.length === 1) {

const alert = await this.alertCtrl.create({

header: '닉네임 중복확인',

message: '다시 입력해주세요.',

inputs: [

{

name: 'usernickname',

value: this.usernickname

}],

buttons: [

{

text: '취소',

role: '취소',

},

{

text: '확인',

handler: data => {

this.usernickname = data.usernickname;

this.posUserNickname = false;

}

}]

});

return await alert.present();

}

}.bind(this));

}

checkId() {

if (this.userid === '' || !this.userid) {

this.errorInfo.idError1 = true;

this.errorInfo.idError2 = false;

this.errorInfo.idError3 = false;

this.errorInfo.idError4 = false;

} else if (this.blank_pattern.test(this.userid) === true || this.special_pattern.test(this.userid) ===

true) {

this.errorInfo.idError1 = false;

this.errorInfo.idError2 = true;

this.errorInfo.idError3 = false;

this.errorInfo.idError4 = false;

} else if (!(this.userid === '' || this.userid === null || this.blank_pattern.test(this.userid) === true ||

this.special_pattern.test(this.userid) === true || !this.id_input_pattern.test(this.userid) === true)) {

this.errorInfo.idError1 = false;

this.errorInfo.idError2 = false;

this.errorInfo.idError3 = true;

this.errorInfo.idError4 = false;

} else if (this.id_input_pattern.test(this.userid) === true) {

this.errorInfo.idError1 = false;

this.errorInfo.idError2 = false;

this.errorInfo.idError3 = false;

this.errorInfo.idError4 = true;

} else {

this.errorInfo.idError1 = false;

this.errorInfo.idError2 = false;

this.errorInfo.idError3 = false;

this.errorInfo.idError4 = true;

}

}

checkPwd() {

if (this.userpwd === '' || !this.userpwd) {

this.errorInfo.pwdError1 = true;

this.errorInfo.pwdError2 = false;

} else if (this.blank_pattern.test(this.userpwd) === true || this.pwd_input_pattern.test(this.userpwd)

=== false) {

this.errorInfo.pwdError1 = false;

this.errorInfo.pwdError2 = true;

} else {

this.errorInfo.pwdError1 = false;

this.errorInfo.pwdError2 = false;

}

}

checkConfirmPwd() {

if (this.userpwdCon === '' || !this.userpwdCon) {

this.errorInfo.pwdError3 = true;

this.errorInfo.pwdError4 = false;

} else if (this.userpwdCon !== this.userpwd) {

this.errorInfo.pwdError3 = false;

this.errorInfo.pwdError4 = true;

} else {

this.errorInfo.pwdError3 = false;

this.errorInfo.pwdError4 = false;

}

}

showPassword() {

this.showPass = !this.showPass;

if (this.showPass) {

this.type = 'text';

} else {

this.type = 'password';

}

}

aftersignup() {

this.navCtrl.navigateForward('/login');

}

}

//html

<ion-content padding>

<div>

<div>

<form>

<ion-item>

<ion-label>아이디</ion-label>

<ion-input type="text" name="userid" [(ngModel)]="userid" (ngModelChange)="checkId()">

</ion-input>

<ion-button (click)="confirmOverlapId()" class="overlay-bt" color="button"

expand="block" shape="round" size="small">중복 확인</ion-button>

</ion-item>

<div style="font-size: 0.8em; background-color: transparent; color: #e65252;">

<ion-label *ngIf="errorInfo.idError1 === true">{{ requiredInformation }}</ion-label>

<ion-label *ngIf="errorInfo.idError2 === true">{{ notBlankIDAndNotSpecialPatternID }}

</ion-label>

<ion-label *ngIf="errorInfo.idError3 === true">{{ greatId }}</ion-label>

<ion-label *ngIf="errorInfo.idError4 === true">{{ pleaseId }}</ion-label>

</div>

<ion-item>

<ion-label floating>비밀번호</ion-label>

<ion-input type="{{type}}" name="password" #password="ngModel" required pattern=".{4,10}"

[(ngModel)]="userpwd" (ngModelChange)="checkPwd()"></ion-input>

<ion-button *ngIf="!showPass" color="buttondark" type="button" (click)="showPassword()"

expand="block" shape="round" class="nonshow-bt" size="small">비밀번호 표시</ion-button>

<ion-button *ngIf="showPass" color="button" type="button" (click)="showPassword()"

expand="block" shape="round" class="show-bt" size="small">비밀번호 표시</ion-button>

</ion-item>

<div style="font-size: 0.8em; background-color: transparent; color: #e65252;">

<ion-label *ngIf="errorInfo.pwdError1 === true">{{ requiredInformation }}</ion-label>

<ion-label *ngIf="errorInfo.pwdError2 === true" style="white-space: pre-line;">

{{ notBlankPwdAndAddSpecialPatternPwd }}</ion-label>

</div>

<ion-item>

<ion-label>비밀번호 확인</ion-label>

<ion-input type="password" name="confirmPassword" [(ngModel)]="userpwdCon"

(ngModelChange)="checkConfirmPwd()"></ion-input>

</ion-item>

<div style="font-size: 0.8em; background-color: transparent; color: #e65252;">

<ion-label *ngIf="errorInfo.pwdError3 === true">{{ requiredInformation }}</ion-label>

<ion-label *ngIf="errorInfo.pwdError4 === true">{{ pleaseConfirmPassword }}</ion-label>

</div>

<ion-item>

<ion-label>이름</ion-label>

<ion-input type="text" name="username" [(ngModel)]="username"></ion-input>

</ion-item>

<ion-item>

<ion-label>닉네임</ion-label>

<ion-input type="text" name="nickname" [(ngModel)]="usernickname"></ion-input>

<ion-button (click)="confirmOverlapNickname()" class="overlay-bt" color="button"

expand="block" shape="round" size="small">중복 확인</ion-button>

</ion-item>

<div style="width: 100%; height: 100%; margin:auto;padding:auto;">

<ion-button (click)="signUp()" color="button" expand="block" shape="round" size="large"

class="bt"style="width: 100%; height: 45px; margin-top:30px;">

회원가입

</ion-button>

<ion-button routerLink="" routerLinkActive="active" color="button" expand="block"

shape="round" size="large" class="bt"style="width: 100%; height: 45px; margin-top:30px;">

취소

</ion-button>

</div>

</form>

</div>

</div>