@scx-js/scx-admin 0.0.3

package/views/login/register-form.vue

@@ -0,0 +1,148 @@
+<template>
+    <el-form ref="registerFormRef" :model="registerForm" :rules="registerFormRules">
+
+        <el-form-item prop="registerUsername">
+            <el-input ref="registerUsernameRef" v-model="registerForm.registerUsername"
+                      placeholder="用户名由字母和数字组成  大于4位小于15位"
+                      @keyup.enter="onRegister">
+                <template v-slot:prefix>
+                    <scx-icon icon="outlined-user"/>
+                </template>
+            </el-input>
+        </el-form-item>
+
+        <el-form-item prop="registerPassword">
+            <el-input v-model="registerForm.registerPassword"
+                      placeholder="密码由字母,数字或符号组成  大于等于6位小于20位"
+                      show-password
+                      @keyup.enter="onRegister">
+                <template v-slot:prefix>
+                    <scx-icon icon="outlined-unlock"/>
+                </template>
+            </el-input>
+        </el-form-item>
+
+        <el-form-item prop="registerPasswordAgain">
+            <el-input v-model="registerForm.registerPasswordAgain" placeholder="请再次输入密码"
+                      show-password
+                      @keyup.enter="onRegister">
+                <template v-slot:prefix>
+                    <scx-icon icon="outlined-unlock"/>
+                </template>
+            </el-input>
+        </el-form-item>
+
+        <el-button :loading="registerForm.registerBtnLoading" style="width: 100%" type="success" @click="onRegister">
+            注册
+        </el-button>
+
+    </el-form>
+</template>
+<script setup>
+import {reactive, ref} from "vue";
+import {ElMessage} from "element-plus";
+import {useScxReq} from "@scx-js/scx-http";
+
+const emit = defineEmits(["register-success"]);
+
+const req = useScxReq();
+
+const registerUsernameRef = ref(null);
+
+const registerFormRef = ref(null);
+const registerForm = reactive({
+    registerUsername: "",
+    registerPassword: "",
+    registerPasswordAgain: "",
+    registerBtnLoading: false
+});
+
+const registerFormRules = {
+    registerUsername: [{
+        type: "string",
+        trigger: "change",
+        required: true,
+        validator: (rule, value, callback) => {
+            if (value.length < 4) {
+                callback("用户名太短 !!!");
+            } else {
+                return callback();
+            }
+        }
+    }],
+    registerPassword: [{
+        type: "string",
+        required: true,
+        trigger: "change",
+        validator: (rule, value, callback) => {
+            if (value.length < 6) {
+                callback("密码太短 !!!");  // reject with error message
+            } else {
+                return callback();
+            }
+        }
+    }],
+    registerPasswordAgain: [{
+        type: "string",
+        required: true,
+        trigger: "change",
+        validator: (rule, value, callback) => {
+            if (value.trim() === "") {
+                callback("请再次输入密码 !!!");
+            } else if (value !== registerForm.registerPassword) {
+                callback("两次输入密码不一致 !!!");
+            } else {
+                return callback();
+            }
+        }
+    }]
+};
+
+
+// 注册方法
+function onRegister() {
+    registerFormRef.value.validate((valid) => {
+        if (!valid) {
+            return;
+        }
+        registerForm.registerBtnLoading = true;
+        req.post("api/auth/signup", {
+            username: registerForm.registerUsername,
+            password: registerForm.registerPassword,
+        }).then(response => {
+            ElMessage.success("login.registerSuccess");
+            registerForm.registerBtnLoading = false;
+            emit("register-success", {
+                username: registerForm.registerUsername,
+                password: registerForm.registerPassword
+            });
+        }).catch(e => {
+            if (e.message === "userAlreadyExists") {
+                ElMessage.error("用户名已被占用 !!!");
+            } else {
+                ElMessage.error("未知错误 !!!");
+            }
+            registerForm.registerBtnLoading = false;
+        });
+
+    });
+}
+
+function focus() {
+    registerUsernameRef.value.focus();
+}
+
+function resetFields() {
+    registerFormRef.value.resetFields();
+}
+
+defineExpose({
+    focus,
+    resetFields,
+    registerForm
+});
+</script>
+
+<style scoped>
+
+</style>

package/views/no-perm.vue

@@ -0,0 +1,7 @@
+<template>
+    <error-page message="403"/>
+</template>
+
+<script setup>
+import ErrorPage from "./error-page.vue";
+</script>

package/views/not-found.vue

@@ -0,0 +1,7 @@
+<template>
+    <error-page message="404"/>
+</template>
+
+<script setup>
+import ErrorPage from "./error-page.vue";
+</script>

package/views/rocket.vue

@@ -0,0 +1,84 @@
+<template>
+    <svg height="200" style="overflow: visible" viewBox="0 0 120 120" width="200" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+            <g class="stars animated">
+                <path d="M32.9862439 29.2981615c.1110863.8208744-.4626987 1.5770446-1.2847376 1.6881041-.8210729.1110595-1.5764599-.4635526-1.6875462-1.2844271-.1120523-.8208744.4626987-1.5760789 1.2837716-1.6881041.8220388-.1110595 1.5774259.4635526 1.6885122 1.2844271"
+                      fill="#D0E7FB"/>
+                <path d="M100.94858 6.8876353c-.214287.79954375-1.0363503 1.27471744-1.8366061 1.06131608-.7983596-.21340136-1.2743411-1.03570792-1.0610028-1.83620012.2142866-.80049221 1.0363503-1.2756659 1.8366062-1.06131609.8002557.21434981 1.2752897 1.03570792 1.0610027 1.83620013"
+                      fill="#D0E7FB"/>
+                <g transform="translate(0 69)">
+                    <mask id="b" fill="#fff">
+                        <path id="a" d="M0 4.21585531V.05647427h4.15889198v4.15938104H0z"/>
+                    </mask>
+                    <path d="M4.0876 2.6727c-.296 1.109-1.436 1.769-2.545 1.472-1.109-.297-1.768-1.436-1.472-2.546.297-1.109 1.436-1.768 2.546-1.471 1.11.296 1.768 1.436 1.471 2.545"
+                          fill="#A1D2F8" mask="url(#b)"/>
+                </g>
+                <path d="M106.948688 111.887537c-.212978.799632-1.035129 1.275692-1.835888 1.060907-.80076-.213855-1.276008-1.035802-1.06117-1.835434.212978-.799632 1.036059-1.275692 1.835888-1.061837.80076.213855 1.275078 1.036732 1.06117 1.836364"
+                      fill="#A1D2F8"/>
+                <path d="M54.2354557 18.9014571c-1.5953959-.4199186-2.556853-2.0704598-2.1369062-3.6657486.4209514-1.5962933 2.0705988-2.5576859 3.6659948-2.1367627 1.5953959.4209232 2.556853 2.0704598 2.1369062 3.6657486-.4209514 1.5952888-2.0695942 2.5566813-3.6659948 2.1367627z"
+                      stroke="#A1D2F8" stroke-width="2"/>
+                <path d="M16.9721415 7.59675618c.2239612 1.64109572-.9269786 3.15263122-2.5690262 3.37559532-1.640039.222964-3.1515262-.9270082-3.3754875-2.56810392-.2229569-1.64210006.9279829-3.1536356 2.5690262-3.37659964 1.6410433-.22296405 3.1525306.92700817 3.3754875 2.56910824"
+                      fill="#A1D2F8"/>
+                <path d="M49.2357085 117.901451c-1.5962933-.419947-2.5576859-2.070599-2.1367627-3.665995.4209232-1.595396 2.0704598-2.556853 3.6657486-2.136907 1.5952888.420952 2.5566813 2.070599 2.1367627 3.665995-.4209231 1.595396-2.0694552 2.556853-3.6657486 2.136907z"
+                      stroke="#A1D2F8" stroke-width="2"/>
+            </g>
+            <g class="rocket animated">
+                <path d="M53.9118329 92L44 81.3510365 50.0881671 76 60 86.6489635z" fill="#F2F9FE"/>
+                <path d="M53.9118329 92L44 81.3510365 50.0881671 76 60 86.6489635z" stroke="#A1D2F8"
+                      stroke-linejoin="round" stroke-width="2"/>
+                <path d="M57 47.0157449L49.8317064 42 24 60.6301909 49.2570499 62z" fill="#FFF"/>
+                <path d="M87.754216 81L92 88.7814042 71 113l1.16221-25.7194181z" fill="#F2F9FE"/>
+                <path d="M108.233532 59.9703727c10.579453-16.2472813 10.22216-27.2231872 9.399093-31.6550767v-.0029805c-.413027-5.3975467-5.752516-6.357243-5.752516-6.357243-4.3323-1.2656865-15.2362027-2.7350352-32.5037006 6.126757-22.9294458 11.767705-28.5485982 30.6029873-28.5485982 30.6029873s-4.8199707 15.3392457 1.1942938 22.6243939c.0288621.0387455.0467766.0824584.0806149.1192169.0338383.0377521.0716576.0695432.1054959.1072953.0328431.037752.0627005.0784845.0965388.1162365.0328431.0357651.0746433.0596084.1104722.0923931 6.6512212 6.7099265 22.4268471 3.4771606 22.4268471 3.4771606s19.3415882-3.6718816 33.3914591-25.2511404"
+                      fill="#FFF"/>
+                <path d="M108.214668 59.904736c10.318007-15.8150644 10.338974-26.7477325 9.407418-31.913642-.442314-5.0236555-4.362238-6.8839002-6.034646-7.4529163-.310519-.105447-.646997-.2198471-.998452-.2795341-.309521-.0885357-.642005-.1750818-.993461-.2586436.726874 5.517068.100844 16.050828-9.569167 30.8730987-13.9234193 21.3450646-32.8900212 25.1550846-33.6897816 25.3062916-.5082122.1044523-10.6714593 2.1099353-18.3365784-.7391239.5171983 1.9637021 1.3359293 3.8090251 2.610953 5.3509392l.1936998.233774 1.710349-1.3658374-1.5745595 1.5259975.2546054.2397428c7.1129749 7.0052638 22.6978186 3.9154669 23.3298389 3.7861451.8007589-.151207 19.7663623-3.961227 33.6897814-25.3062916"
+                      fill="#F2F9FE"/>
+                <g>
+                    <path d="M77.0779 50.9007l4.331 4.795-8.215 7.421c-.817.738-.623 1.045.429.688l17.561-6.405c1.053-.358 1.261-1.362.463-2.245l-4.331-4.795 8.215-7.421c.818-.738.623-1.045-.43-.69l-17.56 6.407c-1.054.356-1.261 1.362-.463 2.245"
+                          fill="#FFF"/>
+                    <path d="M77.0779 50.9007l4.331 4.795-8.215 7.421c-.817.738-.623 1.045.429.688l17.561-6.405c1.053-.358 1.261-1.362.463-2.245l-4.331-4.795 8.215-7.421c.818-.738.623-1.045-.43-.69l-17.56 6.407c-1.054.356-1.261 1.362-.463 2.245"
+                          stroke="#A1D2F8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+                </g>
+                <path d="M108.233532 59.9703727c10.579453-16.2472813 10.22216-27.2231872 9.399093-31.6550767v-.0029805c-.413027-5.3975467-5.752516-6.357243-5.752516-6.357243-4.3323-1.2656865-15.2362027-2.7350352-32.5037006 6.126757-22.9294458 11.767705-28.5485982 30.6029873-28.5485982 30.6029873s-4.8199707 15.3392457 1.1942938 22.6243939c.0288621.0387455.0467766.0824584.0806149.1192169.0338383.0377521.0716576.0695432.1054959.1072953.0328431.037752.0627005.0784845.0965388.1162365.0328431.0357651.0746433.0596084.1104722.0923931 6.6512212 6.7099265 22.4268471 3.4771606 22.4268471 3.4771606s19.3415882-3.6718816 33.3914591-25.2511404z"
+                      stroke="#A1D2F8" stroke-width="2"/>
+                <path d="M57 47.0157449L49.8317064 42 24 60.6301909 49.2570499 62z" stroke="#A1D2F8"
+                      stroke-linejoin="round" stroke-width="2"/>
+                <path d="M65 72l-31 28" stroke="#A1D2F8" stroke-linecap="round" stroke-linejoin="round"
+                      stroke-width="2"/>
+                <path d="M110.154443 64.7093112c1.02326.8964969 1.133632 2.4760391.244468 3.5099781l-5.959048 6.9262459c-.888132 1.033939-2.452937 1.1453504-3.476197.2478122l-.117593-.1030815c-1.0242917-.896497-1.133632-2.4760392-.2455-3.508937l5.96008-6.9272871c.888132-1.033939 2.452937-1.1443091 3.476197-.2478122l.117593.1030816z"
+                      fill="#FFF"/>
+                <path d="M110.154443 64.7093112c1.02326.8964969 1.133632 2.4760391.244468 3.5099781l-5.959048 6.9262459c-.888132 1.033939-2.452937 1.1453504-3.476197.2478122l-.117593-.1030815c-1.0242917-.896497-1.133632-2.4760392-.2455-3.508937l5.96008-6.9272871c.888132-1.033939 2.452937-1.1443091 3.476197-.2478122l.117593.1030816z"
+                      stroke="#A1D2F8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+                <path d="M91 85.8362964L88.1804586 81l-15.890329 5.9908294L72 93z" fill="#D0E7FB"/>
+                <path d="M87.754216 81L92 88.7814042 71 113l1.16221-25.7194181z" stroke="#A1D2F8"
+                      stroke-linejoin="round" stroke-width="2"/>
+            </g>
+        </g>
+    </svg>
+</template>
+
+<script>
+export default {
+    name: "rocket"
+};
+</script>
+
+<style scoped>
+.rocket {
+    transform: translate(-50px, 30px);
+}
+
+.stars {
+    transform: translate(50px, -30px);
+}
+
+.rocket.animated,
+.stars.animated {
+    animation: transform-zero-animation 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 1;
+}
+
+@keyframes transform-zero-animation {
+    100% {
+        transform: translate(0, 0) translateZ(0);
+    }
+}
+</style>