stkit 17.0.0__py3-none-any.whl

stk/templates/cms/users.html

@@ -0,0 +1,312 @@
+{% extends 'layout.html' %} {% block css %} {% endblock %}
+{% block content %}
+
+    <v-card class="ma-2 mt-12 w-100 h-100">
+        <v-toolbar>
+            <v-toolbar-title>Users Dashboard</v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
+        <v-card-text>
+
+            <v-data-table-server 
+            :items="items" 
+            :items-length="itemsLength"
+            :headers="headers"
+            :page="options.page"
+            :items-per-page="options.itemsPerPage"
+            @update:options="refresh"
+            hover
+            >
+
+                <template v-slot:top>
+                    <v-toolbar class="mb-4" dense elevation="0" color="transparent">
+                        <v-btn class="ml-auto" @click="createItem" size="small" color="primary" variant="elevated">
+                            <template v-slot:prepend><i class="ti ti-plus"></i></template>
+                            Add User
+                        </v-btn>
+                        
+                    </v-toolbar>
+                </template>
+                <template v-slot:item.roles="{ item }">
+                    <v-chip v-for="role in item.roles" :key="role.id" color="primary" class="mr-2">
+                        ${role.name}
+                    </v-chip>
+
+                </template>
+
+                 <template v-slot:item.active="{ item }">
+                    <v-avatar size="16" v-if="item.active" color="green"></v-avatar>
+                     <v-avatar size="16" v-if="!item.active" color="grey"></v-avatar>
+
+                </template>
+
+                <template v-slot:item.actions="{ item }">
+                    <v-icon
+                            small
+                            class="mr-2"
+                            @click="editItem(item)"
+                    >
+                        ti ti-pencil
+                    </v-icon>
+                    <v-icon
+                            small
+                            class="mr-2"
+                            @click="openResetPassword(item)"
+                    >
+                        ti ti-key
+                    </v-icon>
+                    <v-icon
+                            small
+                            @click="deleteItem(item)"
+                    >
+                        ti ti-trash
+                    </v-icon>
+                </template>
+
+            </v-data-table-server>
+
+
+        </v-card-text>
+    </v-card>
+
+
+    <!--Edit Dialog-->
+    <v-dialog v-model="edialog" width="660">
+        <v-card v-if="edialog">
+            <v-toolbar>
+                <v-toolbar-title>User Editor</v-toolbar-title>
+                <template v-slot:append>
+                    <v-btn @click="edialog=false" size="small" icon="ti ti-x" variant="text"></v-btn>
+                </template>
+            </v-toolbar>
+            
+            
+
+            <v-card-text>
+                <!-- fields go here -->
+                <v-text-field label="Name" v-model="eitem.name"></v-text-field>
+                <v-text-field type="email" v-model="eitem.email" label="Email" required></v-text-field>
+
+                <v-text-field placeholder="Password" type="password" v-model="eitem.password"></v-text-field>
+
+                <v-select label="Roles"
+                          item-title="name"
+                          multiple
+                          v-model="eitem.roles"
+                          return-object
+                          chips
+                          clearable
+                          :items="roles"
+                ></v-select>
+
+                <v-switch color="primary" label="Active" v-model="eitem.active"></v-switch>
+
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" @click="saveItem" variant="elevated">Save</v-btn>
+            </v-card-actions>
+        </v-card>
+
+    </v-dialog>
+
+
+    <!--Reset Password Dialog-->
+    <v-dialog v-model="resetDialog" width="440">
+        <v-card v-if="resetDialog">
+            <v-toolbar>
+                <v-toolbar-title>Reset Password</v-toolbar-title>
+                <template v-slot:append>
+                    <v-btn @click="resetDialog=false" size="small" icon="ti ti-x" variant="text"></v-btn>
+                </template>
+            </v-toolbar>
+            <v-card-text>
+                <p class="mb-4 text-body-medium">Set a new password for <strong>${resetUser.email}</strong></p>
+                <v-text-field label="New Password" type="password" v-model="resetPassword" :rules="[v => !!v && v.length >= 12 || 'Min 12 characters']"></v-text-field>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn @click="resetDialog=false" variant="text">Cancel</v-btn>
+                <v-btn color="primary" @click="submitResetPassword" variant="elevated" :disabled="!resetPassword || resetPassword.length < 12">Reset</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+    <v-snackbar size="small" class="d-flex" v-model="snackBar" rounded="pill" elevation="25">
+
+        ${snackMessage}
+        <template v-slot:actions>
+            <v-btn @click="snackBar=false" icon="ti ti-x" class="ml-auto" size="small" variant="text"></v-btn>
+        </template>
+    </v-snackbar>
+
+
+{% endblock %} {% block js %}
+
+    <script type="application/json" id="roles-data">
+    {{ roles|tojson|safe }}
+
+    </script>
+
+    <script>
+        const {createApp, toRaw} = Vue;
+        const {createVuetify} = Vuetify;
+
+        const vuetify = createVuetify(config.vuetifyConfig);
+
+        window.app = createApp({
+            mixins: [layoutMixin],
+            data() {
+                return {
+                    errors: "",
+                    snackBar: false,
+                    snackMessage: "",
+                    items: [],
+                    itemsLength: 0,
+                    options: {
+                        page: 1,
+                        itemsPerPage: 25
+                    },
+
+                    headers: [
+                        {title: 'ID', value: 'id'},
+                        {title: 'Name', value: 'name'},
+                        {title: 'Email', value: 'email'},
+                        {title: 'Roles', value: 'roles', sortable: false},
+                        {title: 'Active', value: 'active', sortable: false},
+                        {title: 'Actions', value: 'actions', sortable: false}
+                    ],
+                    edialog: false,
+                    eitem: {
+                        id: "",
+                        name: "",
+                        email: "",
+                        password: "",
+                        roles: [],
+                        active: true
+                    },
+                    roles: JSON.parse(document.querySelector('#roles-data').textContent),
+                    resetDialog: false,
+                    resetUser: {},
+                    resetPassword: ''
+                };
+            },
+
+            mounted() {
+                // No refresh on mount
+            },
+            delimiters: config.delimiters,
+
+            methods: {
+
+                showSnack(message) {
+                    this.snackMessage = message;
+                    this.snackBar = true;
+                },
+
+                refresh(options) {
+                    // Use options from parameter or component state
+                    if (options) {
+                        // Update options with the values from the event
+                        this.options = {
+                            ...this.options,
+                            page: options.page,
+                            itemsPerPage: options.itemsPerPage
+                        };
+                    }
+                    
+                    // Make API request with pagination parameters
+                    axios.get(`/api/users?page=${this.options.page}&per_page=${this.options.itemsPerPage}`)
+                        .then(res => {
+                            this.items = res.data.items;
+                            this.itemsLength = res.data.total;
+                            // Update itemsPerPage from API response if provided
+                            if (res.data.perPage) {
+                                this.options.itemsPerPage = res.data.perPage;
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error fetching users:', error);
+                            this.showSnack('Failed to load users');
+                        });
+                },
+                
+                createItem() {
+                    this.edialog = true;
+                    this.eitem = {};
+
+                },
+
+                editItem(item) {
+
+                    this.eitem = toRaw(item);
+
+                    this.$nextTick(() => {
+                        this.edialog = true;
+                    });
+
+                },
+
+                saveItem(item) {
+                    if (this.eitem.id) {
+                        // edit mode
+                        axios.post(`/api/user/${this.eitem.id}`, {item: this.eitem})
+                            .then(res => {
+                                this.showSnack(res.data?.message);
+                                this.refresh();
+                            })
+                            .catch(err => {
+                                this.showSnack(err.response?.data);
+                            });
+                    } else {
+                        // create mode
+                        axios.post('/api/user/', {item: this.eitem})
+                            .then(res => {
+                                this.showSnack(res.data?.message);
+                                this.refresh();
+                            })
+                            .catch(err => {
+                                this.showSnack(err.response?.data);
+                            });
+                    }
+                    this.edialog = false;
+                },
+
+                openResetPassword(item) {
+                    this.resetUser = item;
+                    this.resetPassword = '';
+                    this.resetDialog = true;
+                },
+
+                submitResetPassword() {
+                    axios.post(`/api/user/${this.resetUser.id}/reset-password`, {password: this.resetPassword})
+                        .then(res => {
+                            this.showSnack(res.data?.message);
+                            this.resetDialog = false;
+                        })
+                        .catch(err => {
+                            this.showSnack(err.response?.data?.message || 'Error resetting password');
+                        });
+                },
+
+                deleteItem(item) {
+                    if (confirm('Are you sure?')) {
+                        axios.delete(`/api/user/${item.id}`)
+                            .then(res => {
+                                this.showSnack(res.data?.message);
+                                this.refresh();
+                            })
+                            .catch(err => {
+                                this.showSnack(err.response?.data);
+                            });
+                    }
+                }
+            }
+
+        });
+
+        registerStkComponents(app);
+        app.use(vuetify).mount("#app");
+    </script>
+{% endblock %}

stk/templates/dashboard.html

@@ -0,0 +1,132 @@
+{% extends 'layout.html' %}
+{% block content %}
+    <v-container class="py-6">
+        <!-- Stats Row -->
+        <v-row class="mb-6">
+            <v-col cols="12" sm="4">
+                <v-card class="pa-4">
+                    <div class="d-flex align-center">
+                        <i class="ti ti-users mr-4 text-medium-emphasis" style="font-size: 32px;"></i>
+                        <div>
+                            <div class="text-headline-large font-weight-bold">{{ stats.users }}</div>
+                            <div class="text-medium-emphasis">Users</div>
+                        </div>
+                    </div>
+                </v-card>
+            </v-col>
+            <v-col cols="12" sm="4">
+                <v-card class="pa-4">
+                    <div class="d-flex align-center">
+                        <i class="ti ti-shield mr-4 text-medium-emphasis" style="font-size: 32px;"></i>
+                        <div>
+                            <div class="text-headline-large font-weight-bold">{{ stats.roles }}</div>
+                            <div class="text-medium-emphasis">Roles</div>
+                        </div>
+                    </div>
+                </v-card>
+            </v-col>
+            <v-col cols="12" sm="4">
+                <v-card class="pa-4">
+                    <div class="d-flex align-center">
+                        <i class="ti ti-history mr-4 text-medium-emphasis" style="font-size: 32px;"></i>
+                        <div>
+                            <div class="text-headline-large font-weight-bold">{{ stats.activities }}</div>
+                            <div class="text-medium-emphasis">Activity Logs</div>
+                        </div>
+                    </div>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <!-- Profile Card -->
+        <v-row>
+            <v-col cols="12" md="6">
+                <v-card>
+                    <v-card-text class="pa-6">
+                        <div class="d-flex align-center mb-4">
+                            <v-avatar color="primary" size="64" class="mr-4">
+                                <span class="text-headline-small">{{ current_user.name[:2]|upper if current_user.name else 'U' }}</span>
+                            </v-avatar>
+                            <div>
+                                <div class="text-headline-small font-weight-medium">{{ current_user.display_name }}</div>
+                                <div class="text-medium-emphasis">{{ current_user.email }}</div>
+                            </div>
+                        </div>
+                        <v-divider class="my-4"></v-divider>
+                        <div class="d-flex align-center text-medium-emphasis mb-2">
+                            <i class="ti ti-clock mr-2"></i>
+                            <span>Last login: {{ current_user.last_login_at.strftime('%B %-d, %Y at %-I:%M %p') if current_user.last_login_at else 'Never' }}</span>
+                        </div>
+                        <div class="d-flex align-center text-medium-emphasis">
+                            <i class="ti ti-shield-check mr-2"></i>
+                            <span>Roles: {% for role in current_user.roles %}{{ role.name }}{% if not loop.last %}, {% endif %}{% endfor %}</span>
+                        </div>
+                    </v-card-text>
+                    <v-card-actions class="pa-6 pt-0">
+                        <v-btn href="/change" variant="text">
+                            <template v-slot:prepend><i class="ti ti-key"></i></template>
+                            Change Password
+                        </v-btn>
+                        <v-btn @click="logout" variant="text">
+                            <template v-slot:prepend><i class="ti ti-logout"></i></template>
+                            Logout
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+
+            <!-- Quick Links Card -->
+            <v-col cols="12" md="6">
+                <v-card>
+                    <v-card-title class="pa-6 pb-2">Quick Links</v-card-title>
+                    <v-list class="pa-2">
+                        <v-list-item href="/users" class="rounded-lg mb-1">
+                            <template v-slot:prepend>
+                                <i class="ti ti-users mr-3 text-medium-emphasis" style="font-size: 22px;"></i>
+                            </template>
+                            <v-list-item-title>Manage Users</v-list-item-title>
+                            <v-list-item-subtitle>Add, edit, or remove users</v-list-item-subtitle>
+                        </v-list-item>
+                        <v-list-item href="/roles" class="rounded-lg mb-1">
+                            <template v-slot:prepend>
+                                <i class="ti ti-shield mr-3 text-medium-emphasis" style="font-size: 22px;"></i>
+                            </template>
+                            <v-list-item-title>Manage Roles</v-list-item-title>
+                            <v-list-item-subtitle>Configure user permissions</v-list-item-subtitle>
+                        </v-list-item>
+                        <v-list-item href="/activities" class="rounded-lg">
+                            <template v-slot:prepend>
+                                <i class="ti ti-history mr-3 text-medium-emphasis" style="font-size: 22px;"></i>
+                            </template>
+                            <v-list-item-title>Activity Logs</v-list-item-title>
+                            <v-list-item-subtitle>View system activity</v-list-item-subtitle>
+                        </v-list-item>
+                    </v-list>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-container>
+{% endblock %}
+
+{% block js %}
+    <script>
+        const {createApp} = Vue;
+        const {createVuetify} = Vuetify;
+        const vuetify = createVuetify(config.vuetifyConfig);
+
+        const app = createApp({
+            mixins: [layoutMixin],
+            data() {
+                return {
+                    // Page-specific data here
+                };
+            },
+            delimiters: config.delimiters
+        });
+
+        // Register components
+        registerStkComponents(app);
+
+        app.use(vuetify).mount('#app');
+    </script>
+{% endblock %}

stk/templates/index.html

@@ -0,0 +1,52 @@
+{% extends 'layout.html' %}
+{% block body_class %}home{% endblock %}
+{% block content %}
+    <v-container fluid class="fill-height">
+        <v-row align="center" justify="center">
+            <v-col cols="12" sm="10" md="6" lg="4" class="text-center">
+                <div class="mb-6">{% with brand_size = 120 %}{% include "_brand.html" %}{% endwith %}</div>
+
+                <h1 class="text-headline-large font-weight-bold mb-3">Build faster with stk</h1>
+                <p class="text-body-large text-medium-emphasis mb-8">
+                    A modern Flask framework for building web applications.
+                </p>
+
+                {% if current_user.is_authenticated %}
+                <v-btn color="primary" size="large" href="/dashboard">
+                    <template v-slot:prepend><i class="ti ti-layout-dashboard"></i></template>
+                    Go to Dashboard
+                </v-btn>
+                {% else %}
+                <v-btn color="primary" size="large" href="/register">
+                    Get Started
+                </v-btn>
+                <div class="mt-4 text-body-medium text-medium-emphasis">
+                    Already have an account? <a href="/login" class="text-primary">Sign in</a>
+                </div>
+                {% endif %}
+            </v-col>
+        </v-row>
+    </v-container>
+
+    <div style="position: fixed; bottom: 24px; left: 0; right: 0;" class="text-center text-body-small text-medium-emphasis">
+        <a href="https://docs.stk.dev" target="_blank" rel="noopener" class="text-decoration-none">Documentation</a>
+        <span class="mx-2">•</span>
+        <a href="https://github.com/level09/stk" target="_blank" rel="noopener" class="text-decoration-none">GitHub</a>
+    </div>
+{% endblock %}
+
+{% block js %}
+    <script>
+        const {createApp} = Vue;
+        const {createVuetify} = Vuetify;
+        const vuetify = createVuetify(config.vuetifyConfig);
+
+        const app = createApp({
+            mixins: [layoutMixin],
+            delimiters: config.delimiters
+        });
+
+        registerStkComponents(app);
+        app.use(vuetify).mount('#app');
+    </script>
+{% endblock %}