<div nz-row [nzGutter]="24" class="py-lg">
|
<div nz-col [nzSpan]="6">
|
<nz-card nzTitle="Personal settings" nzNoPadding>
|
<a (click)="active=1" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===1}">Profile</a>
|
<a (click)="active=2" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===2}">Account</a>
|
<a (click)="active=3" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===3}">Emails</a>
|
<a (click)="active=4" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===4}">Notifications</a>
|
</nz-card>
|
<nz-card nzTitle="Developer settings" nzNoPadding>
|
<a (click)="active=5" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===5}">OAuth applications</a>
|
<a (click)="active=6" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===6}">Personal access tokens</a>
|
</nz-card>
|
</div>
|
<div nz-col [nzSpan]="18">
|
<nz-card nzTitle="Public profile" *ngIf="active===1">
|
<div nz-row [nzGutter]="64">
|
<div nz-col [nzSpan]="16">
|
<form nz-form [formGroup]="profileForm" (ngSubmit)="profileSave($event, profileForm.value)" [nzLayout]="'vertical'">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="name" nz-form-item-required>name</label>
|
</div>
|
<div nz-form-control nz-col [nzHasFeedback]="'true'" [nzValidateStatus]="name">
|
<nz-input formControlName="name" [nzId]="'name'"></nz-input>
|
<div *ngIf="name.invalid && (name.dirty || name.touched)">
|
<div nz-form-explain *ngIf="name.errors.required">required</div>
|
<div nz-form-explain *ngIf="name.errors.pattern">must match pattern [-_a-zA-Z0-9]</div>
|
</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="email">email</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-select formControlName="email">
|
<nz-option [nzLabel]="'Select a verified email to display'" [nzValue]="''"></nz-option>
|
<nz-option [nzLabel]="'cipchk@qq.com'" [nzValue]="'cipchk@qq.com'"></nz-option>
|
</nz-select>
|
<div nz-form-explain>You can manage verified email addresses in your <a (click)="active=3">email settings</a>.</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="bio">Bio</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-input formControlName="bio" [nzId]="'bio'" [nzType]="'textarea'" [nzRows]="'4'" [nzPlaceHolder]="'Tell us a little bit about yourself'"></nz-input>
|
<div nz-form-explain>You can <strong>@mention</strong> other users and organizations to link to them.</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="url">URL</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-input formControlName="url" [nzId]="'url'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="company">Company</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-input formControlName="company" [nzId]="'company'"></nz-input>
|
<div nz-form-explain>You can <strong>@mention</strong> your company's GitHub organization to link it.</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row class="border-top-1 mt-md pt-md">
|
<div nz-form-label nz-col>
|
<label for="location">Location</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-input formControlName="location" [nzId]="'location'"></nz-input>
|
</div>
|
</div>
|
<div nz-row>
|
<button nz-button [nzType]="'primary'" [disabled]="profileForm.invalid">Update profile</button>
|
</div>
|
</form>
|
</div>
|
<div nz-col [nzSpan]="8">
|
<h4>Profile picture</h4>
|
<img src="./assets/img/avatar.jpg" style="width: 100%;">
|
<button nz-button class="ant-btn__block">
|
<span>Upload new picture</span>
|
</button>
|
</div>
|
</div>
|
</nz-card>
|
<nz-card nzTitle="Change password" *ngIf="active===2">
|
<div nz-row [nzGutter]="64">
|
<div nz-col [nzSpan]="16">
|
<form nz-form [nzLayout]="'vertical'">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="old_password" nz-form-item-required>Old password</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-input [(ngModel)]="pwd.old_password" name="old_password" [nzId]="'old_password'" [nzType]="'password'" required></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="new_password" nz-form-item-required>New password</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-input [(ngModel)]="pwd.new_password" name="new_password" [nzId]="'new_password'" [nzType]="'password'" required></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label for="confirm_new_password" nz-form-item-required>Confirm new password</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-input [(ngModel)]="pwd.confirm_new_password" name="confirm_new_password" [nzId]="'confirm_new_password'" [nzType]="'password'" required></nz-input>
|
</div>
|
</div>
|
<div nz-row>
|
<button nz-button (click)="pwdSave()" [nzType]="'primary'">Update profile</button>
|
<a class="pl-sm" [routerLink]="['/forget']">I forgot my password</a>
|
</div>
|
</form>
|
</div>
|
</div>
|
<h2 class="py-md mt-lg border-bottom-1">Change username</h2>
|
<p class="py-sm">Changing your username can have unintended side effects.</p>
|
<button nz-button (click)="msg.info('to change username page')" [nzSize]="'large'">
|
<span>Change username</span>
|
</button>
|
</nz-card>
|
<nz-card nzTitle="Email" *ngIf="active===3">
|
<div class="list-group">
|
<div nz-row class="list-group-item py-md" [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12">
|
cipchk@qq.com
|
<nz-tooltip [nzTitle]="'This email will be used for account-related notifications (e.g. account changes, password resets, billing receipts) as well as any web-based GitHub operations (e.g. edits and merges).'">
|
<span nz-tooltip><nz-tag [nzColor]="'#28a745'">Primary</nz-tag></span>
|
</nz-tooltip>
|
<nz-tooltip [nzTitle]="'This email will be used as the \'from\' address for web-based GitHub operations.'">
|
<span nz-tooltip><nz-tag [nzColor]="'#959da5'">Public</nz-tag></span>
|
</nz-tooltip>
|
</div>
|
<div nz-col [nzSpan]="12" class="text-right">
|
<i class="anticon anticon-delete text-lg"></i>
|
</div>
|
</div>
|
</div>
|
<h4 class="pt-md mb-sm">Add email address</h4>
|
<nz-input [nzSize]="'large'" style="width: 200px"></nz-input>
|
<button nz-button (click)="msg.info('add')" [nzSize]="'large'">
|
<span>Add</span>
|
</button>
|
<h4 class="border-top-1 py-md mt-md">Primary email address</h4>
|
<p class="mb-md">cipchk@qq.com will be used for account-related notifications and for web-based GitHub operations (e.g. edits and merges).</p>
|
<nz-select [nzSize]="'large'" [(ngModel)]="primary_email">
|
<nz-option [nzLabel]="'cipchk@qq.com'" [nzValue]="'cipchk@qq.com'"></nz-option>
|
</nz-select>
|
<button nz-button (click)="msg.info('save')" [nzSize]="'large'">
|
<span>Save</span>
|
</button>
|
</nz-card>
|
<nz-card nzTitle="Notifications" *ngIf="active===4">
|
<p class="pb-md">Choose how you receive notifications. These notification settings apply to the repositories you’re watching.</p>
|
<div class="list-group">
|
<div class="list-group-item">
|
<h4>Automatically watch repositories</h4>
|
<p class="py-sm">When you’re given push access to a repository, automatically receive notifications for it.</p>
|
<label nz-checkbox [ngModel]="true">
|
<span>Automatically watch</span>
|
</label>
|
</div>
|
<div class="list-group-item">
|
<h4>Participating</h4>
|
<p class="py-sm">Notifications for the conversations you are participating in, or if someone cites you with an @mention.</p>
|
<label nz-checkbox [ngModel]="true">
|
<span>Email</span>
|
</label>
|
<label nz-checkbox [ngModel]="true">
|
<span>Web</span>
|
</label>
|
</div>
|
<div class="list-group-item">
|
<h4>Watching</h4>
|
<p class="py-sm">Notifications for all repositories or conversations you’re watching.</p>
|
<label nz-checkbox [ngModel]="true">
|
<span>Email</span>
|
</label>
|
<label nz-checkbox [ngModel]="true">
|
<span>Web</span>
|
</label>
|
</div>
|
</div>
|
</nz-card>
|
<nz-card nzNoPadding *ngIf="active===5" [nzBordered]="false">
|
<div class="border rounded-md text-center p-lg bg-grey-lighter">
|
<h3>No OAuth applications</h3>
|
<p class="py-md">OAuth applications are used to access the GitHub API. Read the docs to find out more.</p>
|
<button nz-button (click)="msg.inof('Register a new application')" [nzType]="'primary'" [nzSize]="'large'">
|
<span>Register a new application</span>
|
</button>
|
</div>
|
</nz-card>
|
<nz-card nzTitle="Personal access tokens" *ngIf="active===6">
|
<ng-template #extra>
|
<button nz-button (click)="msg.info('Generate new token')" [nzSize]="'small'">
|
<span>Generate new token</span>
|
</button>
|
<button nz-button (click)="msg.info('Revoke all')" [nzSize]="'small'" [nzType]="'danger'">
|
<span>Revoke all</span>
|
</button>
|
</ng-template>
|
<p>Tokens you have generated that can be used to access the GitHub API.</p>
|
<div class="list-group mt-sm">
|
<div nz-row class="list-group-item" [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12">
|
<strong>octotree</strong> — repo
|
</div>
|
<div nz-col [nzSpan]="12" class="text-right">
|
Last used within the last day
|
<nz-button-group>
|
<button nz-button>Edit</button>
|
<button nz-button [nzType]="'danger'">Delete</button>
|
</nz-button-group>
|
</div>
|
</div>
|
</div>
|
</nz-card>
|
</div>
|
</div>
|
