Stop using script setup feature but use olden style

2023-02-22 15:59:23 +01:00
parent 669b042107
commit dafc8dea19
501 changed files with 26308 additions and 106 deletions
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div>
+      <span>You are logged in</span>
+      <Button label="Logout" @click="onLogout"/>
+    </div>
+    <div class="main-view">
+      <DirectoryView />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Button from 'primevue/button';
+
+import DirectoryView from '../components/DirectoryView.vue';
+
+export default {
+  name: 'Home',
+  components: {
+    DirectoryView,
+    Button
+  },
+  methods: {
+    onLogout() {
+      delete localStorage.accessToken;
+      this.$router.push('/login');
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+
+.main-view {
+  width: 100%;
+  height: 400px;
+}
+
+</style>
@@ -0,0 +1,144 @@
+<template>
+  <div class="container">
+    <img style="margin-top: -84px" src="/logo.png" width="128" height="128" />
+
+    <form @submit="onLogin" @submit.prevent>
+      <h1>Login to <b>Cloudron</b></h1>
+
+      <div class="field">
+        <label for="usernameInput">Username</label>
+        <InputText id="usernameInput" type="username" v-model="username" :disabled="busy" required/>
+      </div>
+
+      <div class="field">
+        <label for="passwordInput">Password</label>
+        <Password input-id="passwordInput" v-model="password" :disabled="busy" toggle-mask :feedback="false" required :class="{ 'p-invalid': error }" input-style="width: 100%"/>
+        <small v-show="error" :class="{ 'p-invalid': error }">Wrong username or password.</small>
+      </div>
+
+      <div class="field">
+        <label for="totpTokenInput">2FA Token (if enabled)</label>
+        <InputMask id="totpTokenInput" v-model="totpToken" :disabled="busy" slotChar="." mask="999999" />
+      </div>
+
+      <div class="action-bar">
+        <a href="">Reset password</a>
+        <Button class="submit-button" type="submit" label="Sign in" id="loginButton" :loading="busy" :disabled="busy || !username || !password"/>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+
+import superagent from 'superagent';
+import safe from 'safetydance';
+
+// if imported in script setup tag they are also registered with the vue app as components to be used in html
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Password from 'primevue/password';
+import InputMask from 'primevue/inputmask';
+
+// can be exposed as env var, see develop.sh
+const BASE_URL = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
+
+export default {
+  components: {
+    Button, InputText, Password, InputMask
+  },
+  emits: [ 'success', 'error' ],
+  data() {
+    return {
+      username: '',
+      password: '',
+      totpToken: '',
+      error: '',
+      busy: false
+    };
+  },
+  methods: {
+    async onLogin() {
+      this.error = false;
+      this.busy = true;
+
+      const [err, res] = await safe(superagent.post(`${BASE_URL}/api/v1/cloudron/login`).send({ username: this.username, password: this.password, totpToken: this.totpToken }));
+
+      this.busy = false;
+
+      if (err && err.status === 401) {
+        this.error = 'Invalid username or password';
+        this.password = '';
+        return;
+      }
+      if (err) return console.error(err);
+
+      localStorage.accessToken = res.body.accessToken;
+
+      this.$router.push('/home');
+
+      this.$emit('success', res.body.accessToken);
+
+      this.username = '';
+      this.password = '';
+      this.totpToken = '';
+    }
+  },
+  mounted() {
+    setTimeout(function () { document.getElementById('usernameInput').focus(); }, 0);
+  }
+};
+
+</script>
+
+
+<style scoped>
+
+h1 {
+  color: #777;
+  font-weight: normal;
+  font-size: 24px;
+}
+
+h1 b {
+  color: black;
+  font-size: 36px;
+}
+
+.container {
+    max-width: 640px;
+    margin: auto;
+    margin-top: 100px;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 0 2px 5px rgba(0,0,0,.1);
+    text-align: center;
+}
+
+.field * {
+    display: block;
+    width: 100%;
+    text-align: left;
+}
+
+.field label {
+  margin-bottom: 5px;
+}
+
+.field {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.action-bar {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.action-bar * {
+  align-self: baseline;
+}
+
+</style>