Merge branch 'piccolo-orm:master' into charts_support

CHANGES.rst

@@ -1,6 +1,16 @@
 Changes
 =======
 
+0.51.0
+------
+
+Improved the UI for password inputs (e.g. on the change password page). Thanks
+to @sinisaos for this.
+
+Fixed a bug with nullable date fields.
+
+-------------------------------------------------------------------------------
+
 0.50.0
 ------
 

admin_ui/src/components/InputField.vue

@@ -59,6 +59,7 @@
                         noCalendar: format == 'time'
                     }"
                     v-bind:name="columnName"
+                    v-bind:placeholder="placeholder"
                     v-model="localValue"
                 ></flat-pickr>
             </template>

admin_ui/src/components/PasswordInput.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="password_wrapper">
+        <input
+            name="password"
+            v-bind:value="value"
+            v-bind:type="showPassword ? 'text' : 'password'"
+            v-on:input="$emit('input', $event.target.value)"
+        />
+        <span
+            class="viewer"
+            v-if="value"
+            v-on:click="showPassword = !showPassword"
+        >
+            <font-awesome-icon
+                v-if="!showPassword"
+                icon="eye"
+                title="Show password"
+            />
+            <font-awesome-icon v-else icon="eye-slash" title="Hide password" />
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        value: String
+    },
+    data() {
+        return {
+            showPassword: false
+        }
+    }
+}
+</script>
+
+<style lang="less">
+div.password_wrapper {
+    position: relative;
+
+    span.viewer {
+        color: #878787;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 1;
+        cursor: pointer;
+    }
+}
+</style>

admin_ui/src/fontawesome.ts

@@ -36,6 +36,7 @@ import {
     faQuestionCircle,
     faSearch,
     faSignOutAlt,
+    faEyeSlash,
     faSort,
     faSun,
     faTable,
@@ -80,6 +81,7 @@ library.add(
     faQuestionCircle,
     faSearch,
     faSignOutAlt,
+    faEyeSlash,
     faSort,
     faSun,
     faTable,

admin_ui/src/utils.ts

@@ -112,6 +112,8 @@ export function convertFormValue(params: {
         value = null
     } else if (schema?.properties[key].format == "date-time" && value == "") {
         value = null
+    } else if (schema?.properties[key].format == "date" && value == "") {
+        value = null
     } else if (schema?.properties[key].type == "integer" && value == "") {
         value = null
     } else if (schema?.properties[key].type == "number" && value == "") {

admin_ui/src/views/ChangePassword.vue

@@ -2,29 +2,16 @@
     <div id="change_password">
         <div class="inner">
             <BackButton />
-            <h1>{{ $t("Change password") }}</h1>
+            <div class="heading">
+                <h1>{{ $t("Change password") }}</h1>
+            </div>
             <form v-on:submit.prevent="changePassword">
                 <label>{{ $t("Current password") }}</label>
-                <input
-                    name="current_password"
-                    type="password"
-                    v-model="currentPassword"
-                />
-
+                <PasswordInput v-model="currentPassword" />
                 <label>{{ $t("New password") }}</label>
-                <input
-                    name="new_password"
-                    type="password"
-                    v-model="newPassword"
-                />
-
+                <PasswordInput v-model="newPassword" />
                 <label>{{ $t("New password confirmation") }}</label>
-                <input
-                    name="confirm_new_password"
-                    type="password"
-                    v-model="confirmNewPassword"
-                />
-
+                <PasswordInput v-model="confirmNewPassword" />
                 <button>{{ $t("Change password") }}</button>
             </form>
         </div>
@@ -34,6 +21,7 @@
 <script lang="ts">
 import axios from "axios"
 import BackButton from "../components/BackButton.vue"
+import PasswordInput from "../components/PasswordInput.vue"
 
 export default {
     data() {
@@ -44,11 +32,11 @@ export default {
         }
     },
     components: {
-        BackButton
+        BackButton,
+        PasswordInput
     },
     methods: {
         async changePassword() {
-            console.log("Changing password")
             const payload = {
                 current_password: this.currentPassword,
                 new_password: this.newPassword,
@@ -58,7 +46,7 @@ export default {
                 await axios.post(`./api/change-password/`, payload)
                 this.$store.commit("updateApiResponseMessage", {
                     contents: `Changed password successfully. You will be redirected
-                        to the login page to log in with your new credentials.`,
+                        to log in with your new credentials.`,
                     type: "success"
                 })
                 setTimeout(() => {

admin_ui/src/views/Login.vue

@@ -1,14 +1,15 @@
 <template>
     <div id="login">
         <div class="inner">
-            <h1>{{ siteName }}</h1>
+            <div class="heading">
+                <h1>{{ siteName }}</h1>
+            </div>
             <form v-on:submit.prevent="login">
                 <label>{{ $t("Username") }}</label>
                 <input name="username" type="text" v-model="username" />
 
                 <label>{{ $t("Password") }}</label>
-                <input name="password" type="password" v-model="password" />
-
+                <PasswordInput v-model="password" />
                 <button data-uitest="login_button">{{ $t("Login") }}</button>
             </form>
         </div>
@@ -17,14 +18,18 @@
 
 <script lang="ts">
 import axios from "axios"
+import PasswordInput from "../components/PasswordInput.vue"
 
 export default {
-    data: function () {
+    data() {
         return {
             username: "",
             password: ""
         }
     },
+    components: {
+        PasswordInput
+    },
     computed: {
         siteName() {
             return this.$store.state.metaModule.siteName
@@ -68,10 +73,16 @@ div#login {
         max-width: 30rem;
         padding: 0 0.5rem;
 
-        h1 {
-            margin-top: 0;
-            padding-top: 4rem;
+        div.heading {
             text-align: center;
+
+            h1 {
+                margin-top: 0;
+                padding-top: 4rem;
+                text-align: center;
+                border-bottom: 3px solid #009dff;
+                display: inline-block;
+            }
         }
     }
 }

e2e/test_null_columns.py

@@ -29,5 +29,7 @@ def test_add_nullable_columns(page: Page, dev_server):
             "numeric": None,
             "uuid": None,
             "email": None,
+            "timestamp": None,
+            "date": None,
         }
     ]

piccolo_admin/example.py

@@ -238,6 +238,8 @@ class NullableColumns(Table):
     numeric = Numeric(null=True, default=None)
     uuid = UUID(null=True, default=None)
     email = Email(null=True, default=None)
+    timestamp = Timestamp(null=True, default=None)
+    date = Date(null=True, default=None)
 
 
 class SortedColumns(Table):

piccolo_admin/version.txt

@@ -1 +1 @@
-0.50.0
+0.51.0

requirements/test-requirements.txt

@@ -2,5 +2,6 @@ pytest==7.3.1
 pytest-cov==4.0.0
 flake8==5.0.4
 piccolo[postgres,sqlite]>=0.30.0
+playwright==1.35.0
 pytest-playwright==0.3.3
 httpx>=0.20.0