member_webapp/@overflow/member/component/member-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)="signupFormSubmit()">
      <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>