mirror of https://github.com/Squidex/squidex.git
Sebastian
9 years ago
58 changed files with 1132 additions and 465 deletions
@ -0,0 +1,32 @@ |
|||
// ==========================================================================
|
|||
// AppLanguageDto.cs
|
|||
// Squidex Headless CMS
|
|||
// ==========================================================================
|
|||
// Copyright (c) Squidex Group
|
|||
// All rights reserved.
|
|||
// ==========================================================================
|
|||
|
|||
using System.ComponentModel.DataAnnotations; |
|||
|
|||
namespace Squidex.Controllers.Api.Apps.Models |
|||
{ |
|||
public class AppLanguageDto |
|||
{ |
|||
/// <summary>
|
|||
/// The iso code of the language.
|
|||
/// </summary>
|
|||
[Required] |
|||
public string Iso2Code { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// The english name of the language.
|
|||
/// </summary>
|
|||
[Required] |
|||
public string EnglishName { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// Indicates if the language is the master language.
|
|||
/// </summary>
|
|||
public bool IsMasterLanguage { get; set; } |
|||
} |
|||
} |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,80 @@ |
|||
<div class="table-items-row"> |
|||
<table class="table table-middle table-sm table-borderless table-fixed client-info"> |
|||
<colgroup> |
|||
<col style="width: 160px; text-align: right;" /> |
|||
<col style="width: 100%" /> |
|||
<col style="width: 40px" /> |
|||
</colgroup> |
|||
|
|||
<tr> |
|||
<td colspan="2"> |
|||
<div class="float-xs-right"> |
|||
<button class="btn btn-default" (click)="createToken(client)">Create Token</button> |
|||
</div> |
|||
|
|||
<div class="client-name"> |
|||
<form *ngIf="isRenaming" class="form-inline" (submit)="rename()"> |
|||
<div class="form-group"> |
|||
<input type="text" class="form-control" name="client-name" id="client-name" sqxFocusOnInit [(ngModel)]="client.name" /> |
|||
</div> |
|||
|
|||
<button type="submit" class="btn btn-primary">Save</button> |
|||
|
|||
<a class="btn btn-default" (click)="cancelRename()">Cancel</a> |
|||
</form> |
|||
|
|||
<h3 *ngIf="!isRenaming"> |
|||
{{client.name}} <i class="client-edit icon-pencil" (click)="startRename()"></i> |
|||
</h3> |
|||
</div> |
|||
|
|||
<div class="client-expires">Expires: {{client.expiresUtc}}</div> |
|||
</td> |
|||
<td class="client-delete"> |
|||
<button type="button" class="btn btn-link btn-danger" (click)="revokeClient(client)"> |
|||
<i class="icon-bin"></i> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Client Id:</td> |
|||
<td> |
|||
<input readonly class="form-control" #inputId [attr.value]="appName + ':' + client.id" /> |
|||
</td> |
|||
<td> |
|||
<button type="button" class="btn btn-primary btn-link" (click)="copyId()"> |
|||
<i class="icon-copy"></i> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Client Secret:</td> |
|||
<td> |
|||
<input readonly class="form-control" name="inputSecret" [attr.value]="client.secret" /> |
|||
</td> |
|||
<td> |
|||
<button type="button" class="btn btn-primary btn-link" (click)="copySecret()"> |
|||
<i class="icon-copy"></i> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="modal" *sqxModalView="modalDialog" [@fade]> |
|||
<div class="modal-dialog" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modalDialog.hide()"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
|
|||
<h4 class="modal-title">Access Token</h4> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<textarea class="form-control access-token">{{appClientToken.tokenType}} {{appClientToken.accessToken}}</textarea> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,42 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.client { |
|||
&-info { |
|||
margin: 0; |
|||
} |
|||
|
|||
&-delete { |
|||
vertical-align: top; |
|||
} |
|||
|
|||
&-expires { |
|||
font-size: .8rem; |
|||
} |
|||
|
|||
&-edit { |
|||
color: darken($color-border, 20%); |
|||
display: none; |
|||
font-size: .9rem; |
|||
font-weight: normal; |
|||
padding: .3rem; |
|||
background: transparent; |
|||
} |
|||
|
|||
&-name { |
|||
& { |
|||
height: 40px; |
|||
} |
|||
|
|||
&:hover { |
|||
.client-edit { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.access-token { |
|||
resize: none; |
|||
height: 300px; |
|||
} |
|||
@ -0,0 +1,127 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import * as Ng2 from '@angular/core'; |
|||
import * as Ng2Forms from '@angular/forms'; |
|||
|
|||
import { |
|||
AccessTokenDto, |
|||
AppsStoreService, |
|||
AppClientDto, |
|||
AppClientCreateDto, |
|||
AppClientsService, |
|||
fadeAnimation, |
|||
ModalView, |
|||
Notification, |
|||
NotificationService, |
|||
TitleService |
|||
} from 'shared'; |
|||
|
|||
@Ng2.Component({ |
|||
selector: 'sqx-client', |
|||
styles, |
|||
template, |
|||
animations: [ |
|||
fadeAnimation |
|||
] |
|||
}) |
|||
export class ClientComponent { |
|||
private oldName: string; |
|||
|
|||
public isRenaming = false; |
|||
|
|||
public appClientToken: AccessTokenDto; |
|||
|
|||
@Ng2.Input('appName') |
|||
public appName: string; |
|||
|
|||
@Ng2.Input('client') |
|||
public client: AppClientDto; |
|||
|
|||
@Ng2.ViewChild('inputId') |
|||
public inputId: Ng2.ElementRef; |
|||
|
|||
@Ng2.ViewChild('inputSecret') |
|||
public inputSecret: Ng2.ElementRef; |
|||
|
|||
public modalDialog = new ModalView(); |
|||
|
|||
constructor( |
|||
private readonly appClientsService: AppClientsService, |
|||
private readonly notifications: NotificationService |
|||
) { |
|||
} |
|||
|
|||
public rename() { |
|||
this.appClientsService.renameClient(this.appName, this.client.id, this.client.name) |
|||
.subscribe(() => { |
|||
this.stopRename(); |
|||
}, error => { |
|||
this.notifications.notify(Notification.error(error.displayMessage)); |
|||
this.cancelRename(); |
|||
}); |
|||
} |
|||
|
|||
public cancelRename() { |
|||
this.client.name = this.oldName; |
|||
|
|||
this.isRenaming = false; |
|||
} |
|||
|
|||
public stopRename() { |
|||
this.client.name = this.client.name || this.client.id; |
|||
|
|||
this.isRenaming = false; |
|||
} |
|||
|
|||
public startRename() { |
|||
this.oldName = this.client.name; |
|||
|
|||
this.isRenaming = true; |
|||
} |
|||
|
|||
public createToken(client: AppClientDto) { |
|||
this.appClientsService.createToken(this.appName, client) |
|||
.subscribe(token => { |
|||
this.appClientToken = token; |
|||
this.modalDialog.show(); |
|||
}, error => { |
|||
this.notifications.notify(Notification.error('Failed to retrieve access token. Please retry.')); |
|||
}); |
|||
} |
|||
|
|||
public copyId() { |
|||
this.copyToClipbord(this.inputId.nativeElement); |
|||
} |
|||
|
|||
public copySecret() { |
|||
this.copyToClipbord(this.inputSecret.nativeElement); |
|||
} |
|||
|
|||
private copyToClipbord(element: HTMLInputElement | HTMLTextAreaElement) { |
|||
const currentFocus: any = document.activeElement; |
|||
|
|||
const prevSelectionStart = element.selectionStart; |
|||
const prevSelectionEnd = element.selectionEnd; |
|||
|
|||
element.focus(); |
|||
element.setSelectionRange(0, element.value.length); |
|||
|
|||
try { |
|||
document.execCommand('copy'); |
|||
} catch (e) { |
|||
console.log('Copy failed'); |
|||
} |
|||
|
|||
if (currentFocus && typeof currentFocus.focus === 'function') { |
|||
currentFocus.focus(); |
|||
} |
|||
|
|||
element.setSelectionRange(prevSelectionStart, prevSelectionEnd); |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,51 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import * as Ng2 from '@angular/core'; |
|||
|
|||
import { FocusOnInitDirective } from './focus-on-init.directive'; |
|||
|
|||
describe('FocusOnInitDirective', () => { |
|||
let originalTimeout = 0; |
|||
|
|||
beforeEach(() => { |
|||
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL; |
|||
|
|||
jasmine.DEFAULT_TIMEOUT_INTERVAL = 800; |
|||
}); |
|||
|
|||
it('should call focus on element when init', (done: any) => { |
|||
const calledMethods: string[] = []; |
|||
const calledElements: any[] = []; |
|||
|
|||
const renderer = { |
|||
invokeElementMethod: (element: any, method: any, args: any) => { |
|||
calledElements.push(element); |
|||
calledMethods.push(method); |
|||
} |
|||
}; |
|||
|
|||
const element: Ng2.ElementRef = { |
|||
nativeElement: {} |
|||
}; |
|||
|
|||
new FocusOnInitDirective(element, renderer as Ng2.Renderer).ngOnInit(); |
|||
|
|||
expect(calledMethods).toEqual([]); |
|||
|
|||
setTimeout(() => { |
|||
expect(calledMethods).toEqual(['focus', 'select']); |
|||
expect(calledElements).toEqual([element.nativeElement, element.nativeElement]); |
|||
|
|||
done(); |
|||
}, 400); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout; |
|||
}); |
|||
}); |
|||
@ -0,0 +1,29 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import * as Ng2 from '@angular/core'; |
|||
|
|||
@Ng2.Directive({ |
|||
selector: '[sqxFocusOnInit]' |
|||
}) |
|||
export class FocusOnInitDirective implements Ng2.OnInit { |
|||
@Ng2.Input() |
|||
public gpFocusOnChange: any; |
|||
|
|||
constructor( |
|||
private readonly elementRef: Ng2.ElementRef, |
|||
private readonly renderer: Ng2.Renderer |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
setTimeout(() => { |
|||
this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus', []); |
|||
this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'select', []); |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import * as Ng2Http from '@angular/http'; |
|||
|
|||
import { Observable } from 'rxjs'; |
|||
|
|||
export class ErrorDto { |
|||
public get displayMessage(): string { |
|||
let result = this.message; |
|||
|
|||
if (this.details && this.details.length > 0) { |
|||
const detailMessage = this.details[0]; |
|||
|
|||
const lastChar = result[result.length - 1]; |
|||
|
|||
if (lastChar !== '.' && lastChar !== ',') { |
|||
result += '.'; |
|||
} |
|||
|
|||
result += ' '; |
|||
result += detailMessage; |
|||
} |
|||
|
|||
const lastChar = result[result.length - 1]; |
|||
|
|||
if (lastChar !== '.') { |
|||
result += '.'; |
|||
} |
|||
|
|||
return result; |
|||
} |
|||
|
|||
constructor( |
|||
public readonly statusCode: number, |
|||
public readonly message: string, |
|||
public readonly details: string[] = [] |
|||
) { |
|||
} |
|||
} |
|||
|
|||
export function handleError(message: string, error: Ng2Http.Response | any) { |
|||
let result = new ErrorDto(500, message); |
|||
|
|||
if (error instanceof Ng2Http.Response && error.status !== 500) { |
|||
const body = error.json(); |
|||
|
|||
result = new ErrorDto(error.status, body.message, body.details); |
|||
} |
|||
|
|||
return Observable.throw(result); |
|||
} |
|||
Loading…
Reference in new issue