Remove extra view after owner creation

This commit is contained in:
Johannes Zellner
2025-05-14 11:42:00 +02:00
parent e17959ed65
commit 405529e8f6
+35 -80
View File
@@ -7,19 +7,12 @@ import { redirectIfNeeded } from '../utils.js';
const provisionModel = ProvisionModel.create();
const VIEWS = {
OWNER: 'owner',
FINISHED: 'finished',
};
const view = ref('');
const formError = ref({});
const busy = ref(false);
const displayName = ref('');
const email = ref('');
const username = ref('');
const password = ref('');
const firstTimeLoginUrl = ref('');
const setupToken = ref('');
const acceptLicense = ref(false);
@@ -69,8 +62,7 @@ async function onOwnerSubmit() {
// set token to autologin on first oidc flow
localStorage.cloudronFirstTimeToken = result;
firstTimeLoginUrl.value = '/openid/auth?client_id=cid-webadmin&scope=openid email profile&response_type=code token&redirect_uri=' + window.location.origin + '/authcallback.html';
view.value = VIEWS.FINISHED;
window.location.href = '/openid/auth?client_id=cid-webadmin&scope=openid email profile&response_type=code token&redirect_uri=' + window.location.origin + '/authcallback.html';
}
onMounted(async () => {
@@ -78,90 +70,53 @@ onMounted(async () => {
if (error) return console.error(error);
if (redirectIfNeeded(result, 'activation')) return; // redirected to some other view...
view.value = VIEWS.OWNER;
});
</script>
<template>
<div class="container">
<Transition name="slide-fade" mode="out-in">
<div v-if="view === VIEWS.OWNER" class="view">
<h1>Welcome to Cloudron</h1>
<h3>Set up Admin Account</h3>
<div class="view">
<h1>Welcome to Cloudron</h1>
<h3>Set up Admin Account</h3>
<div class="has-error" v-if="formError.generic">{{ formError.generic }}</div>
<div class="has-error" v-if="formError.generic">{{ formError.generic }}</div>
<form @submit.prevent="onOwnerSubmit()" autocomplete="off">
<fieldset :disabled="busy">
<input type="submit" style="display: none;"/>
<form @submit.prevent="onOwnerSubmit()" autocomplete="off">
<fieldset :disabled="busy">
<input type="submit" style="display: none;"/>
<FormGroup :has-error="formError.displayName">
<label for="displayNameInput">Full Name</label>
<TextInput id="displayNameInput" v-model="displayName" required />
<small class="text-danger">{{ formError.displayName }}</small>
</FormGroup>
<FormGroup :has-error="formError.displayName">
<label for="displayNameInput">Full Name</label>
<TextInput id="displayNameInput" v-model="displayName" required />
<small class="text-danger">{{ formError.displayName }}</small>
</FormGroup>
<FormGroup :has-error="formError.email">
<label for="emailInput">Email <sup><a href="https://docs.cloudron.io/installation/#admin-account" target="_blank" tabIndex="-1"><i class="fa fa-question-circle"></i></a></sup></label>
<EmailInput id="emailInput" v-model="email" required />
<small class="text-danger">{{ formError.email }}</small>
<small>A valid email is required for Let's Encrypt certificates. This email is local to your Cloudron. </small>
</FormGroup>
<FormGroup :has-error="formError.email">
<label for="emailInput">Email <sup><a href="https://docs.cloudron.io/installation/#admin-account" target="_blank" tabIndex="-1"><i class="fa fa-question-circle"></i></a></sup></label>
<EmailInput id="emailInput" v-model="email" required />
<small class="text-danger">{{ formError.email }}</small>
<small>A valid email is required for Let's Encrypt certificates. This email is local to your Cloudron. </small>
</FormGroup>
<FormGroup :has-error="formError.username">
<label for="usernameInput">Username</label>
<TextInput id="usernameInput" v-model="username" required />
<small class="text-danger">{{ formError.username }}</small>
</FormGroup>
<FormGroup :has-error="formError.username">
<label for="usernameInput">Username</label>
<TextInput id="usernameInput" v-model="username" required />
<small class="text-danger">{{ formError.username }}</small>
</FormGroup>
<FormGroup :has-error="formError.password">
<label for="passwordInput">Password</label>
<PasswordInput id="passwordInput" v-model="password" required />
<small class="text-danger">{{ formError.password }}</small>
</FormGroup>
<FormGroup :has-error="formError.password">
<label for="passwordInput">Password</label>
<PasswordInput id="passwordInput" v-model="password" required />
<small class="text-danger">{{ formError.password }}</small>
</FormGroup>
<Checkbox v-model="acceptLicense" label="Accept Cloudron License" required/>
<Checkbox v-model="acceptLicense" style="display: inline-flex;" label="Accept Cloudron License" required/><sup style="margin-left: 6px;"><a href="https://www.cloudron.io/legal/terms.html" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup><br/>
<Button :disabled="busy || !isValid" :loading="busy" @click="onOwnerSubmit()">Create Admin</Button>
</fieldset>
</form>
</div>
<!-- TODO remove this view -->
<div v-else-if="view === VIEWS.FINISHED" class="view">
<h1>Cloudron is ready to use</h1>
<div>
&nbsp; &nbsp; Before you start:
<ul class="fa-ul">
<li><i class="fa-li fa fa-users"></i>
<b>User management</b>: Cloudron has a central user directory. When installing an app,
you can set it up to authenticate against this directory.
</li>
<br/>
<li><i class="fa-li fa fa-envelope-open"></i>
<b>Email Configuration</b>: Apps are configured to send email based on the settings in the Email view.
This saves you the trouble of having to configure mail settings inside each app.
</li>
<br/>
<li><i class="fa-li fa fa-archive"></i>
<b>Backups</b>: Store your backups on storage services completely independent from your server.
You can use backups to seamlessly migrate your setup to another server.
</li>
<br/>
<li><i class="fa-li fa fa-birthday-cake"></i>
<b>Updates</b>: The Cloudron team tracks upstream releases and publishes app updates after testing.
Your apps are kept fresh &amp; secure.
</li>
</ul>
</div>
<br/>
<Button :href="firstTimeLoginUrl">Proceed to Dashboard</Button>
</div>
</Transition>
<Button :disabled="busy || !isValid" :loading="busy" @click="onOwnerSubmit()">Create Admin</Button>
</fieldset>
</form>
</div>
</div>
</template>
@@ -169,7 +124,7 @@ onMounted(async () => {
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: auto;
}