member_webapp/@overflow/member/component/signup/signup.component.html

<p-dialog header="Terms Of Use" [modal]="true" [width]="800" [(visible)]="termsDisplay" [showHeader]="true" [closeOnEscape]="false">
  <of-member-terms (close)="onTermsDisplayClose()"></of-member-terms>
</p-dialog>
<p-dialog header="Privacy Policy Info" [modal]="true" [width]="800" [(visible)]="policyDisplay" [showHeader]="true" [closeOnEscape]="false">
  <of-member-policy (close)="onPolicyDisplayClose()"></of-member-policy>
</p-dialog>



<div class="ui-g">
    <div class="ui-g-12 ui-md-9 ui-lg-7">
        <form [formGroup]="signupForm" (ngSubmit)="signup()">
            <table class="login-table">
                <tr>
                    <td>
                        <div class="login-panel ui-fluid">
                            <div class="ui-g">
                                <div class="ui-g-12">
                                <img src="assets/layout/images/overFlow_CI_blue_185.png">
                                </div>
                                <div class="ui-g-12 ui-g-padding-15">
                                    <span class="md-inputfield">
                                        <input type="email"
                                                id="email"
                                                pInputText
                                                class="input ng-dirty ng-invalid"
                                                placeholder="Email"
                                                formControlName="email" required
                                                value="geekhot@hotmail.co.kr" />
                                        <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
                                            Invalid email
                                        </div>
                                    </span>
                                </div>
                                <div class="ui-g-12 ui-g-padding-15">
                                    <span class="md-inputfield">
                                        <input type="password"
                                                id="password"  pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
                                                required>
                                        <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
                                            Invalid password
                                        </div>
                                    </span>
                                </div>
                                <div class="ui-g-12 ui-g-padding-15">
                                    <span class="md-inputfield">
                                        <input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm"
                                                required>
                                        <div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all">
                                            Not matched password
                                        </div>
                                    </span>
                                </div>
        
                                <div class="ui-g-12 ui-g-padding-15">
                                    <span class="md-inputfield">
                                        <input id="name" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Name" formControlName="name" required>
                                        <div *ngIf="name.touched && !name.valid" class="ui-message ui-messages-error ui-corner-all">
                                            Invalid Name
                                        </div>
                                    </span>
                                </div>
        
                                <div class="ui-g-12 ui-g-padding-15">
                                    <span class="md-inputfield">
                                        <input id="phone" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Phone" formControlName="phone" required>
                                        <div *ngIf="phone.touched && !phone.valid" class="ui-message ui-messages-error ui-corner-all">
                                            Invalid phone number
                                        </div>
                                    </span>
                                </div>
        
                                <div class="ui-g-12 ui-g-padding-15">
                                    <span class="md-inputfield">
                                        <input id="company" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Company" formControlName="company" required>
                                        <div *ngIf="company.touched && !company.valid" class="ui-message ui-messages-error ui-corner-all">
                                            Invalid company name
                                        </div>
                                    </span>
                                </div>
        
                                <div class="ui-g-12 ui-g-padding-15">
                                    <p class="font-s">
                                        <p-checkbox name="groupname" value="val1" label="이용약관과 개인정보 정책에 동의 합니다." [(ngModel)]="selectedValues"></p-checkbox>
                                    </p>
                                    <a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a>
                                    |
                                    <a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a>
                                </div>
                                <div class="ui-g-12 ui-no-pad">
                                    <div class="recaptcha-align">
                                        <div class="content-section implementation">
                
                                            <recaptcha
                                            [formControl]="myRecaptcha"
                                            (scriptLoad)="onScriptLoad()"
                                            (scriptError)="onScriptError()"
                                            ></recaptcha>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-g-12 ui-g-padding-15">
                                    <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
                                        <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                                        <span class="ui-button-text ui-c">Sign Up</span>
                                    </button>
        
                                    <a href="/auth/signin">Sign In</a>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
        <table class="login-table">
            <tr>
                <td>
                    <div class="login-panel ui-fluid">
                        <div class="ui-g">
                            <div class="ui-g-12">
                                <img src="assets/layout/images/login/login_img_01.png">
                                <p><br>
                                    overFlow는 여러분의 서버에 발생하는<br>
                                    변화를 항상 지켜보고 있습니다.<br><br>
                                    
                                    서버에 발생하는 모든 변화를 세분화 하여<br>
                                    실시간으로 알려 드립니다.
                                </p>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>