yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

installer wip

Browse Source
This commit is contained in:
JesmoDev
2022-05-19 21:15:06 +02:00
parent 958efd4dc8
commit 3533038fc3
5 changed files with 146 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts
View File

@@ -1,27 +1,44 @@
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { customElement, state } from 'lit/decorators.js';
import { postInstall } from '../api/fetcher';
@customElement('umb-installer-database')
export class UmbInstallerDatabase extends LitElement {
static styles: CSSResultGroup = [
css`
uui-input,
uui-input-password {
uui-input-password,
uui-combobox {
width: 100%;
}
h1 {
text-align: center;
margin-bottom: var(--uui-size-layout-3);
}
h4 {
margin-bottom: 0;
margin-top: var(--uui-size-layout-2);
}
#buttons {
display: flex;
margin-top: var(--uui-size-layout-3);
}
#button-install {
margin-left: auto;
min-width: 120px;
}
`,
];
options = ['SQLite', 'Microsoft SQL Server', 'Custom connection string'];
@state()
databaseType = 'SQLite';
private _handleSubmit = (e: SubmitEvent) => {
e.preventDefault();
@@ -40,13 +57,106 @@ export class UmbInstallerDatabase extends LitElement {
this.dispatchEvent(new CustomEvent('user', { bubbles: true, composed: true }));
}
private _renderSettings() {
switch (this.databaseType) {
case 'Microsoft SQL Server':
return this._renderSqlServer();
case 'Custom connection string':
return this._renderCustom();
default:
return this._renderSQLite();
}
}
private _renderSQLite = () => html` <uui-form-layout-item>
<uui-label for="database-file-name" slot="label" required>Database file name</uui-label>
<uui-input
type="text"
id="database-file-name"
name="database-file-name"
value="Umbraco"
required
required-message="Database file name is required"></uui-input>
</uui-form-layout-item>`;
private _renderSqlServer = () => html`
<h4>Connection</h4>
<hr />
<uui-form-layout-item>
<uui-label for="server" slot="label" required>Server</uui-label>
<uui-input
type="text"
id="server"
name="server"
placeholder="(local)SQLEXPRESS"
required
required-message="Server is required"></uui-input>
</uui-form-layout-item>
<uui-form-layout-item>
<uui-label for="database-name" slot="label" required>Database Name</uui-label>
<uui-input
type="text"
id="database-name"
name="database-name"
placeholder="umbraco-cms"
required
required-message="Database name is required"></uui-input>
</uui-form-layout-item>
<h4>Connection</h4>
<hr />
<uui-form-layout-item>
<uui-checkbox name="int-auth" label="int-auth">Use integrated authentication</uui-checkbox>
</uui-form-layout-item>
<uui-form-layout-item>
<uui-label for="username" slot="label" required>Username</uui-label>
<uui-input type="text" id="username" name="username" required required-message="Username is required"></uui-input>
</uui-form-layout-item>
<uui-form-layout-item>
<uui-label for="password" slot="label" required>Password</uui-label>
<uui-input-password
id="password"
name="password"
required
required-message="Password is required"></uui-input-password>
</uui-form-layout-item>
`;
private _renderCustom = () => html`
<uui-form-layout-item>
<uui-label for="connection-string" slot="label" required>Connection string</uui-label>
<uui-textarea
type="text"
id="connection-string"
name="connection-string"
required
required-message="Connection string is required"></uui-textarea>
</uui-form-layout-item>
`;
private _handleDatabaseTypeChange = (e: CustomEvent) => {
this.databaseType = e.target.value;
};
render() {
return html` <div class="uui-text">
<h1 class="uui-h3">Customize Umbraco</h1>
<h1 class="uui-h3">Database Configuration</h1>
<uui-form>
<form id="LoginForm" name="login" @submit="${this._handleSubmit}">
<form id="database-form" name="database" @submit="${this._handleSubmit}">
<uui-form-layout-item>
<uui-label for="database-type" slot="label" required>Database type</uui-label>
<uui-combobox value=${this.databaseType} @change=${this._handleDatabaseTypeChange}>
<uui-combobox-list>
${this.options.map(
(option) => html` <uui-combobox-list-option value=${option}>${option}</uui-combobox-list-option> `
)}
</uui-combobox-list>
</uui-combobox>
</uui-form-layout-item>
${this._renderSettings()}
<div id="buttons">
<uui-button id="button-back" @click=${this._onBack} label="Back" look="secondary"></uui-button>
<uui-button label="Back" @click=${this._onBack} look="secondary"></uui-button>
<uui-button id="button-install" type="submit" label="Install" look="positive"></uui-button>
</div>
</form>

24
src/Umbraco.Web.UI.Client/src/installer/installer-installing.element.ts
View File

@@ -4,20 +4,8 @@ import { customElement } from 'lit/decorators.js';
export class UmbInstallerInstalling extends LitElement {
static styles: CSSResultGroup = [
css`
#log {
border: 1px solid #b3b3b3;
margin-top: 16px;
padding: 8px 12px;
background: #f1f1f1;
color: #282828;
}
#buttons {
display: flex;
}
#button-install {
margin-left: auto;
h1 {
text-align: center;
}
`,
];
@@ -25,15 +13,7 @@ export class UmbInstallerInstalling extends LitElement {
render() {
return html` <div class="uui-text">
<h1 class="uui-h3">Installing Umbraco</h1>
<p>Almost there! In a few moments your Umbraco adventure begins!</p>
<uui-progress-bar progress="50"></uui-progress-bar>
<div id="log">
struct group_info init_groups = { .usage = ATOMIC_INIT(2) }; struct group_info *groups_alloc(int gidsetsize){
struct group_info *group_info; int nblocks; int i; nblocks = (gidsetsize + NGROUPS_PER_BLOCK - 1) /
NGROUPS_PER_BLOCK; /* Make sure we always allocate at least one indirect block pointer */ nblocks = nblocks ? :
1; group_info = kmalloc(sizeof(*group_info) + nblocks*sizeof(gid_t *), GFP_USER); if (!group_info) return NULL;
group_info->ngroups = gidsetsize; group_info->nblocks = nblocks; atomic_set(&grou|
</div>
</div>`;
}
}

5
src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts
View File

@@ -37,8 +37,9 @@ export class UmbInstallerLayout extends LitElement {
}
#box {
width: 500px;
padding: var(--uui-size-space-4) var(--uui-size-space-6) var(--uui-size-space-6) var(--uui-size-space-6);
width: 450px;
box-sizing: border-box;
padding: var(--uui-size-layout-1) var(--uui-size-layout-2) var(--uui-size-layout-2) var(--uui-size-layout-2);
}
`,
];

51
src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts
View File

@@ -12,12 +12,23 @@ export class UmbInstallerUser extends LitElement {
width: 100%;
}
h1 {
text-align: center;
margin-bottom: var(--uui-size-layout-3);
}
#news-checkbox {
margin-top: var(--uui-size-layout-2);
}
#buttons {
display: flex;
margin-top: var(--uui-size-layout-3);
}
#button-install {
margin-left: auto;
min-width: 120px;
}
`,
];
@@ -38,11 +49,11 @@ export class UmbInstallerUser extends LitElement {
const password = formData.get('password') as string;
const news = formData.has('news');
this._install(name, email, password, news);
this._next(name, email, password, news);
};
private async _install(name: string, email: string, password: string, subscribeToNewsletter: boolean) {
console.log('Installing', name, email, password, subscribeToNewsletter);
private async _next(name: string, email: string, password: string, subscribeToNewsletter: boolean) {
console.log('Next', name, email, password, subscribeToNewsletter);
try {
await postInstall({
@@ -55,12 +66,12 @@ export class UmbInstallerUser extends LitElement {
connectionString: '',
databaseProviderMetadataId: '1',
integratedAuth: false,
providerName: 'SQLite'
}
providerName: 'SQLite',
},
});
// TODO: Change to redirect when router has been added.
this.dispatchEvent(new CustomEvent('install', { bubbles: true, composed: true }));
this.dispatchEvent(new CustomEvent('database', { bubbles: true, composed: true }));
} catch (error) {
console.log(error);
}
@@ -72,29 +83,17 @@ export class UmbInstallerUser extends LitElement {
render() {
return html` <div class="uui-text">
<h1 class="uui-h3">Install Umbraco</h1>
<h1>Install Umbraco</h1>
<uui-form>
<form id="LoginForm" name="login" @submit="${this._handleSubmit}">
<uui-form-layout-item>
<uui-label for="name" slot="label" required>Name</uui-label>
<uui-input
type="text"
id="name"
name="name"
placeholder="Enter your name..."
required
required-message="Name is required"></uui-input>
<uui-input type="text" id="name" name="name" required required-message="Name is required"></uui-input>
</uui-form-layout-item>
<uui-form-layout-item>
<uui-label for="email" slot="label" required>Email</uui-label>
<uui-input
type="email"
id="email"
name="email"
placeholder="Enter your email..."
required
required-message="Email is required"></uui-input>
<uui-input type="email" id="email" name="email" required required-message="Email is required"></uui-input>
</uui-form-layout-item>
<uui-form-layout-item>
@@ -102,24 +101,18 @@ export class UmbInstallerUser extends LitElement {
<uui-input-password
id="password"
name="password"
placeholder="Enter your password..."
required
required-message="Password is required"></uui-input-password>
</uui-form-layout-item>
<uui-form-layout-item>
<uui-form-layout-item id="news-checkbox">
<uui-checkbox name="persist" label="Remember me">
Keep me updated on Umbraco Versions, Security Bulletins and Community News
</uui-checkbox>
</uui-form-layout-item>
<div id="buttons">
<uui-button
id="button-customize"
@click=${this._onCustomize}
label="Customize"
look="secondary"></uui-button>
<uui-button id="button-install" type="submit" label="Install" look="positive"></uui-button>
<uui-button id="button-install" type="submit" label="Next" look="primary"></uui-button>
</div>
</form>
</uui-form>

6
src/Umbraco.Web.UI.Client/src/installer/installer.element.ts
View File

@@ -13,7 +13,7 @@ export class UmbInstaller extends LitElement {
static styles: CSSResultGroup = [css``];
@state()
step = 1;
step = 2;
private _renderSection() {
switch (this.step) {
@@ -30,7 +30,7 @@ export class UmbInstaller extends LitElement {
connectedCallback(): void {
super.connectedCallback();
this.addEventListener('install', () => this._handleInstall());
this.addEventListener('customize', () => this._handleCustomize());
this.addEventListener('database', () => this._handleDatabase());
this.addEventListener('user', () => this._handleUser());
getInstall({}).then(({ data }) => {
@@ -42,7 +42,7 @@ export class UmbInstaller extends LitElement {
this.step = 1;
}
private _handleCustomize() {
private _handleDatabase() {
this.step = 2;
}