Enforce lowercase.

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html

@@ -10,7 +10,7 @@
         
         <sqx-control-errors for="name" [submitted]="createFormSubmitted"></sqx-control-errors>
 
-		<input type="text" class="form-control" id="schema-name" formControlName="name" sqxFocusOnInit />
+		<input type="text" class="form-control" id="schema-name" formControlName="name" autocomplete="off" sqxFocusOnInit sqxLowerCaseInput />
         
         <span class="form-hint">
             The schema name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}{{appName}}/<b>{{schemaName | async}}</b>/.

src/Squidex/app/features/settings/pages/clients/clients-page.component.html

@@ -28,7 +28,7 @@
                     <div class="form-group mr-2">
                         <sqx-control-errors for="name" [submitted]="addClientFormSubmitted"></sqx-control-errors>
 
-                        <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" />
+                        <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxLowerCaseInput />
                     </div>
 
                     <button type="submit" class="btn btn-success" [disabled]="!hasName">Add Client</button>

src/Squidex/app/framework/angular/lowercase-input.directive.ts

@@ -0,0 +1,62 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Directive, forwardRef, ElementRef, Renderer } from '@angular/core';
+import { ControlValueAccessor,  NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const NOOP = () => { /* NOOP */ };
+
+export const SQX_LOWERCASE_INPUT_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => LowerCaseInputDirective), multi: true
+};
+
+@Directive({
+    selector: '[sqxLowerCaseInput]',
+    providers: [SQX_LOWERCASE_INPUT_VALUE_ACCESSOR],
+    host: {
+        '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'
+    }
+})
+export class LowerCaseInputDirective implements ControlValueAccessor {
+    private changeCallback: (value: any) => void = NOOP;
+    private touchedCallback: () => void = NOOP;
+
+    constructor(
+        private readonly renderer: Renderer,
+        private readonly elementRef: ElementRef
+    ) {
+    }
+
+    public writeValue(value: any) {
+        const normalizedValue = (value == null ? '' : value.toString()).toLowerCase();
+
+        this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', normalizedValue);
+    }
+
+    public setDisabledState(isDisabled: boolean): void {
+        this.renderer.setElementProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
+    }
+
+    public registerOnChange(fn: any) {
+        this.changeCallback = fn;
+    }
+
+    public registerOnTouched(fn: any) {
+        this.touchedCallback = fn;
+    }
+
+    public onChange(value: any) {
+        const normalizedValue = (value == null ? '' : value.toString()).toLowerCase();
+
+        this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', normalizedValue);
+        this.changeCallback(normalizedValue);
+    }
+
+    public onTouched() {
+        this.touchedCallback();
+    }
+}

src/Squidex/app/framework/declarations.ts

@@ -19,6 +19,7 @@ export * from './angular/geolocation-editor.component';
 export * from './angular/http-utils';
 export * from './angular/indeterminate-value.directive';
 export * from './angular/json-editor.component';
+export * from './angular/lowercase-input.directive';
 export * from './angular/markdown-editor.component';
 export * from './angular/modal-view.directive';
 export * from './angular/money.pipe';

src/Squidex/app/framework/module.ts

@@ -29,6 +29,7 @@ import {
     IndeterminateValueDirective,
     JsonEditorComponent,
     LocalStoreService,
+    LowerCaseInputDirective,
     MarkdownEditorComponent,
     MessageBus,
     ModalViewDirective,
@@ -78,6 +79,7 @@ import {
         GeolocationEditorComponent,
         IndeterminateValueDirective,
         JsonEditorComponent,
+        LowerCaseInputDirective,
         MarkdownEditorComponent,
         ModalViewDirective,
         MoneyPipe,
@@ -112,6 +114,7 @@ import {
         GeolocationEditorComponent,
         IndeterminateValueDirective,
         JsonEditorComponent,
+        LowerCaseInputDirective,
         MarkdownEditorComponent,
         ModalViewDirective,
         MoneyPipe,

src/Squidex/app/shared/components/app-form.component.html

@@ -10,7 +10,7 @@
         
         <sqx-control-errors for="name" [submitted]="createFormSubmitted"></sqx-control-errors>
 
-		<input type="text" class="form-control" id="app-name" formControlName="name" />
+		<input type="text" class="form-control" id="app-name" formControlName="name" autocomplete="off" sqxLowerCaseInput />
         
         <span class="form-hint">
             The app name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}<b>{{appName | async}}</b>/.

src/Squidex/app/shell/pages/internal/apps-menu.component.scss

@@ -52,11 +52,11 @@
     &-pill {
         @include absolute(.8rem, .625rem, auto, auto);
         @include border-radius(8px);
-        padding: 0 .6rem;
+        padding: 0 .4rem;
         background: $color-theme-blue-lightest;
         border: 0;
-        line-height: 1.5rem;
+        line-height: 1.2rem;
-        font-size: .9rem;
+        font-size: .8rem;
         font-weight: normal;
         color: $color-theme-blue;
     }