overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-05-16 17:14:43 +09:00
parent 3a91566893
commit f49c5d816b
7 changed files with 329 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/layout/images/login/login_img_01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

118
src/packages/member/component/reset-password/modify-password.component.html
View File

@ -1,46 +1,72 @@
<form [formGroup]="modifyPwForm" (ngSubmit)="modifyPw()">
<table class="login-table">
<tr>
<td>
<div class="card 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">
<span class="md-inputfield">
<input type="password"
id="pw"
autocomplete="off" placeholder="password"
formControlName="pw"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.pw" class="help is-danger">
{{ formErrors.pw }}
</div>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password"
id="confirmPw"
autocomplete="off" placeholder="confirm password"
formControlName="confirmPw"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.confirmPw" class="help is-danger">
{{ formErrors.confirmPw }}
</div>
</div>
<div class="ui-g-12">
<button type="submit" 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">Confirm</span>
</button>
<a href="javascript:void(0)" (click)="signinBtn()">Signin</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<form [formGroup]="modifyPwForm" (ngSubmit)="modifyPw()">
<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">
<span class="md-inputfield">
<input type="password"
id="pw"
autocomplete="off" placeholder="password"
formControlName="pw"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.pw" class="help is-danger">
{{ formErrors.pw }}
</div>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password"
id="confirmPw"
autocomplete="off" placeholder="confirm password"
formControlName="confirmPw"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.confirmPw" class="help is-danger">
{{ formErrors.confirmPw }}
</div>
</div>
<div class="ui-g-12">
<button type="submit" 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">Confirm</span>
</button>
<a href="javascript:void(0)" (click)="signinBtn()">Signin</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>

85
src/packages/member/component/reset-password/reset-password.component.html
View File

@ -1,36 +1,61 @@
<form [formGroup]="resetPassword" (ngSubmit)="sendResetPassword()">
<table class="login-table">
<tr>
<td>
<div class="card login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<!--img src="assets/layout/images/logo-ultima.svg" -->
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="email" id="email" autocomplete="off" placeholder="Please enter your email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.email" class="help is-danger">
{{ formErrors.email }}
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<form [formGroup]="resetPassword" (ngSubmit)="sendResetPassword()">
<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/logo-ultima.svg" -->
<img src="assets/layout/images/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="email" id="email" autocomplete="off" placeholder="Please enter your email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
<div *ngIf="formErrors.email" class="help is-danger">
{{ formErrors.email }}
</div>
</div>
<div class="ui-g-12">
<button (click)="sendResetPassword()" type="submit" 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-cached"></span>
<span class="ui-button-text ui-c">Reset Password</span>
</button>
<a href="/auth/signin" >Sign In</a>
|
<a href="/auth/signup" >Sign Up</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">
<button (click)="sendResetPassword()" type="submit" 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-cached"></span>
<span class="ui-button-text ui-c">Reset Password</span>
</button>
<a href="/auth/signin" >Sign In</a>
|
<a href="/auth/signup" >Sign Up</a>
<img src="assets/layout/images/login/login_img_01.png">
<p><br>
overFlow는 여러분의 서버에 발생하는<br>
변화를 항상 지켜보고 있습니다.<br><br>
서버에 발생하는 모든 변화를 세분화 하여<br>
실시간으로 알려 드립니다.
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</div>

84
src/packages/member/component/signin/signin.component.html
View File

@ -1,34 +1,60 @@
<form [formGroup]="signinForm" (ngSubmit)="signin()">
<table class="login-table">
<tr>
<td>
<div class="card login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12 ui-md-9 ui-lg-7">
<form [formGroup]="signinForm" (ngSubmit)="signin()">
<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">
<span class="md-inputfield">
<input type="email" id="email" autocomplete="off" placeholder="email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password" id="password" autocomplete="off" placeholder="password" formControlName="password" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
</div>
<div class="ui-g-12">
<button type="submit" 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 In</span>
</button>
<a href="javascript:void(0)" (click)="resetPasswordBtnClick()">Forgot Password</a>
|
<a href="javascript:void(0)" (click)="signupBtnClick()">Sign Up</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/overFlow_CI_blue_185.png">
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="email" id="email" autocomplete="off" placeholder="email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password" id="password" autocomplete="off" placeholder="password" formControlName="password" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</span>
</div>
<div class="ui-g-12">
<button type="submit" 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 In</span>
</button>
<a href="javascript:void(0)" (click)="resetPasswordBtnClick()">Forgot Password</a>
|
<a href="javascript:void(0)" (click)="signupBtnClick()">Sign Up</a>
<img src="assets/layout/images/login/login_img_01.png">
<p><br>
overFlow는 여러분의 서버에 발생하는<br>
변화를 항상 지켜보고 있습니다.<br><br>
서버에 발생하는 모든 변화를 세분화 하여<br>
실시간으로 알려 드립니다.
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</div>

214
src/packages/member/component/signup/signup.component.html
View File

@ -6,100 +6,134 @@
</p-dialog>
<form [formGroup]="signupForm" (ngSubmit)="signup()">
<table class="login-table">
<tr>
<td>
<div class="card 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 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>
</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 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>
</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 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>
</span>
<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>
<div class="ui-g-12 ui-g-padding-15">
<a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a>
|
<a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a>
</div>
<div class="content-section implementation">
<recaptcha
[formControl]="myRecaptcha"
(scriptLoad)="onScriptLoad()"
(scriptError)="onScriptError()"
></recaptcha>
</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>
</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>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</div>

11
src/packages/target/component/detail/detail.component.html
View File

@ -5,7 +5,6 @@
<div class="ui-g">
<div class="ui-g-12">
<div class="ui-inputgroup">
<span class="md-inputfield">
<input #input type="text" pInputText value="{{infra.target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
@ -13,7 +12,8 @@
</span>
<button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
</div>
</div>
<div class="ui-g-12">
<p-panel [showHeader]="false">
<div class="ui-key-value">
<span>Status</span>
@ -26,9 +26,6 @@
<of-key-value [key]="'Sensors'" [value]="infra.target.sensorCount" class="ui-key-value"></of-key-value>
</p-panel>
</div>
</div>
<div class="ui-g">
<div class="ui-g-12">
<div class="ui-g">
<div class="ui-g-12 ui-md-5 ui-g-nopad">
@ -47,8 +44,8 @@
</div>
</div>
</div>
</div>
<div class="ui-g-12">
<p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
<ng-template pTemplate="header">
<tr>

21
src/styles.scss
View File

@ -3,7 +3,8 @@
//auth style
.login-body {
//background: url("../images/login/login.png") top left no-repeat #f7f7f7;
background: url("/assets/layout/images/login11.jpg") center no-repeat #f7f7f7 !important;
//background: url("/assets/layout/images/login11.jpg") center no-repeat #f7f7f7 !important;
background: #ffffff;
margin: 0 !important;
padding: 0 !important;
min-height: 100vh !important;
@ -13,11 +14,18 @@
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.login-body {
//background: url("../images/login/login2x.png") top left no-repeat #f7f7f7;
background: url("/assets/layout/images/login11.jpg") top left no-repeat #f7f7f7 !important;
//background: url("/assets/layout/images/login11.jpg") top left no-repeat #f7f7f7 !important;
background: #ffffff;
}
}
.login-descript{
background: #203976;
color: #ffffff;
}
.login-panel {
margin: 0 !important;
width: 450px !important;
min-height: 300px !important;
.ui-g {
.ui-g-12 {
a {
@ -27,11 +35,17 @@
a:hover{
color: rgb(18, 86, 233);
}
.recaptcha-align{
margin: 0 auto;
}
}
.ui-g-12.ui-g-padding-15 {
padding: 15px 40px !important;
}
}
.ui-message{
text-align: left;
}
}
.login-table {
@ -301,4 +315,7 @@
}
body .ui-progressbar .ui-progressbar-value {
height: 0 !important;
}
.font-s{
font-size: 80%;
}