╭ UserSettings.zig ─────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯
1 const std = @import("std"); 2 const builtin = @import("builtin"); 3 const evt = @import("../event.zig"); 4 const ui = @import("../ui.zig"); 5 const inp = @import("./input.zig"); 6 const xit = @import("xit"); 7 const xitui = xit.xitui; 8 const wgt = xitui.widget; 9 const layout = xitui.layout; 10 const Key = xitui.input.Key; 11 const Grid = xitui.grid.Grid; 12 const Focus = xitui.focus.Focus; 13 14 const wasm = builtin.target.cpu.arch == .wasm32; 15 16 // the logged-in user's notifications and settings, or the login form when 17 // logged out. `user_route` is the page's user tab route. 18 pub fn initView(allocator: std.mem.Allocator, session: *ui.Session, notifications: *const ui.UserNotifications, user_route: ui.RoutablePage) !ui.Widget { 19 if (session.data.user_id != null) return .{ .user_notifications = try ui.UserNotifications.View.init(allocator, notifications, session, user_route) }; 20 return .{ .user_login = try ui.UserLogin.View.init(allocator, session, user_route) }; 21 } 22 23 // the user tab's label: the logged-in user's name, or "login" 24 pub fn tabLabel(session: *const ui.Session) []const u8 { 25 if (session.data.user_id == null) return "login"; 26 return session.data.user_name orelse unreachable; 27 } 28 29 // the user tab's bottom label: the unread notification count, if any 30 pub fn tabBottomLabel(session: *const ui.Session) ![]const u8 { 31 if (session.data.unread_notifs == 0) return ""; 32 return session.page_arena.allocator().print("({d})", .{session.data.unread_notifs}); 33 } 34 35 pub const View = struct { 36 // a vertical box holding the centered form, scrolled when it outgrows the window 37 box: wgt.Box(ui.Widget), 38 session: *ui.Session, 39 // the form's controls in order: email, the passwords, then submit 40 control_ids: [5]usize, 41 42 const scroll_index = 0; 43 // the form's children: the email box, the bordered password box, submit 44 const passwords_index = 1; 45 const submit_index = 2; 46 47 // `route` is the user settings route, which the forms post under 48 pub fn init(allocator: std.mem.Allocator, session: *ui.Session, route: ui.RoutablePage) !View { 49 const url = try route.toUrl(session.page_arena); 50 var outer = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .vert }); 51 errdefer outer.deinit(allocator); 52 53 var control_ids: [5]usize = undefined; 54 { 55 var box = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .vert }); 56 errdefer box.deinit(allocator); 57 box.getFocus().kind = .{ .custom = try session.page_arena.allocator().print("form:{s}/user", .{url}) }; 58 59 const saved_fields = if (session.formFeedback(.user_settings)) |saved| saved.fields else null; 60 61 { 62 var email = try wgt.TextInput.init(allocator, .{ .top_label = .{ .text = " email " }, .name = "email", .visible_width = 30, .round_corners = true, .render_content = session.is_terminal }); 63 errdefer email.deinit(allocator); 64 email.getFocus().mode = .all; 65 try email.setContent(allocator, if (saved_fields) |saved| saved.email else session.data.user_email orelse unreachable); 66 // show the start of the prefilled text 67 email.cursor = 0; 68 control_ids[0] = email.getFocus().id; 69 box.getFocus().child_id = email.getFocus().id; 70 try box.children.put(allocator, email.getFocus().id, .{ .widget = .{ .text_input = email }, .rect = null, .min_size = .{ .width = null, .height = 3 } }); 71 } 72 73 // the password changes only when all three are filled in 74 { 75 var passwords = try wgt.Box(ui.Widget).init(allocator, .{ .border = .single, .round_corners = true, .direction = .vert, .top_label = .{ .text = " password " } }); 76 errdefer passwords.deinit(allocator); 77 const fields = [_]struct { label: []const u8, name: []const u8 }{ 78 .{ .label = " old ", .name = "current_password" }, 79 .{ .label = " new ", .name = "new_password" }, 80 .{ .label = " new again ", .name = "new_password_again" }, 81 }; 82 for (fields, 1..) |field, index| { 83 // narrower by the border, so the box lines up with the email box 84 var password = try wgt.TextInput.init(allocator, .{ .top_label = .{ .text = field.label }, .password = true, .name = field.name, .visible_width = 28, .round_corners = true, .render_content = session.is_terminal }); 85 errdefer password.deinit(allocator); 86 password.getFocus().mode = .all; 87 control_ids[index] = password.getFocus().id; 88 try passwords.children.put(allocator, password.getFocus().id, .{ .widget = .{ .text_input = password }, .rect = null, .min_size = .{ .width = null, .height = 3 } }); 89 } 90 passwords.getFocus().child_id = control_ids[1]; 91 try box.children.put(allocator, passwords.getFocus().id, .{ .widget = .{ .box = passwords }, .rect = null, .min_size = null }); 92 } 93 94 { 95 var submit = try ui.widget.SubmitButton.initLabeled(allocator, "submit changes"); 96 errdefer submit.deinit(allocator); 97 control_ids[4] = submit.buttonId(); 98 try box.children.put(allocator, submit.getFocus().id, .{ .widget = .{ .submit_button = submit }, .rect = null, .min_size = .{ .width = null, .height = 3 } }); 99 } 100 101 var center = try ui.widget.Center.init(allocator, .{ .box = box }); 102 errdefer center.deinit(allocator); 103 var scroll = try wgt.Scroll(ui.Widget).init(allocator, .{ .center = center }, .{ .direction = .vert, .web_native = !session.is_terminal, .fill = true }); 104 errdefer scroll.deinit(allocator); 105 try outer.children.put(allocator, scroll.getFocus().id, .{ .widget = .{ .scroll = scroll }, .rect = null, .min_size = null }); 106 } 107 108 outer.getFocus().child_id = outer.children.keys()[scroll_index]; 109 return .{ .box = outer, .session = session, .control_ids = control_ids }; 110 } 111 112 pub fn deinit(self: *View, allocator: std.mem.Allocator) void { 113 self.box.deinit(allocator); 114 } 115 116 pub fn build(self: *View, allocator: std.mem.Allocator, constraint: layout.Constraint, root_focus: *Focus) !void { 117 self.clearGrid(); 118 const failure = if (self.session.formFeedback(.user_settings)) |saved| saved.failure else null; 119 (try self.formField("email")).options.top_label.text = if (failure) |value| switch (value) { 120 .required_email => " email (required) ", 121 .email_taken => " email (taken) ", 122 else => " email ", 123 } else " email "; 124 (try self.formField("current_password")).options.top_label.text = if (failure == .wrong_password) " old (wrong) " else " old "; 125 (try self.formField("new_password")).options.top_label.text = if (failure == .required_password) " new (required) " else " new "; 126 (try self.formField("new_password_again")).options.top_label.text = if (failure == .password_mismatch) " new again (doesn't match) " else " new again "; 127 // the web form handling finds the inputs by focus id 128 const inputs_arena = self.session.arena.allocator(); 129 for (self.formBoxes()) |box| for (box.children.values()) |*child| switch (child.widget) { 130 .text_input => |*ti| try self.session.text_inputs.put(inputs_arena, ti.getFocus().id, ti), 131 else => {}, 132 }; 133 // the window's height as a minimum centers a form that fits 134 self.box.children.values()[scroll_index].min_size = .{ .width = null, .height = constraint.max_size.height orelse constraint.min_size.height }; 135 try self.box.build(allocator, .{ 136 .min_size = .{ .width = constraint.min_size.width, .height = null }, 137 .max_size = constraint.max_size, 138 }, root_focus); 139 } 140 141 pub fn input(self: *View, allocator: std.mem.Allocator, key: Key, root_focus: *Focus) !void { 142 const focused = root_focus.grandchild_id orelse return; 143 const cur = std.mem.indexOfScalar(usize, &self.control_ids, focused) orelse return; 144 const submit_id = self.control_ids[self.control_ids.len - 1]; 145 const on_submit = focused == submit_id; 146 const direction = inp.vertDirection(key); 147 const up = direction == .up or key == .back_tab; 148 if (up or direction == .down or key == .tab) { 149 // up from the first control is the sub header's, through `atTop` 150 if (up and cur == 0) return; 151 const next = if (up) cur - 1 else cur + 1; 152 if (next == self.control_ids.len) return; 153 root_focus.setFocus(self.control_ids[next]); 154 if (self.session.is_terminal) if (self.controlRect(next)) |rect| ui.widget.scrollToCenteredRect(self.formScroll(), rect); 155 return; 156 } 157 switch (key) { 158 .enter => if (on_submit) return self.submitForm(allocator), 159 .mouse => |mouse| if (inp.leftClickOn(root_focus, submit_id, mouse)) return self.submitForm(allocator), 160 else => {}, 161 } 162 if (!on_submit) try (try self.formInput(focused)).input(allocator, key, root_focus); 163 } 164 165 // the boxes holding the form's inputs: the form itself and the password box 166 fn formBoxes(self: *View) [2]*wgt.Box(ui.Widget) { 167 const form = self.formBox(); 168 return .{ form, &form.children.values()[passwords_index].widget.box }; 169 } 170 171 fn formField(self: *View, name: []const u8) !*wgt.TextInput { 172 for (self.formBoxes()) |box| for (box.children.values()) |*child| switch (child.widget) { 173 .text_input => |*text_input| if (std.mem.eql(u8, text_input.options.name, name)) return text_input, 174 else => {}, 175 }; 176 return error.MissingFormField; 177 } 178 179 fn formInput(self: *View, id: usize) !*wgt.TextInput { 180 for (self.formBoxes()) |box| if (box.children.getPtr(id)) |child| return &child.widget.text_input; 181 return error.MissingFormField; 182 } 183 184 // the rect of the control at `index` in the form's space; a password's is 185 // offset by its box 186 fn controlRect(self: *View, index: usize) ?layout.IRect { 187 const form, const passwords = self.formBoxes(); 188 return switch (index) { 189 0 => form.children.values()[0].rect, 190 self.control_ids.len - 1 => form.children.values()[submit_index].rect, 191 else => { 192 const outer = form.children.values()[passwords_index].rect orelse return null; 193 const inner = passwords.children.values()[index - 1].rect orelse return null; 194 return .{ .x = outer.x + inner.x, .y = outer.y + inner.y, .size = inner.size }; 195 }, 196 }; 197 } 198 199 // update the user. this is the terminal path; the web posts the form to 200 // the user route. 201 fn submitForm(self: *View, allocator: std.mem.Allocator) !void { 202 if (comptime wasm) return; 203 const io = self.session.io orelse return; 204 const users_dir = self.session.users_dir orelse return; 205 const admin_repo = self.session.admin_repo orelse return; 206 const user_id = self.session.userId() orelse return; 207 208 const email = try (try self.formField("email")).text(allocator); 209 defer allocator.free(email); 210 const current_password = try (try self.formField("current_password")).text(allocator); 211 defer allocator.free(current_password); 212 const new_password = try (try self.formField("new_password")).text(allocator); 213 defer allocator.free(new_password); 214 const new_password_again = try (try self.formField("new_password_again")).text(allocator); 215 defer allocator.free(new_password_again); 216 217 evt.updateUser(io, allocator, users_dir, admin_repo, &user_id, email, current_password, new_password, new_password_again) catch |err| switch (err) { 218 // the account was removed under them 219 error.NotFound => return ui.UserNotifications.logOut(self.session), 220 else => { 221 const failure = ui.Session.FormFeedback.UserFailure.fromError(err) orelse return err; 222 const aa = self.session.arena.allocator(); 223 self.session.data.form_feedback = .{ .user_settings = .{ .failure = failure, .fields = .{ .email = try aa.dupe(u8, email) } } }; 224 return; 225 }, 226 }; 227 228 // reload the page with the saved email and the password fields cleared 229 self.session.haxy_moment = try evt.currentMoment(evt.admin_repo_opts, admin_repo); 230 try self.session.loadUser(); 231 try self.session.navigate(self.session.data.current_page); 232 } 233 234 fn formScroll(self: *View) *wgt.Scroll(ui.Widget) { 235 return &self.box.children.values()[scroll_index].widget.scroll; 236 } 237 238 fn formBox(self: *View) *wgt.Box(ui.Widget) { 239 return &self.formScroll().child.center.child.box; 240 } 241 242 pub fn clearGrid(self: *View) void { 243 self.box.clearGrid(); 244 } 245 246 pub fn getGrid(self: View) ?Grid { 247 return self.box.getGrid(); 248 } 249 250 pub fn getFocus(self: *View) *Focus { 251 return self.box.getFocus(); 252 } 253 254 // up leaves the view from the first control 255 pub fn atTop(self: *View, root_focus: *Focus) bool { 256 return root_focus.grandchild_id == self.control_ids[0]; 257 } 258 }; 259